/*
 * Page updates via ajax. 
 *
 * prototype.js library is necessary.
 */

/* Waiting a timeout. The cursor must over the image a special time. */
var updateContainer = '';	// Saves the parameter, beacuse the setTimeout-function can't using parameters.
var updateUrl = '';			// Saves the parameter, beacuse the setTimeout-function can't using parameters.
var updateElem = '';		// Saves the parameter, beacuse the setTimeout-function can't using parameters.
var timeoutCounter = '';	// The timeout variable, needed to stop the timeout function.
var TIMEOUT_COUNT = 300; 	// The time for waiting.
var over = false;
var tmpImage = "";
var documentLoaded = false;

function ajaxUpdateColorVariation(container,url){
	if (documentLoaded) {		
		updateContainer = container;
		updateUrl = url;
		timeoutCounter = window.setTimeout(globalUpdateVariation, TIMEOUT_COUNT);
	}
}

// Stops the timeout function.
function stopUpdateColorVariation() {
	window.clearTimeout(timeoutCounter);
}

// Uses the global parameters.
function globalUpdateVariation() {
	ajaxUpdateVariation(updateContainer, updateUrl);
}

// No loading, if the new variation is the current variation.
var changeVariationUrl = "";

/* Start: Product Detail Page */
function ajaxUpdateVariation(container,url){
	
	if (changeVariationUrl != url && documentLoaded) {
		
		var self = this;
		
        jQuery.ajax({
        	type: "GET",
        	url: url,
        	dataType: 'text',
        	success: function (response) {
        		
				var contentParts = response.split("%%%%SPLITHERE%%%%");
				
				var product = jQuery.parseJSON(contentParts[0]);
				
				var priceTemplate = contentParts[1];
				var availabilityTemplate = contentParts[2];
				var quantityTemplate = contentParts[3];
				var colorviewTemplate = contentParts[4];
	
				// Render large image
				jQuery('#productLargeImage').attr('src', product.imgUrl);

				// Render badges
				var badgeImages = jQuery('#centerCol .badges img');
				badgeImages.remove();
				
				for (var i=0; i<product.badges.length; i++) {
					var img = jQuery(new Image());
					img.attr('alt', product.badges[i].title);
					img.attr('title', product.badges[i].title);
					img.attr('src', product.badges[i].url);
					jQuery('#centerCol .badges').append(img);
				}
				
				//Render alternative View		
				var altView = jQuery('#alternativeView');
				var first = true;
				altView.html('<div class="clear"><!-- W3C float clearing recommendation --></div>')
				jQuery.each(product.altImages.images, function(i, img) {
					if (!jQuery.isEmptyObject(img)) {
						altView.append('<a class="xSmallImage altImage" href="#" title="" onmouseout="stopUpdateAlternativeImage();" onmouseover="' + img.onmouseover + '"> ' +  
								(first ? '<img class="overlay" alt="" title="" src="' + product.altImages.overlayUrl + '"/>' : '') +
								'<img class="hoveroverlay51" alt="" title="" src="' + product.altImages.hoverlayUrl + '"/> ' +
								'<img class="alternativeImage" onload="imgLoaded(this)" alt="" title="" src="' + img.url + '"/></a>');
						first = false;
					}
				});
				altView.append('<div class="clear"><!-- W3C float clearing recommendation --></div>')
				
				
				//Render Product Attributes
				
				jQuery('.productName h1').html(product.name);
				
				jQuery('#confStatus .articleno .value').html(product.styleCode + '-' + product.colorCode);
				jQuery('#confStatus .color .value').html(product.color + "&nbsp;");
				jQuery('#wt_var_container_color').val(product.color);
				jQuery('#wt_var_container_stylecolorcode').val(product.styleCode + product.colorCode);
				if(product.selectedSize!='') {
					jQuery('#selsize').html(product.selectedSize + '<input type="hidden" name="wt_var_container_size" id="wt_var_container_size" value="' + product.selectedSize + '" />')
				} else if(product.size!='') {
						jQuery('#selsize').html(product.size)
				}
				jQuery('#selectedSize').show();
				jQuery('#selectYourSize').hide();
				
				
				//Render add to cart pid
				
				jQuery('#pid').val(product.pid);
				
				
				//Render button Panael
				
				if (product.wishlistLink!='') {
					jQuery('#buttonpanel .wishlist').attr('href', product.wishlistLink);
				}
				if (product.emailOnClick!='') {
					jQuery('#buttonpanel .email').attr('onclick', '').click( new Function(product.emailOnClick) );
				}
				if (product.friendOnClick!='') {
					jQuery('#buttonpanel .friend').attr('onclick', '').click( new Function(product.friendOnClick) );
				}
				
				
				//Render Details

				jQuery('#details').html(product.details.desc + '<div class="icons"></div>')
				
				var detailsIcons = jQuery('#details .icons');
				
				detailsIcons.html('<img src=' + product.details.pvcUrl + '/>')
				var counter = 1;
				
				jQuery.each(product.details.techIdsUrl, function(i, url) {	
					if (counter % 4 != 0) {
						detailsIcons.append('<span class="divider"><!-- empty --></span>');
					}
					detailsIcons.append('<span class="icon"><a href="#" onclick="' + product.details.matOnClick + '"/><img src=' + url + ' alt="" /></span>');
					++counter;
				});
				
				jQuery.each(product.details.uspIdsUrl, function(i, url) {	
					if (counter % 4 != 0) {
						detailsIcons.append('<span class="divider"><!-- empty --></span>');
					}
					detailsIcons.append('<span class="icon"><a href="#" onclick="' + product.details.matOnClick + '"/><img src=' + url + ' alt="" /></span>');
					++counter;
				});
				
				
				//Update Templates
				
				jQuery('#addtocart #pricecontainer').html(priceTemplate)
				
				jQuery('#confStatus #stockcontainer').html(availabilityTemplate);
				
				jQuery('#variation').html(quantityTemplate);
				
				jQuery('#colorView').html(colorviewTemplate);
				
				//Render Color View
				
				/*$$('#colorView .imagebox a').each(function(colorview) {
					  colorview.select('.overlay').invoke('remove')
					  if (colorview.title == product.color) {
						  colorview.insert({top: '<img class="overlay" src=' + product.overlayUrl + '/>'});
					  }
				});*/
				
				
				SizeHandler.init();		
				
				//webtrekk pixel integration start
				if(self.webtrekk){
					self.webtrekk.product = self.document.getElementById("wt_var_container_stylecolorcode").value;
					self.webtrekk.productParameter[6] = self.document.getElementById("wt_var_container_size").value;
					self.webtrekk.productParameter[7] = self.document.getElementById("wt_var_container_color").value;
					if(typeof(self.wt_sendinfo) != "undefined") self.wt_sendinfo();
				}
				//webtrekk pixel integration end
				
				if (typeof IE6Hover != 'undefined') {
					IE6Hover.fixColorSwatches();
				}
			}
		});
		changeVariationUrl = url;
	}
}

