// ********************************************************************************
// SCRIPT: PHOTOBOX RESEARCHNED
// VERSION: 2007.09.20
// COPYRIGHT: ELONISAS, ELST (GLD), NETHERLANDS
// AUTHOR: ERIK LANGHOUT
// ********************************************************************************

// ********************************** BROWSER DETECTION ****************************************

var d, dom, ie, ie4, ie5x, moz, mac, win, lin, old, ie5mac, ie5xwin, op;

d = document;
n = navigator;
na = n.appVersion;
nua = n.userAgent;
win = ( na.indexOf( 'Win' ) != -1 );
mac = ( na.indexOf( 'Mac' ) != -1 );
lin = ( nua.indexOf( 'Linux' ) != -1 );

if ( !d.layers ){
	dom = ( d.getElementById );
	op = ( nua.indexOf( 'Opera' ) != -1 );
	konq = ( nua.indexOf( 'Konqueror' ) != -1 );
	saf = ( nua.indexOf( 'Safari' ) != -1 );
	moz = ( nua.indexOf( 'Gecko' ) != -1 && !saf && !konq);
	ie = ( d.all && !op );
	ie4 = ( ie && !dom );

	/*
	ie5x tests only for functionality. ( dom||ie5x ) would be default settings. 
	Opera will register true in this test if set to identify as IE 5
	*/

	ie5x = ( d.all && dom );
	ie5mac = ( mac && ie5x );
	ie5xwin = ( win && ie5x );
}

// *********************************************************************************************
function getImagelist(as_category) {

	// Initialize the Ajax component if needed
	if ( window.XMLHttpRequest ) {
		obj = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		obj = new ActiveXObject("Microsoft.XMLHTTP");
	}
	// Check if success
	if (typeof obj == 'undefined') {
		alert("Sorry, deze browser ondersteunt geen XMLHTTP!");
		return '';
	}

  // Request the imagelist
  var goUrl = "photobox/index.php?category=" + as_category;
	try {
		obj.open( "POST", goUrl, false );
		obj.send(null);
	}
	catch (err) {
		alert( "Error initializing XMLHttpRequest.\n" + err);
	}

  if ((obj.responseText.substr(0,5).toUpperCase() == "ERROR") || (obj.responseText == "")) {
    alert("Fout bij ophalen van photobox-images!\n" + obj.responseText);
		return '';
  } else {
		return obj.responseText;
	}

}

