var picture_count;
var showImgCount;
var picPerClick;

var all_pictures;
var all_300_pictures;
var all_full_pictures;
var all_titles;
var all_dates;
var all_nicknames;
var all_countrys;

var first_left;
var first_right;

var shift_left_name    = "shift_left";
var shift_right_name   = "shift_right";
var image_display_name = "image_display";
var box_link_name      = "box_link";
var box_img_link_name  = "box_img_link";

var shift_left_on_image_filename   = "/images/a-c/arrow_left_on.gif";
var shift_left_off_image_filename  = "/images/a-c/arrow_left_off.gif";
var shift_right_on_image_filename  = "/images/a-c/arrow_right_on.gif";
var shift_right_off_image_filename = "/images/a-c/arrow_right_off.gif";

function pictureDetails(titles, dates, nicknames, countrys) {
	all_titles = titles;
	all_dates = dates;
	all_nicknames = nicknames;
	all_countrys = countrys;
}

function box_open(){
 var box_container;
 try {
    box_container = document.getElementById('box-container');
    if ( box_container != null ) {
    box_container.style.display = 'inline';
 }
 }catch(e){
 }
}

function box_close(){
 var box_container;
 try {
 box_container = document.getElementById('box-container');
 box_container.style.display = 'none';
 }catch(e){
 }
}


function initializeVariables(thumbPictures, all300Pictures, allFullPictures, picsPerLine, picsPerClick){
	/* Init the arrays for the sub pictures and the var for the main image */

  	all_pictures = thumbPictures;
	all_300_pictures = all300Pictures;
	
	if(allFullPictures != null)
	{
	    all_full_pictures = allFullPictures;
	} else {
	    all_full_pictures = all300Pictures;
	}
	
	//limitation TODO: make ASYNC Preloading of images
	
	picture_count = (all_full_pictures.length > 20)?20:all_full_pictures.length;
	
	showImgCount = picsPerLine;	//how much IMGs per Line are displayed (shop=4) (picupload=8)
	picPerClick  = picsPerClick;	//navigate by X throug the pics

	// IE6 seems to have problems by keeping the counter value, so we set the array length again, if needed
	if(picture_count == undefined){
		picture_count = all_pictures.length;
	}

	/* Init the shift_vars, if they are needed */
	if(picture_count >= showImgCount){
		first_left = 0; // index of image displayed nearest to left border
		first_right = showImgCount-1; // index of image displayed nearest to right border
	}
	else{
		first_left = 0; // index of image displayed nearest to left border
		first_right = picture_count-1; // index of image displayed nearest to right border
	}
}

/* Function to display product image called by mouseover on the small image */
function displayImage(image, withIcon, withInfo, title){
	 try {
		if(withInfo == true) {
			 var image_display_index = image;
			 document.getElementById('customer_image_index').innerHTML = image_display_index+1;			 
			 var image_display_nickname = all_nicknames[image];
			 document.getElementById('image_display_nickname').innerHTML = image_display_nickname;			 
			 var image_display_date = all_dates[image];
			 document.getElementById('image_display_date').innerHTML = image_display_date;
			 var image_display_country = all_countrys[image];
			 var image_display_flag = document.getElementById('image_display_flag');
			 image_display_flag.src = '/images/flags/flag_'+image_display_country+'.gif';
		}
		// Create new image path
		var image_path = all_300_pictures[image];		
		// Get the image display container
		var image_display = document.getElementById(image_display_name);
		// Change the paths to display requested image
		image_display.src = image_path;

		if(!withInfo){	
			image_display.setAttribute("onclick", "zoomImage("+image+",true)");
		}
		// Get title
		image_display.alt = (withInfo == true) ? all_titles[image] : title;

		if(withInfo == true) {
			var image_display_title = (withInfo == true) ? all_titles[image] : title;
			document.getElementById('image_display_title').innerHTML = image_display_title;
		}
		
		
	 }catch(e){
			alert("Error: "+e);
	 }
}

/* Function to display the full image */
function zoomImage(image, withBox){
	try {
		if(withBox == true) {
			// Create new image path
			var image_path = all_full_pictures[image];
			// Get the image display container
			var box_content = document.getElementById('box_content').getElementsByTagName('img')[0];
			//var box_content = new Image();
			// Change the paths to disploy requested image
			box_content.src = image_path;
			// Call the function to show the zoomed picture
			box_open();
		}
	 }catch(e){
		alert("Error: "+e);
	 }
}
	/* Function to display the zoomed image */