function updateAlternativeImage(el, container,url) {
	if (documentLoaded) {
		updateElem = jQuery(el);
		updateContainer = container;
		updateUrl = url;
		timeoutCounter = window.setTimeout(globalUpdateAlternativeImage, TIMEOUT_COUNT);
	}
}

// Uses the global parameters.
function globalUpdateAlternativeImage() {
	ajaxUpdateAlternativeImage(updateElem, updateContainer, updateUrl);
}

// Stops the timeout function.
function stopUpdateAlternativeImage() {
	window.clearTimeout(timeoutCounter);
}

function ajaxUpdateAlternativeImage(el, container,url) {
	if (changeVariationUrl != url && documentLoaded) {
		ajaxUpdateLargeImage(container,url)
		el.prepend(jQuery('#alternativeView .overlay'))
		changeVariationUrl = url;
	}
}
function ajaxUpdateLargeImage(container,url){
	urlLargeImage = url+"&largeimage=true";
	jQuery('#' + container).load(urlLargeImage);
}


/* End: Product Detail Page */
/* Start: Product Detail Page -> Email Me */
function ajaxUpdateEmailmeVariation(container,url){
	jQuery('#' + container).load(url, function(response, status, xhr) {
		if (status != "error") {
			ajaxUpdateEmailmeProductDetails('emailmedetails',url)
		}
	});
}
function ajaxUpdateEmailmeProductDetails(container,url){
	urlDetails = url+"&details=true";
	jQuery('#' + container).load(urlDetails);
}
/* End: Product Detail Page -> Email Me */

