var menu = {
	initialize: function() {
		$$('#menu img').set({
			tween: {
				duration: 150
			},
			events: {
				mouseenter: function() {
					this.tween('top', -5);
				},
				mouseleave: function() {
					this.tween('top', 0);
				}
			}
		});
	}
};


var columns = {
	equalize: function() {
		// Because of the extra divs we added to ie for the rounded corners we need to find the height of the div within the footer
		/*if (Browser.Engine.trident) {
			var col1 = $$('#footer-left .rc-middle')[0];
			var col2 = $$('#footer-right .rc-middle')[0];
		}
		else {*/
			var col1 = $('footer-left');
			var col2 = $('footer-right');
		//}
		
		// Check to make sure we have some values for col1 and col2 before fixing the height
		if ($defined(col1) && $defined(col2)) {
			var col1Height = col1.getStyle('height').toInt();
			var col2Height = col2.getStyle('height').toInt();

			if (col1Height < col2Height)
				col1.setStyle('height', col1Height + (col2Height - col1Height));
			else if (col1Height > col2Height)
				col2.setStyle('height', col2Height + (col1Height - col2Height));
		}
	}
};


var swatches = {
	
	add: function(){
		var form = $('productForm');
		var selectName = form.getElement('input[value=color]').get('name').split(':')[0];
		var colorSelect = form.getElement('select[name^=' + selectName + ']');
		var colors = colorSelect.getElements('option');
		
		var div = new Element('div', {
			id: 'swatches-container',
			html: '<strong>Available Colors:</strong>'
		}).inject('product-description', 'after');
		
		var ul = new Element('ul', {
			id: 'swatches'
		}).inject(div);
		
		colors.forEach(function(color){
			var colorID = color.get('value');
			
			var li = new Element('li', {
				id: colorID,
				html: color.get('html')
			}).inject(ul);
			
			new Element('span', {
				events: {
					click: swatches.productChange.pass(colorID)
				}
			}).inject(li, 'top');
		});
		
		// add the image loading spinner to the top area
		
		var coordinates = $$('.prodimage')[0].getCoordinates();
		
		new Element('div', {
			id: 'loader',
			styles: {
				position: 'absolute',
				top: coordinates.top,
				left: coordinates.left,
				'z-index': 5,
				width: coordinates.width,
				height: coordinates.height,
				opacity: 0
			}
		}).inject(document.body);
		
		new Element('div', {
			id: 'noimg',
			styles: {
				position: 'absolute',
				top: coordinates.top,
				left: coordinates.left,
				'z-index': 5
			}
		}).inject(document.body);
	},
	
	productChange: function(colorID){		
		var loader = $('loader');
		loader.setStyle('opacity', 0.5);
		
		var prodImg = $$('.prodimage')[0];
		
		var noimg = $('noimg');
		noimg.set('html', '');
		
		var srcName = prodImg.get('src').split('+')[0];
		var src = srcName + '+' + colorID + '.jpg';
		
		var newImg = new Image(); 
		newImg.src = src;
		
		newImg.onload = function(){
			loader.setStyle('opacity', 0);
			prodImg.set('src', src);
			
			var form = $('productForm');
			var selectName = form.getElement('input[value=color]').get('name').split(':')[0];
			var colorSelect = form.getElement('select[name^=' + selectName + ']');
			
			colorSelect.getElement('option[value=' + colorID + ']').set('selected', 'selected');
		};
		
		newImg.onerror = function(){
			loader.setStyle('opacity', 0);
			noimg.set('html', 'No product image available for ' + colorID.replace(/-/g, ' '));
			$(colorID).getElement('span').setStyle('cursor', 'default');
		}
		
		/*
		new Asset.image(src, {
			onload: function(){
				prodImg.setStyle('opacity', 1);
				prodImg.set('src', src);
				
				var form = $('productForm');
				var selectName = form.getElement('input[value=color]').get('name').split(':')[0];
				var colorSelect = form.getElement('select[name^=' + selectName + ']');
				
				colorSelect.getElement('option[value=' + colorID + ']').set('selected', 'selected');
			},
			onerror: function(){
				prodImg.setStyle('opacity', 1);
				
				console.log('failed to load img ' + src);
			}
		});
		*/
	}
	
};


var site = {
	initialize: function() {
		if (!Browser.Engine.webkit && !Browser.Engine.trident)
			columns.equalize();
		
		// Squeeze Box for the store
		var prodImg = $$('.prodimage')[0];
		
		if (prodImg) {
			var newSrc = prodImg.get('src').split('+')[0] + '-Zoom.jpg';
			
			SqueezeBox.initialize({
				size: {x: 200, y: 200},
				url: newSrc
			});
	
			SqueezeBox.assign(prodImg);
		}
	},
	
	start: function() {
		menu.initialize();
		
		// Add swatches
		var prodImg = $$('.prodimage')[0];
		if (prodImg)
			swatches.add();
		
		// Webkit can't get the height correctly until the page fully loads and ie doesn't do the height right on visiting a new page. Stupid.
		if (Browser.Engine.webkit || Browser.Engine.trident)
			columns.equalize();
	}
};


window.addEvent('domready', site.initialize);
window.addEvent('load', site.start);