function shiftDisplay(direction){
	try {
		// Left Button Pressed
		if((direction == shift_left_name) && (first_left > 0)){
			first_left  = (first_left - picPerClick >= 0) ? first_left  - picPerClick : 0;
			first_right = (first_left - picPerClick >= 0) ? first_left  + showImgCount - 1 : showImgCount - 1;
		
			if(first_left == 0) document[shift_left_name].src = shift_left_off_image_filename;
			if(first_right < picture_count-1) document[shift_right_name].src = shift_right_on_image_filename;
		} 
		
		//Right Button Pressed
		if((direction == shift_right_name) && (first_right < picture_count-1)){
			first_left  = (first_left + picPerClick <= picture_count) ? first_left + picPerClick: first_left;
			first_right = (first_right + picPerClick <= picture_count) ? first_right + picPerClick : picture_count-1;
			
			if(first_left > 0) document[shift_left_name].src = shift_left_on_image_filename;
			if(first_right >= picture_count-1) document[shift_right_name].src = shift_right_off_image_filename;
		}
		
		// show / hide images
		for( var i = 0; i < picture_count; i++){
			var imageElement = document.getElementById('container_'+i);
			imageElement.style.display = (i>=first_left && i<=first_right)?'inline':'none';
		}
		
	}catch(e){
		alert("Error: "+e);
	}
}

function createPictureView(title, shopIdentifier, detailsDisplay_picture_view, shop_product_recommend, withIcon, withBox, withInfo, margin1, margin2) {
	// IE6 seems to have problems by keeping the counter value, so we set the array length again, if needed
	if(picture_count == undefined){
		picture_count = (all_full_pictures.length > 20)?20:all_full_pictures.length;
	}
	
	if(withInfo == false) {
		document.write('\n<div style="width: 300px; height: 300px;">\n\t');
		document.write('<img src="'+all_300_pictures[0]+'" onclick="zoomImage(0,'+withBox+');" class="detailImage" alt="'+title+'" border="0" id="'+image_display_name+'" />\n');
		document.write('</div>\n\n');
	}
	if (picture_count > 1 && picture_count <= showImgCount){
		/* Otherwise display the new multiple picture layout (without arrows for 4 or less pictures) */
		document.write('<div style="width: 100%; height: 60px; border: 1px solid #CCCCCC; margin-top: 10px; overflow:hidden;">\n\n');

		/* Loop to display the images */
		for(var i = 0; i < picture_count; i++){
			document.write('<div id="container_'+i+'" style="float:left; width: 50px; cursor:pointer;');
			
			/* Margin for first and last photo */
			if(i == 0){
				document.write(' margin:5px '+margin2+' 5px '+margin1+';');
			} else if(i == showImgCount && showImgCount == picture_count){
				document.write(' margin:5px '+margin1+' 5px '+margin2+';');
			} else {
				document.write(' margin:5px '+margin2+';');
			}
			document.write('">\n\t');
			
			document.write('<img src="'+all_pictures[i]+'" alt="');
			if(withInfo == false) {
				document.write(title);
			} else {
				document.write(all_titles[i]);
			}
			document.write('" border="0" width="50px" height="50px" onclick="displayImage('+i+','+withIcon+','+withInfo+',\''+title.replace(/\'/g,"\\'")+'\');" />\n');
			document.write('</div>\n');
		}

		document.write('<div style="clear:both;"></div>\n');
		document.write('</div>\n\n');
	} else if (picture_count > showImgCount) {
		/* New layout with arrows */
		document.write('<div style="width: 100%; height: 60px; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; margin-top: 10px; overflow:hidden">\n\n');

		/* Display left arrow */
		document.write('<div id="'+shift_left_name+'" style="width: 22px; float:left; text-align:left; margin-right: 6px;">\n\t');
		document.write('<img name="'+shift_left_name+'" src="'+shift_left_off_image_filename+'" alt="'+shift_left_name+'" border="0" style="cursor:pointer;" onclick="shiftDisplay(shift_left_name);" />\n');
		document.write('</div>\n\n');

		/* Loop to display the images */
		for(var i = 0; i < picture_count; i++){
			document.write('<div id="container_'+i+'" style="float:left; width:50px; cursor:pointer; margin:5px '+margin2+';');

			/* Display only the first showImgCount images, hide the others */
			if(i >= showImgCount){
				document.write(' display:none; ');
			} else {
				document.write(' display:inline; ');
			}

			document.write('">\n\t');
			document.write('<img src="'+all_pictures[i]+'" alt="');
			if(withInfo == false) {
				document.write(title);
			} else {
				document.write(all_titles[i]);
			}
			document.write('" border="0" width="50px" height="50px" onclick="displayImage('+i+','+withIcon+','+withInfo+',\''+title.replace(/\'/g,"\\'")+'\');" />\n');
			document.write('</div>\n');
		}

		/* Display right arrow */
		document.write('<div id="'+shift_right_name+'" style="width:22px; float:right; text-align:right; margin-left: 6px;">\n\t');
		document.write('<img name="'+shift_right_name+'" src="'+shift_right_on_image_filename+'" alt="'+shift_right_name+'" border="0" style="cursor:pointer;" onclick="shiftDisplay(shift_right_name);" />\n');
		document.write('</div>\n\n');
		
		document.write('<div style="clear:both;"></div>\n');
		document.write('</div>\n\n');
	}
}