/* PISA Zoom */
var ZoomHandler = {

	zoomButton: null,
	images: null,
	selectedView: null,
	pisaClient: null,
	zoomInButton: null,
	zoomOutButton: null,
	imageServerURL: null,

	init: function() {
		this.zoomButton = jQuery('#zoomButton');

		if (this.zoomButton) {
			this.zoomButton.bind('click', function(ev) { 
				ZoomHandler.zoomButtonClick(ev);
			});
			// click on large image should do the same
			jQuery('#centerCol').bind('click', function(ev) { 
				ZoomHandler.zoomButtonClick(ev);
			});
		}
	},
	
	selectImage: function(img) {
		img = jQuery(img);
		this.images.each(function(i, el) {
			el = jQuery(el);
			if (img.attr('id') == el.attr('id')) {
				ZoomHandler.selectedView = el.attr('id');
				jQuery('a', el).each(function(i, link) {
					jQuery(link).addClass('selected');
				});
				ZoomHandler.setZoomPicture(el.data('options'));
			} else {
				jQuery('a.selected', el).each(function(i, link) {
					jQuery(link).removeClass('selected');
				});
			}
		});
	},
	
	zoomButtonClick: function() {
		//omniture
		clickTracking.performZoom();
		
		iBox.addEventListener('rendered', function() {ZoomHandler.onIBoxRendered()});
		iBox.showURL(ZoomHandler.zoomButton.attr('rel') + '?' + jQuery.param({pid: jQuery('#pid').val(), altimage: jQuery('#altimage').val()}));
		return false;
	},
	
	imageLinkClick: function(el) {
		el = jQuery(el);
		el.data('zoomHandler').selectImage(el.data('zoomImage'));
		
		return false;
	},
	
	onIBoxRendered: function() {
		iBox.removeEventListeners('rendered');
		this.images = jQuery('#zoom .prodImage');
		this.images.each(function(i, el) {
			el = jQuery(el);
			var links = jQuery('a', el);
			links.each(function(i, link) {
				link = jQuery(link);
				link.data('zoomImage', el);
				link.data('zoomHandler', ZoomHandler);
				link.click(function() {
					ZoomHandler.imageLinkClick(this);
				});
				if (link.hasClass('selected')) {
					ZoomHandler.selectedView = el.attr('id');
				}
			});
			var optStr = jQuery('#' + el.attr('id') + 'Image').val();
			eval('optMap=' + optStr);
			el.data('options', optMap);
		});

		this.zoomInButton = jQuery('#zoomInButton');
		this.zoomOutButton = jQuery('#zoomOutButton');

		this.imageServerURL = jQuery('#zoomImageServerURL').val();
		
		this.selectImage(jQuery('#' + this.selectedView));
		
	},
	
	setZoomPicture: function(options) {	
		jQuery('imageViewerContainer').children().each(function(i, el) {
			jQuery(el).remove();
		});
		this.pisaClient = new PISAClient("imageViewerContainer");
		this.pisaClient.setHost(this.imageServerURL);
		var p = this.pisaClient;
		if (options.fn != null) {
			p.setFilename(options.fn);
		} else {
			p.setStyle(options.style);
			p.setColor(options.color);
		}
		p.setBackground("256,256,256");
		p.setSize(500,393);		//With the 550 this seems to be the convenient size, specially with the changes on the position of the buttons.
		p.setCanvasSize(594,393);  	//Some browsers can't supply the canvas size efficiently so we need to hardcode this.
		//p.setIcons("img");
		p.render();
        this.zoomInButton.click( function() { experience.panorama.zoom('', experience.panorama.ZOOM_IN, p.getPanorama()) });
        this.zoomOutButton.click( function() { experience.panorama.zoom('' , experience.panorama.ZOOM_OUT, p.getPanorama()) });
		
	}
}



