/* Convert multi-object array into separate single object arrays */

var photos = [];
    for (var i = 0, len = gallery.length; i < len; i++) {
        photos.push(gallery[i]["img"]);
    }
photos.unshift('000000.png');


var captions = [];
    for (var i = 0, len = gallery.length; i < len; i++) {
        captions.push(gallery[i]["caption"]);
    }
captions.unshift('000000');

var credits = [];
    for (var i = 0, len = gallery.length; i < len; i++) {
        credits.push(gallery[i]["credit"]);
    }
credits.unshift('000000');

/****************************************************************/


/* just for show */
var css_count = 0; 
var IE_count = 0;

function swap(){
opacity = 0;
IE_opacity = 0;

if (navigator.appVersion.indexOf("MSIE") != -1){
document.getElementById("blendinger").style.filter = "alpha(opacity=0)";
interval = setInterval("blendinger_IE()",25)

}
else {
document.getElementById("blendinger").style.opacity=0;
interval = setInterval("blendinger_opacity()",25)
}
}


function blendinger_IE(){
if (IE_opacity < 100){
IE_opacity = IE_opacity +4;
document.getElementById("blendinger").style.filter = "alpha(opacity="+IE_opacity+")";

/* just for show */
document.forms[0].display_IE.value=IE_opacity;
IE_count++;
document.forms[0].IE_count.value=IE_count;

}

else{
clearInterval(interval);
IE_count = 0;
}
}

function blendinger_opacity(){

if (opacity < 1){
opacity = (Math.floor(opacity * 100) +4) / 100;
document.getElementById("blendinger").style.opacity=opacity;

/* just for show */
document.forms[0].display_css.value=opacity;
css_count++;
document.forms[0].css_count.value=css_count;

}
else{
clearInterval(interval);

/* just for show */
css_count = 0;
}
}


var cycle = 1;
var total = photos.length -1;


// preload image before and after current

/* just for show */

var initial_preload_next_status = ''
var initial_preload_back_status = ''

initial_preload_next = new Image(400,300);
initial_preload_next.onload = function(){
initial_preload_next_status = photos[2];
document.getElementById("status").innerHTML='Preloaded: '+initial_preload_next_status+' / '+initial_preload_back_status ;
};
initial_preload_next.src = 'images/'+photos[2];

initial_preload_back = new Image(400,300);
initial_preload_back.onload = function(){
initial_preload_back_status = photos[photos.length -1];
document.getElementById("status").innerHTML='Preloaded: '+initial_preload_next_status+' / '+initial_preload_back_status ;
};
initial_preload_back.src = 'images/'+photos[photos.length -1];


function load_next(){

// set current image as background and overlay png

document.getElementById("background_image").style.backgroundImage="url(images/"+photos[cycle]+")";
document.images.animation.src='images/000000.png';

// Preload the image after the one currently on display,
// which is probably already cached.
//
// If next is after last image, preload first image:
// If cycle+1 equals array.length preload photo #1 instead of the next.
	
preload_image = new Image(400,300);
preload_image.onload = switch_next; // when complete, proceed with switch_next

if (cycle+1 == photos.length){

document.getElementById("status").innerHTML='Preload: '+photos[1];
// alert('Preload: '+photos[1]); // this halts at the alert before proceding to next function 
preload_image.src = 'images/'+photos[1];

}
else {
document.getElementById("status").innerHTML='Preload: '+photos[cycle+1];
// alert('Preload: '+photos[cycle+1]); // this halts at the alert before proceding to next function 
preload_image.src = 'images/'+photos[cycle+1];
}

}