// *********************************************************************************************
function photobox_initialize( as_category, ai_horizontal, ai_vertical, ai_width, ai_height ) {

	// ***** Variable definitions *****
	var interval = 100;
	var total = 0;
	var degree = 0;
	var stockimagepointer = 0;
	var stockimagearray = Array();
	var stockimagestatusarray = Array();
	var foregroundimagearray = Array();
	var backgroundimagearray = Array();
	var photo1_img = Array();
	var photo2_img = Array();
	var photobox_html = '';

	var active_layer = Array();
	var inactive_layer = Array();

	// ***** Initializations *****
	total = parseInt(ai_horizontal) * parseInt(ai_vertical);
	photobox_div = document.getElementById("photobox");

	// ***** Make it invisible *****
	photobox_div.style.visibility = 'hidden';

	// ***** Create mask layer *****
	photobox_html += '<div id="masklayer">';
	for (i=1;i<=total;i++) {
		photobox_html += '<img id="mask_' + i + '" src="images/photomask.gif" />';
	}
	photobox_html += '</div>'

	// ***** Create first photolayer *****
	photobox_html += '<div id="photolayer1">';
	for (i=1;i<=total;i++) {
		photobox_html += '<img id="photo1_' + i + '" src="images/transparent.gif" />';
		active_layer[i] = 1;
	}
	photobox_html += '</div>';
	
	// ***** Create second photolayer *****
	photobox_html += '<div id="photolayer2">';
	for (i=1;i<=total;i++) {
		photobox_html += '<img id="photo2_' + i + '" src="images/transparent.gif" />';
		inactive_layer[i] = 2;
	}
	photobox_html += '</div>';
	
	// ***** Get reference to photobox div and set the size and HTML *****
	photobox_div.style.width = parseInt(ai_width) + 'px';
	photobox_div.style.height = parseInt(ai_height) + 'px';
	photobox_div.innerHTML = photobox_html;

	// ***** Get reference to masklayer and set the size *****
	masklayer_div = document.getElementById("masklayer");
	masklayer_div.style.width = parseInt(ai_width) + 'px';
	masklayer_div.style.height = parseInt(ai_height) + 'px';

	// ***** Get reference to photolayers and set the size *****
	photolayer1_div = document.getElementById("photolayer1");
	photolayer2_div = document.getElementById("photolayer2");
	photolayer1_div.style.width = parseInt(ai_width) + 'px';
	photolayer2_div.style.width = parseInt(ai_width) + 'px';
	photolayer1_div.style.height = parseInt(ai_height) + 'px';
	photolayer2_div.style.height = parseInt(ai_height) + 'px';

	// ***** Get references to the individual images *****
	for (i=0;i<total;i++) {
		photo1_img[i] = document.getElementById("photo1_" + (i+1) );
		photo2_img[i] = document.getElementById("photo2_" + (i+1) );
	}

	// ***** Get list of images to be displayed *****
	imagelist = getImagelist(as_category);
	stockimagearray = imagelist.split(";");
	stockimagearraysize = stockimagearray.length;
	for (i=0;i<stockimagearraysize;i++) stockimagestatusarray[i] = 0;

	// ***** Load initial images *****
	stockimagepointer = 0;
	stockimagepointer_max = stockimagearray.length - 2;
	for (i=0;i<total;i++) {
		photo1_img[i].src = "photobox/"+ stockimagearray[stockimagepointer]; stockimagestatusarray[stockimagepointer] = 1; foregroundimagearray[i] = stockimagepointer
		if (stockimagepointer < stockimagepointer_max ) stockimagepointer++; else stockimagepointer = 0; 
		photo2_img[i].src = "photobox/"+ stockimagearray[stockimagepointer]; stockimagestatusarray[stockimagepointer] = 2; backgroundimagearray[i] = stockimagepointer
		if (stockimagepointer < stockimagepointer_max ) stockimagepointer++; else stockimagepointer = 0; 
	}

	// ***** Finally make it visible *****
	photobox_div.style.visibility = 'visible';

	// ***** FUNCTION TO CHANGE IMAGE ON REGULAR INTERVALS
	changeimage=function(img_nr){

		imgobj_active = document.getElementById("photo" + active_layer[img_nr] + "_" + img_nr);
		imgobj_inactive = document.getElementById("photo" + inactive_layer[img_nr] + "_" + img_nr);

		// ***** Check features of browser to select the correct method for fading *****
		if ( typeof imgobj_active.style.filter == "string" ) {
			imgobj_active.style.filter="alpha(opacity="+(100-degree)+")";
			imgobj_inactive.style.filter="alpha(opacity="+(degree)+")";
		} else if ( typeof imgobj_active.style.opacity  == "string" ) {
			// CSS3 compliant; Mozilla 1.7alpha and higher, Safari 1.2, Opera 9
			imgobj_active.style.opacity = (1-degree/100);
			imgobj_inactive.style.opacity = (degree/100);
		} else if ( typeof imgobj_active.style.MozOpacity == "string" ) {
			imgobj_active.style.MozOpacity = (1-degree/100);
			imgobj_inactive.style.MozOpacity = (degree/100);
		} else if ( typeof imgobj_active.filters.alpha != "undefined" && "filters" in imgobj_active && typeof imgobj_active.filters.alpha.opacity == "number" ) {
			imgobj_active.filters.alpha.opacity = (100-degree)+")";
			imgobj_inactive.filters.alpha.opacity = (degree)+")";
		} else if( typeof imgobj_active.style.getPropertyValue("-khtml-opacity") == "string") {
			// Safari 1.1 and lower
			imgobj_active.style.setProperty("-khtml-opacity", (1-degree/100), null);
			imgobj_inactive.style.setProperty("-khtml-opacity", (degree/100), null);
		}

		// Every step the opacity is increased until 100% opacity is reached
		if ( degree < 100 ) {
			// Increase opacity and set timeout for next step
			degree += 2;
			setTimeout(function(){changeimage(img_nr)}, interval) 
		} else {

			// Reset opacity
			degree = 0;

			// Switch inactive image
			imgobj_active.src = "photobox/"+ stockimagearray[stockimagepointer]; stockimagestatusarray[stockimagepointer] = 2;  backgroundimagearray[img_nr] = stockimagepointer;
			if (stockimagepointer < stockimagepointer_max ) stockimagepointer++; else stockimagepointer = 0;

			// switch active and inactive layer reference
			temp_layer = active_layer[img_nr];
			active_layer[img_nr] = inactive_layer[img_nr];
			inactive_layer[img_nr] = temp_layer;

			// Proceed with next image
			if ( img_nr < total ) img_nr++; else img_nr = 1;
			setTimeout(function(){changeimage(img_nr)}, interval);
		}
	}

	// Start the timer
	setTimeout(function(){changeimage(1)}, interval);

}