/* show select your size on mouse over */
var SizeHandler = {

	init: function() {
		jQuery('.sizebutton').each(function(i, el){ 
			jQuery(el).bind('mouseover', function(ev) { 
				SizeHandler.sizeButtonsOver(ev);
			});
			jQuery(el).bind('mouseout', function(ev) { 
				SizeHandler.sizeButtonsOut(ev);
			});
		});
		
	},
	sizeButtonsOver: function(ev) {
		jQuery('#selectedSize').hide();
		jQuery('#selectYourSize').show();
	},
	sizeButtonsOut: function(ev) {
		jQuery('#selectedSize').show();
		jQuery('#selectYourSize').hide();
	}
}
/* open Sizing Chart in a iBox */
function iBoxSizingChart(url, callback)
{
    iBox.showLoading();
    	
    jQuery.ajax({ 
    	type: "GET", url: url, success: function(resp) {
    		iBox.show(resp);
    		if(callback){
				callback();
			}
    	}
    });
}


/*
 * 
 * Quantity Box
 * 
 */
function SelectOut(el){
    if (el.getElementsByTagName('div')[0].style.display!="block") {
        jQuery(el).removeClass('quantityHover');
        jQuery(el).removeClass('quantitySelect');
    }
    over=false;
}
function SelectOver(el){
    if (el.getElementsByTagName('div')[0].style.display!="block") {
        jQuery(el).removeClass('quantitySelect');
        jQuery(el).addClass('quantityHover');
    }
    over=true;
}
function OptionClick(el,box){
    jQuery(el.parentNode.parentNode).removeClass('quantitySelect');
    jQuery(el.parentNode.parentNode).removeClass('quantityHover');
    el.parentNode.alt = "active";
    el.parentNode.style.display = "none";
    el.parentNode.parentNode.getElementsByTagName('div')[1].innerHTML = el.innerHTML;
    document.getElementById(box).selectedIndex = el.innerHTML-1;
}
function OptionOver(el){
    over=true;
}
function OptionOut(el){
    over=false;
}                                            
function SelectClick(el,box){
    var content = "";
    for(i=0;i<document.getElementById(box).length;i++){
        content += "<span onclick=\"OptionClick(this,'"+box+"')\" onmouseover='OptionOver(this)' onmouseout='OptionOut(this)' class=\"Qoption\">"+document.getElementById(box).options[i].value+"</span>"; 
    }
    el.getElementsByTagName('div')[0].innerHTML = content;
    if (el.getElementsByTagName('div')[0].style.display=="block") {
        el.getElementsByTagName('div')[0].style.display = "none";
        jQuery(el).removeClass('quantityHover');
        jQuery(el).removeClass('quantitySelect');
    }
    else if (el.getElementsByTagName('div')[0].alt!="active") {
        el.getElementsByTagName('div')[0].style.display = "block";
        jQuery(el).removeClass('quantityHover');
        jQuery(el).addClass('quantitySelect');
    }
    el.getElementsByTagName('div')[0].alt = "";
}        


/*
 * 
 * Color Preview
 * 
 */
function showPreview(image,page,imageURL){
    tmpImage = image.src;
	if(page == 'productdetail'){
		image.src = imageURL;
	}
	else{
		image.src = "images/hover_colorpicker.gif";
	}
    document.getElementById('colorpicker').style.left = image.offsetLeft-42+"px";
    document.getElementById('colorpicker').style.top = image.offsetTop-127+"px";
    document.getElementById('colpic').src = image.alt;
    document.getElementById('colorpicker').style.display = "block";
    document.getElementById('collabel').innerHTML = image.title;
}
function hidePreview(image){
    image.src = tmpImage;
    document.getElementById('colorpicker').style.display = "none";    
}


jQuery(document).ready(function(){
	documentLoaded = true;
	ZoomHandler.init();
	SizeHandler.init();
	if (typeof recommendationUrl != 'undefined') {
		jQuery("#related").load(recommendationUrl);
	}
});

jQuery(document).click(function() {
	if (!over &&  document.getElementById('QuantityHidden')!=null) {
		jQuery('#QuantityHidden').removeClass('quantityHover');
		jQuery('#QuantityHidden').removeClass('quantitySelect');
		document.getElementById('QuantityHidden').getElementsByTagName('div')[0].style.display = "none";    
	}
});