function switch_next(){

// increment cycle, but if result is after last image, reset
// the cycle index to first photo in the array.

cycle++;

if (cycle == photos.length){
cycle = 1;
}

// switch the image to the one corresponding to the incremented
// value, or the reset value.

swap();
setTimeout('document.images.animation.src="images/"+photos[cycle]',25);
document.getElementById("count").innerHTML='<nobr>' + cycle + ' of ' + total + '</nobr>';


// Below does not consider a possible hide/show layer defined
// throughout clickthrough by user in case this will be an added feature. This will simply
// remove the caption/credit strip if both objects are empty
if (captions[cycle] == '' && credits[cycle] == ''){
document.getElementById("image_caption").style.display = 'none';
}
// ... but if not, change and display
else{
document.getElementById("image_caption").innerHTML=captions[cycle] + credits[cycle];
document.getElementById("image_caption").style.display = '';
document.getElementById("image_caption").style.padding = '5px'; /* workaround to expanding div */
document.getElementById("image_caption").style.width = '390px';  /* width minus above total pixels on left/right */
}



// Set tooltip for image download link on forward click
document.blendinger.title = 'Save original image ' + photos[cycle] +' in high-resolution';


// begin preloading image after the one that is now
// on display, but if cycle is after the last, preload the first
// image instead, which should normally already be cached.

preload_image = new Image(400,300);

/* if cycle+1 equals photos.length (#11) preload photo #1 instead of #11 */
if (cycle+1 == photos.length){
preload_image.onload = function(){
document.getElementById("status").innerHTML='Preloaded: '+photos[1];
};
preload_image.src = 'images/'+photos[1];
}

else {
preload_image.onload = function(){
document.getElementById("status").innerHTML='Preloaded: '+photos[cycle+1];
};

preload_image.src = 'images/'+photos[cycle+1];
}
}

function load_back(){

// set current image as background and overlay png

document.getElementById("background_image").style.backgroundImage="url(images/"+photos[cycle]+")";
document.images.animation.src='images/000000.png';

// preload the image before the one currently on display,
// which is probably already cached.
//
// If previous is before the first image, preload the last image:
// If cycle-1 equals zero, preload photos[array.length-1] instead.

preload_image = new Image(600,400);
preload_image.onload = switch_back;

if (cycle-1 == 0){
document.getElementById("status").innerHTML='Preload: '+photos[photos.length-1];
//alert('Preload: '+photos[photos.length-1]); // this halts at the alert before proceding to next function 
preload_image.src = 'images/'+photos[photos.length-1];

}
else {
document.getElementById("status").innerHTML='Preload: '+photos[cycle-1];
//alert('Preload: '+photos[cycle-1]); // this halts at the alert before proceding to next function 
preload_image.src = 'images/'+photos[cycle-1];
}

}


function switch_back(){

// decrease cycle, but if before the first image, reset

// if cycle becomes zero reset to array.length -1 which is the last image when referenced in array
cycle--;
if (cycle == 0){
cycle = photos.length -1;
}

// switch image to the one corresponding to the decreased
// value, or the reset value.

swap();
setTimeout('document.images.animation.src="images/"+photos[cycle]',25);
document.getElementById("count").innerHTML='<nobr>' + cycle + ' of ' + total + '</nobr>';
document.getElementById("image_caption").innerHTML=captions[cycle] + credits[cycle];

if (captions[cycle] == '' && credits[cycle] == ''){
document.getElementById("image_caption").style.display = 'none';
}
// ... but if not, change and display
else{
document.getElementById("image_caption").innerHTML=captions[cycle] + credits[cycle];
document.getElementById("image_caption").style.display = '';
document.getElementById("image_caption").style.padding = '5px'; /* workaround to expanding div */
document.getElementById("image_caption").style.width = '390px';  /* width minus above total pixels on left/right */
}


// Set tooltip for image download link on previous click
document.blendinger.title = 'Save original image ' + photos[cycle] +' in high-resolution';



// Begin preloading image before the one that is now
// on display, but if cycle-1 is before the first,
// preload the last image instead.

preload_image = new Image(400,300);

// if cycle is at the first photo, preload the last photo in array
if (cycle == 1){
preload_image.onload = function(){
document.getElementById("status").innerHTML='Preloaded: '+photos[photos.length-1];
};
preload_image.src = 'images/'+photos[photos.length-1];
//alert(photos[photos.length-1])
}
else {
preload_image.onload = function(){
document.getElementById("status").innerHTML='Preloaded: '+photos[cycle-1];
};
preload_image.src = 'images/'+photos[cycle-1];

}
}


// Determine link for original download

function link_original(){

var library_code = photos[cycle].substring(0,3)

if (library_code == '001'){
download_directory = 'hotel_download';
}
if (library_code == '002'){
download_directory = 'praslin_beaches_download';
}
if (library_code == '003'){
download_directory = 'diving_download';
}
if (library_code == '004'){
download_directory = 'vallee_de_mai_download';
}
if (library_code == '008'){
download_directory = 'mixed_download';
}

if (library_code == '009'){
download_directory = 'duplicate_download';
}


window.location.href = 'images/download.cgi?path='+download_directory+'&file='+photos[cycle];

}


