// JavaScript Document

/*******************************
*
* SwatchUtils.js
* SwatchUtils Class
* 
* Utilizes prototype.js 1.5.1 library - /js/extern/prototype.js
* Swatch PNG Utilities - precaches pngs, small swatch png rollovers, shows, hides and positions big swatch
* 
* 
* Ver = 1.0
*
* Author: John Hutcheson, control option
*
*******************************/


// Create SwatchUtils class using prototype.js 
var SwatchUtils = Class.create();

// Add new methods to the SwatchUtils class' prototype
SwatchUtils.prototype = {
	
	// protype.js initialize - Constructor method
	// arg: offIndicator - optional. If supplied use instead of _off as the off state indicator in image src.
	// arg: overIndicator - optional. If supplied use instead of _over as the over state indicator in image src.
	// imagesOff - Object - hash of image id and image src for the off state
	// imagesOver - Object - hash of image id and image src for the over state
	initialize: function(bigSwatchDiv, select_menu, small_swatches, firstSwatch) { 
		if (document.images) {
			this.smallSwatches = $A(small_swatches); 
			this.bigSwatch = $(bigSwatchDiv);
			this.selectMenu = $(select_menu);
			this.isIE6 = (this.bigSwatch.checkBrowser().isIE && !this.bigSwatch.checkBrowser().isIE7);
			
			
			this.lastOn = $(firstSwatch);
			firstSwatch.addClassName('swatch_border');
			
			this.setHandlers();
		}
	},
	
	setHandlers: function () {
		this.boundClick = this.onClick.bindAsEventListener(this);
		this.boundOver = this.over.bindAsEventListener(this);
		this.boundOut = this.out.bindAsEventListener(this);
		this.boundSelectChange = this.onSelectChange.bindAsEventListener(this);
		
		Event.observe (document, 'click', this.boundClick);
		Event.observe (document, 'mouseover', this.boundOver);
		Event.observe (document, 'mouseout', this.boundOut);
		Event.observe (this.selectMenu, 'change', this.boundSelectChange);
		
	},
	
	
	onClick: function(e) {
		var elt = $(Event.element(e));
		if (elt.hasClassName("spp_swatch_small")) {
			var shadeName = elt.down('div.spp_swatch_small_name').innerHTML;
			var hexValue = elt.getStyle('backgroundColor');
			var sMenu = this.selectMenu;
			$A(sMenu.options).each(function (option, i) {
				if (option.text == shadeName)
				{
					sMenu.selectedIndex = i;
					throw $break;
				}
			});
			
			this.lastOn = elt;
			
			this.setBigSwatch(shadeName, hexValue);
			
			var val = sMenu.options[sMenu.selectedIndex].value;
			var valArray = val.split('||');
			var qtyName = valArray[0];
			this.setQtyName(qtyName);
		}
	},
	
	// Mouseover - set to over state and/or show big swatch
	over: function(e) {
		Event.stop(e);
		var elt = $(Event.element(e));
		
		if (elt.hasClassName("spp_swatch_small")) {
			this.smallSwatches.each(function (swatch) {
				swatch.removeClassName('swatch_border');
			});
			
			elt.addClassName('swatch_border');
			
			var shadeName = elt.down('div.spp_swatch_small_name').innerHTML;
			var hexValue = elt.getStyle('backgroundColor');
			this.setBigSwatch(shadeName, hexValue);
		}
	},
	// Image Swap - set to off state
	out: function(e) {
		Event.stop(e);
		var elt = $(Event.element(e));
		
		if (elt.hasClassName("spp_swatch_small")) {
			this.smallSwatches.each(function (swatch) {
				swatch.removeClassName('swatch_border');
			});
			
			this.lastOn.addClassName('swatch_border');
			var shadeName = this.lastOn.down('div.spp_swatch_small_name').innerHTML;
			var hexValue = this.lastOn.getStyle('backgroundColor');
			this.setBigSwatch(shadeName, hexValue);
		}
	},
	
	onSelectChange: function (e) {
		var element = $(Event.element(e));
		if (element.tagName == "SELECT" && element.id == "swatch_select") {
			var val = element.options[element.selectedIndex].value;
			var valArray = val.split('||');
			var shadeName = valArray[2];
			var hexValue = '#' + valArray[1];
			var qtyName = valArray[0];
			this.setSmallSwatches(shadeName, hexValue);
			this.setBigSwatch(shadeName, hexValue);
			this.setQtyName(qtyName);
		}
	},
	
	setSmallSwatches: function (shade_name, hex_value) {
		var smlSwatch;
		this.smallSwatches.each(function (swatch) {
			if (shade_name == swatch.down('div.spp_swatch_small_name').innerHTML) {
				smlSwatch = swatch;
			}
			
			swatch.removeClassName('swatch_border');
		});
		
		smlSwatch.addClassName('swatch_border');
		this.lastOn = smlSwatch;
	},
	
	setBigSwatch: function (shadeName, hexValue) {
		this.bigSwatch.setStyle({backgroundColor : hexValue});
		this.bigSwatch.down('div.spp_swatch_big_name').update("<br>" + shadeName);
	},
	
	setQtyName: function (name) {
		var qtyInput = $(this.selectMenu.up().next('input.qty'));
		qtyInput.name = name;
	}
};