// created 05.10.2009 by Mario Winkler
//
// mediacenter functionality, tabbed navigation
// uses jQuery JS-framework
/*global 
$, document
imgs_50, imgs_300, imgs_800
*/



// global var for initiate Zoom Fkt.
var LAST_CLICKED = 0;
var options = {
	    zoomWidth: 300,
	    zoomHeight: 250,
		xOffset: 10,
		yOffset: 0,
		position: "right",
		title :false
	};

// get 1st visible thumbnail
function startThumb(tmbList){
	var i=-1;
	tmbList.each(function (index, domEle){
		// skip the first (navigation item)
		if($(".thumbs li:visible")[1] == domEle) {i=index; return;}
	});
	return i;
}

// change Navigation Items after click //fvi:1st visible item
function changeNavItems(fvi, tmbList){
	tmbList[0].className = ((fvi == 1)?"off":"on");// toggle left
	tmbList[(tmbList.length)-1].className = ((fvi+3) < ((tmbList.length-2))?"on":"off");// toggle right
}

// drop existing Zoom instance
function removeExistingZoom(){
	// remove old Object from code (leave Object in Browsercache)
	var img = $("#photomedium");
	img.unbind();
	img.css({'cursor':'default'});
	$(".jqZoomWindow").remove();
	$(".jqZoomPup").remove();
	$("#magnify").remove();
}

// Attach the JQzoom to the indexed element & show 
function attachZoom(imageIndex){

	// check if HigResolution image is available & attach Zoom functionality
	if(imgs_800[imageIndex].url && imgs_800[imageIndex].url != ''){
		if($("#magnify").length === 0){
			var html = '';
			html += '<div id="magnify" >\n';
			html += '   <a href='+ imgs_800[imageIndex].url +' id="zoomed_img" >\n';
			html += '      Zoom\n';
			html += '   </a>\n';
			html += '</div>\n';
			
			$("#productmedia").append(html);
		}
		$("#magnify").click(function(){
			$(".zoomed_img"+imageIndex).jqzoom(options);
			$("#magnify").fadeOut("slow", function (){
				$("#magnify").remove();
			});
		});
		return true;
	}

return false;
}


// handle mediatypes
function displayMedia(mediaType){
	var pmimg = $("#zoomplace"), 
		mplay = $("#" + mediaType+ "_player");
		
	if(mediaType == "foto"){
		pmimg.show();
		$("#" + mediaType + "_thumbs").show();
		attachZoom(LAST_CLICKED);
	}else{
		if(mediaType != "audio"){
			pmimg.hide();
		}else{
			pmimg.show();
			$("#media_overlay").show();
		}
		mplay.show();	
	}	
}

function hideMedia(mediaType){
	$("#media_overlay").hide();
	if(mediaType != "foto"){
		$("#" + mediaType+ "_player").hide();
	}else{
		$("#" + mediaType+ "_thumbs").hide();
		removeExistingZoom();
	}	
}

// get / set height of 2 columns in mediacenter depending on tallest one
// ... to avoid layoutbreaks when aligning community box on bottom
function firstHeightMax(obj1, obj2){
	var height1 = obj1.height(),
		height2 = obj2.height(),
		maxheight = Math.max(height1, height2);
	
	obj1.height(maxheight);
	obj2.height(maxheight);
		
	if(height1 == maxheight){
		return true;
	}else{
		return false;
	}
}

// make Productimages  zoomable
function prepareProductImage(index, domEle){
	// store element for better performance
	var elem = $(domEle);

	if(index < 4){elem.show();}
	
	// thumbs:click - to change big img and trigger -imagezoom
	elem.click(function(){
		LAST_CLICKED = index;	
		removeExistingZoom();
		$("#photomedium").remove();
			
		// exchange product picture 
		var html = '';
		html += '<span id="photomedium" class="zoomed_img'+ index +'" >\n';
		html += '   <img onload="attachZoom('+index+')" src='+ imgs_300[index].url +' alt="">\n';
		html += '</span>\n';
		$("#zoomplace").append(html);
	});
}

// create Thumb-Slider from Thumb-List
function createSlider(tmbList, imageCache){
	if(tmbList.length > 4){	
		
		$("ul.thumbs").prepend("<li id='moveleft' class='off' style='display: list-item;'></li>");
		$("ul.thumbs").append("<li id='moveright' class='on' style='display: list-item;'></li>");

		tmbList = $(".thumbs li");
		
		$("#moveright").click(function(){
			var i = startThumb(tmbList);
			
			var thumbs = $(".thumbs li");
			// check for last element
			if (thumbs[i+4].id != "moveright"){
				thumbs.eq(i).hide();
				thumbs.eq(i+4).show();
			}
			changeNavItems(startThumb(tmbList), thumbs);
		});
		
		$("#moveleft").click(function(){
			var i = startThumb(tmbList);
			var thumbs = $(".thumbs li");
			// check for first element
			if (thumbs[i-1].id != "moveleft"){
				thumbs.eq(i+3).hide();
				thumbs.eq(i-1).show();
			}
			changeNavItems(startThumb(tmbList), thumbs);
		});
	}
	
	$("ul.thumbs").css({"border-bottom-color" : "#ccc"})
	
	// make tabs clickable & care for wright class assignment
	$("ul.tabs li").click(function(){
		hideMedia($(".tabs li.active")[0].id);
		
		$(".tabs li.active").removeClass("active");	
		$(this).addClass("active");
		
		// action depending on mediatype
		displayMedia($(".tabs li.active")[0].id);	
	});
	
	// preload big images - get url from thumbimg.name
	tmbList.each(function (index, domEle){
		var image = document.createElement('img');
		var eId = $(domEle)[0].id;
		if((eId != ("moveright")) && (eId != ("moveleft"))){
			var url = ($(domEle).children())[0].name;
			image.src = url;
			imageCache[url] = image; //additionally put imgs in own cache  - some browsers flush browser cache
		}
	});
}

// wait on document ready
$(document).ready(function(){
	var imageCache=[];
	var tmbList = $(".thumbs li");

	// set container height 
	if(!firstHeightMax($("div.c50r"),$("div.c50l"))){
		$("#customerbox").addClass("customerbox");
	}
	
	// attach Zoomability ON CLICK to every Thumbnail 
	if(tmbList.length > 1){
		tmbList.each(function(index, domEle){prepareProductImage(index, domEle);});
	}	
	
	// create slider and apply ZoomFkt to first Image
	createSlider(tmbList, imageCache);
	// attach Zoom Functionality for first image
	attachZoom(0);
});