/* Output a left aligned table */

d = document;

/* Set margins for left or right alignment
   Options: alignment = 'right' or 'left' or
	define 'top right bottom left' CSS values.
	Note: For CSS values, there is no float. */

if (typeof alignment=='undefined' || alignment == 'left' ){
var animation_box_margins = '0px 15px 15px 0px';
var animation_box_float = 'left';
}

else if (alignment=='right'){
var animation_box_margins = '0px 0px 15px 15px';
var animation_box_float = 'right';
}
else {
animation_box_margins = alignment;
var animation_box_float = 'none';

}

d.write('<table align='+animation_box_float+' width="400" cellpadding="0" cellspacing="4" border="0" style="background: #f4f4f4; border: 1px solid #c8c8c8; margin: '+animation_box_margins+';"><tr>');
d.write('<td colspan="3" valign="bottom" id="background_image" style="border:0;">');

d.write('<div style="border:0px solid black; position: relative; height: 300px; width: 400px;">');

/* setting z-index to 1 removes the blend in/out of the text layer */

d.write('<div id="image_caption" style="position: absolute; bottom:0; width: 390px; padding: 5px; color: #ffffff; background: url(images/caption_background.png); z-index:1; font-size: 13px;">');


/* initial view parameters */
if (captions[cycle] == '' && credits[cycle] == ''){
document.getElementById("image_caption").style.display = 'none';
}
else{
document.write(captions[cycle] + credits[cycle]);
document.getElementById("image_caption").style.display = '';
}


d.write('</div>');


d.write('<a href="javascript:void(0);" onclick="link_original()">');
d.write('<img src="images/'+photos[cycle]+'" name="animation" width="400" height="300" id="blendinger" style="border:0px;">');
d.write('</a>');

d.write('</div>');


/* Set initial download link tooltip */
document.blendinger.title = 'Save original image ' + photos[cycle] +' in high-resolution';


d.write('</td></tr>');

/* Define clickthrough buttons or not via optional variable named
   clickthrough. Options are show or hide. Default, if no variable
	exists is to display the buttons */

if (typeof clickthrough=='undefined' || clickthrough == 'show' ){
var buttons_state = 'table_row';
}
else{
var buttons_state = 'none';
}

d.write('<tr style="display:'+buttons_state+';"><td>');
d.write('<table width="114" height="19" cellpadding="0" cellspacing="0" border="0"><tr>');
d.write('<td align="center" style="background-image: url(images/button.png); background-position: center; background-repeat: no-repeat; line-height: 19px;">');
d.write('<a href="javascript:void(0);" onmousedown="load_back(\'back\');" onclick="this.blur()" style="display:block; font-size: 11px; text-decoration:none;">');
d.write('Previous</a>');
d.write('</td></tr></table>');

d.write('</td>');

d.write('<td align="center" id="count" style="line-height: 19px; font-size: 11px;">');
document.write('<nobr>'+cycle + ' of ' + total+'<nobr>');
d.write('</td>');

d.write('<td align="right">');

d.write('<table width="114" height="19" cellpadding="0" cellspacing="0" border="0"><tr>');
d.write('<td align="center" style="background-image: url(images/button.png); background-position: center; background-repeat: no-repeat; line-height: 19px;">');
d.write('<a href="javascript:void(0);" onmousedown="load_next(\'next\');" onclick="this.blur()" style="display:block; font-size:11px; text-decoration:none;">');
d.write('Next</a>');
d.write('</td></tr></table>');

d.write('</td>');
d.write('</tr>');

d.write('<tr style="display:none">');
d.write('<td colspan="3" style="font-size: 70%;">');

d.write('<form>');
d.write('Output for non MS browsers:<br>');
d.write('<input type="text" size="4" name="display_css"> <- opacity values<br>');
d.write('<input type="text" size="4" name="css_count"> <- frames<br>');
d.write('Output for IE browsers only:<br>');
d.write('<input type="text" size="4" name="display_IE"> <- opacity values<br>');
d.write('<input type="text" size="4" name="IE_count"> <- frames<br>');
d.write('</form>');
d.write('<div id="status" style="width:351px;padding:1px;margin-top:2px;background:#f5f5f5;">');
d.write('&nbsp;');
d.write('</div>');
d.write('</td>');

d.write('</tr>');
d.write('</table>');