/*
 * Page updates via ajax. 
 *
 * prototype.js library is necessary.
 */
/* Start: Product Detail Page */
function ajaxUpdateVariation(container,url){
	// new Ajax.Updater(container, url,{method:'post',onComplete:ajaxUpdateColors('colorView',url)});
	new Ajax.Request(url, {
		method: 'get',
		onSuccess: function (transport){
			insertVariation(container, transport); 
			ajaxUpdateColors('colorView',url);
			//webtrekk pixel integration start
			if(this.webtrekk){
				this.webtrekk.product = this.document.getElementById("wt_var_container_stylecolorcode").value;
				this.webtrekk.productParameter[6] = this.document.getElementById("wt_var_container_size").value;
				this.webtrekk.productParameter[7] = this.document.getElementById("wt_var_container_color").value;
				if(typeof(this.wt_sendinfo) != "undefined") this.wt_sendinfo();
			}
			//webtrekk pixel integration end
			if (IE6Hover) {
				IE6Hover.fixColorSwatches();
			}
		}});
}
function insertVariation(container, transport) {
	$(container).update(transport.responseText);
	SizeHandler.init();
}
function ajaxUpdateColors(container,url){
	urlColors = url+"&colorview=true";
	SizeHandler.init();
	new Ajax.Updater(container, urlColors,{method:'get',onComplete:ajaxUpdateButtonpanel('buttonpanel',url)});
}
function ajaxUpdateButtonpanel(container,url){
	urlWishlist = url+"&buttonpanel=true";
	new Ajax.Updater(container, urlWishlist,{method:'get',onComplete:ajaxUpdateLargeImage('centerCol',url)});
}
function ajaxUpdateLargeImage(container,url){
	urlLargeImage = url+"&largeimage=true";
	new Ajax.Updater(container, urlLargeImage,{method:'get',onComplete:ajaxUpdateAlternativeView('alternativeView',url)});
}
function ajaxUpdateAlternativeView(container,url){
	urlLargeImage = url+"&alternativeview=true";
	new Ajax.Updater(container, urlLargeImage,{method:'get',onComplete:ajaxUpdateVariationName($$('.productName')[0],url)});
}
function ajaxUpdateVariationName(container,url) {
	 urlgetName = url+"&getName=true";
	 new Ajax.Updater(container, urlgetName,{method:'get',onComplete:ajaxUpdateVariationDetailText($('details'),url)});
}
function ajaxUpdateVariationDetailText(container,url) {
	 urlgetName = url+"&getDetailText=true";
	 new Ajax.Updater(container, urlgetName,{method:'get'});
}


/* End: Product Detail Page */
/* Start: Product Detail Page -> Email Me */
function ajaxUpdateEmailmeVariation(container,url){
	new Ajax.Updater(container, url,{method:'get',onComplete:ajaxUpdateEmailmeProductDetails('emailmedetails',url)});
}
function ajaxUpdateEmailmeProductDetails(container,url){
	urlDetails = url+"&details=true";
	new Ajax.Updater(container, urlDetails,{method:'get'});
}
/* 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 = $('zoomButton');
		if (this.zoomButton) {
			this.zoomButton.onclick = this.zoomButtonClick.bind(this);
			// click on large image should do the same
			$('centerCol').onclick = this.zoomButtonClick.bind(this);
		}
	},
	
	selectImage: function(img) {
		this.images.each(function(el) {
			if (img.id == el.id) {
				this.selectedView = el.id;
				el.select('a').each(function(link) {
					link.addClassName('selected');
				});
				this.setZoomPicture(el.options);
			} else {
				el.select('a.selected').each(function(link) {
					link.removeClassName('selected');
				});
			}
		}.bind(this));
	},
	
	zoomButtonClick: function() {
		//omniture
		clickTracking.performZoom();
		
		iBox.addEventListener('rendered', this.onIBoxRendered.bind(this));
		iBox.showURL(this.zoomButton.rel + '?' + Object.toQueryString({pid: $F('pid'), altimage: $F('altimage')}));
		return false;
	},
	
	imageLinkClick: function() {
		var zoomImage = this.zoomImage;
		var zoomHandler = this.zoomHandler;
		
		zoomHandler.selectImage(zoomImage);
		
		return false;
	},
	
	onIBoxRendered: function() {
		iBox.removeEventListeners('rendered');
		this.images = $$('#zoom .prodImage');
		this.images.each(function(el) {
			var links = el.select('a');
			links.each(function(link) {
				link.zoomImage = el;
				link.zoomHandler = this;
				link.onclick = this.imageLinkClick;
				if (link.hasClassName('selected')) {
					this.selectedView = el.id;
				}
			}.bind(this));
			eval('el.options=' + $F(el.id + 'Image'));
		}.bind(this));

		this.zoomInButton = $('zoomInButton');
		this.zoomOutButton = $('zoomOutButton');

		this.imageServerURL = $F('zoomImageServerURL');

		this.selectImage($(this.selectedView));
		
	},
	
	setZoomPicture: function(options) {
		$('imageViewerContainer').childElements().each(function(el) {
			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.observe('click', experience.panorama.zoom.bindAsEventListener(p.getPanorama(), experience.panorama.ZOOM_IN));
		this.zoomOutButton.observe('click', experience.panorama.zoom.bindAsEventListener(p.getPanorama(), experience.panorama.ZOOM_OUT));
	}
}



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

	init: function() {
		$$('.sizebutton').each(function(el){
			el.observe('mouseover',$(this.sizeButtonsOver).bind(this));	
		}.bind(this));
		$$('.sizebutton').each(function(el){
			el.observe('mouseout',$(this.sizeButtonsOut).bind(this));
		}.bind(this));
		
	},
	sizeButtonsOver: function(ev) {
		$('selectedSize').hide();
		$('selectYourSize').show();
	},
	sizeButtonsOut: function(ev) {
		$('selectedSize').show();
		$('selectYourSize').hide();
	}
}
/* open Sizing Chart in a iBox */
function iBoxSizingChart(url, callback)
{
    iBox.showLoading();
    
	var ajaxData = {
		method: 'get', 
		onSuccess: function(transport) {
			iBox.show(transport.responseText);
			if(callback){
				callback();
			}
		}
	};	
	new Ajax.Request( url, ajaxData );
}

document.observe('dom:loaded', function() {
	ZoomHandler.init();
	SizeHandler.init();
});