// JavaScript Document

var products = {
	fixImagePos: function() {
		
		if (!$('productimage').offsetWidth) {
			Event.observe(window, 'load', function() { products.fixImagePos() });
		} else {
			var imagewidth = $('productimage').offsetWidth;
			var imageheight = $('productimage').offsetHeight;
			
			if (imageheight < 443) {
				var bottom = ((443-imageheight)/2);
				if (bottom > 23) {
					bottom = 23;
				}
			} else {
				bottom = 23;
			}
			
			$('productimage').setStyle({ left: ((462-imagewidth)/2)+'px', bottom: bottom+'px' });
			return;
		}
	},
	/***
	** Functions related to sizes
	***/
	sizesShown: false,
	showSizes: function() {
		if (this.sizesShown == false) {
			new Effect.SlideDown('productsizescontainer', { duration: 0.5 });
			$('btn-product_chooseyoursize').addClassName('on');
			this.sizesShown = true;
		} else {
			new Effect.SlideUp('productsizescontainer', { duration: 0.5 });
			$('btn-product_chooseyoursize').removeClassName('on');
			
			if (this.storesShown == true) {
				new Effect.SlideUp('productsstores', { duration: 0.5 });
				this.storesShown = false;
			}
			if (this.currentSize.length > 0)
				$('sizecheck_'+this.currentSize).removeClassName('on');

			this.currentSize = '';
			this.sizesShown = false;
		}
		return false;
	},
	currentSize: '',
	storesShown: false,
	changeSizeWrapper: function(e) {
		this.changeSize($A(arguments)[1]);
	},
	changeSize: function(size) {
		if (this.currentSize.length > 0) {
			if (size == this.currentSize) return;
			$('sizecheck_'+this.currentSize).removeClassName('on');
			if (this.storesShown == true) {
				this.storesShown = false;
				$('productsstores').hide();
				this.currentSize = size;

				//new Effect.SlideUp('productsstores', { duration: 0.5 });
				products.getStores();
			}
			this.currentSize = size;
		} else {
			$('btn-product_buynow').show();
			this.currentSize = size;
		}
		$('sizecheck_'+size).addClassName('on');
		this.sizesShown = true;
		return false;
	},
	setupSizes: function() {
		$('productsizes').update('');
		var n=this.productColors[this.currentColor].sizes.length;
		
		var li;
		var a;
		var size;
		for(var i=0; i<n; i++) {
			size = this.productColors[this.currentColor].sizes[i];
			li = new Element('li');
			a = new Element('a', { href: 'javascript:void(0)', id: 'sizecheck_'+size.sku }).update(size.name); //, onclick: 'return products.changeSize('+this.sku+');'
			li.update(a);
			$('productsizes').insert(li);
			this.tmp = size.sku;
			Event.observe(a, 'click', this.changeSizeWrapper.bindAsEventListener(this, this.tmp));
		}
		return true;
	},
	/***
	** Functions related to stores
	***/
	getStores: function() {
		
		this.showStoresLoading();
		
		
		new Ajax.Request(BASE_HREF+'_ajax/onlinestores.php', {
			method:'post',
			parameters:'sku='+products.currentSize,
			onSuccess: function(transport){
				var json = transport.responseText.evalJSON();
				$('productsstores').update(json.html);
				products.hideStoresLoading();
				//$('productsstores').show();
				products.showStores();
				$('btn-product_buynow').hide();
			 }
		});
	},
	showStores: function() {
		new Effect.SlideDown('productsstores', { duration: 0.5 });
		this.storesShown = true;
	},
	showStoresLoading: function() {
		$('productsstoresloading').show();
		this.loadingShown = true;
	},
	hideStoresLoading: function() {
		$('productsstoresloading').hide();
		this.loadingShown = false;
	},
	/***
	** Functions related to colors
	***/
	productColors: new Array(),
	changeColor: function(color) {
		var oldcolor = this.currentColor;
		this.currentColor = color;

		var originalshown = this.sizesShown;

		if (this.sizesShown == true) {
			$('productsizescontainer').hide();
			$('productsstores').hide();
			this.sizesShown = false;
			this.storesShown = false;
			this.currentSize = '';
			$('btn-product_buynow').hide();
		}
		
		if (this.setupSizes() == true) {
			if (originalshown == true)
				this.showSizes();
	
			$('productimage').writeAttribute('src', this.productColors[this.currentColor].image);
			$('color_'+oldcolor).removeClassName('current');
			$('color_'+color).addClassName('current');
		}
		return false;
	},
	
	enlargeImage: function() {
		
		this.enlargeimagediv = new Element('div', { id: 'productoverlayimage', align: 'center' }).update(new Element('div', { align: 'center' }).update(new Element('img', { src: BASE_HREF+'_images/layout/loader-product.gif', align: 'center' })));
		$('wrapper').insert({ top: new Element('div', { id: 'productoverlay' }) });
		$('wrapper').insert({ top: this.enlargeimagediv });
		//$('wrapper').insert({ top: new Element('div', { id: 'productoverlaycover' }) });
		
		this.enlargeImageShown = true;
		
		var bodytag = $$('body')[0];
		
		this.imageloaderdiv = new Element('div').setStyle({ height: '0px', position: 'absolute', overflow: 'hidden' });
		
		//this.enlargedImage = new Element('img', { src: this.productColors[this.currentColor].zoom });
		
		var newImage = new Image();
		newImage.onload = this.checkImageLoaded;
		newImage.src = this.productColors[this.currentColor].zoom;
		this.enlargedImage = newImage; // Keep the reference!
			
		//$(this.imageloaderdiv).update(this.enlargedImage);
		
		//bodytag.insert({ bottom: this.imageloaderdiv });
		
		//this.imageloadpe = new PeriodicalExecuter(this.checkImageLoaded, 0.5);
				
	},
	
	checkImageLoaded: function() {
				
		if (products.enlargedImage.naturalWidth > 0) {
			products.enlargeimagediv.update(new Element('a', { href: 'javascript:void(0)' }).observe('click', products.hideEnlargeImage).update(products.enlargedImage));
			products.enlargeclosebutton = new Element('a', { href: 'javascript:void(0)' }).observe('click', products.hideEnlargeImage).update('<img src="_images/layout/btn-lightbox_close.gif" />').setStyle({ position: 'absolute', top: '5px', right: '10px', zIndex: '9999' });
			$('wrapper').insert({ top: products.enlargeclosebutton });			
			//products.imageloadpe.stop();
		} 
	},
	
	hideEnlargeImage: function() {
		
		products.enlargeimagediv.remove();
		$('productoverlay').remove();
		products.enlargeclosebutton.remove();
		delete products.enlargeclosebutton;
		delete products.enlargeimagediv;
		//$('productoverlaycover').remove();
		
	},
	
	/****
	** Functions for the pagination
	****/
	fixPaginationImagePos: function() {
		$('productspagination').select('img').each(function(el, i) {
			if (!$(el).offsetWidth) {
				Event.observe(window, 'load', function() { products.fixPaginationImagePos() });
				return;
			}
			
			var change = ((91-$(el).offsetWidth)/2);
			
			if ($(el).hasClassName('previous')) {
				$(el).setStyle({ right: change+'px' });
			} else {
				$(el).setStyle({ left: change+'px' });
			}
		});
		return;
	}

}