var StoToolbox = Class.create({
	initialize: function() {
		this.selectedColour = "";
		this.selectedTexture = "";
		this.url = new Object();
	},
	start: function() {
		// Reference to the object
		var thisObj = this;
		
		// Set flash wheel
		var myMovie = this.getFlashObject('flashColourWheel');
		//myMovie.initialize(); // Breaks Safari
		
		// Obsesrve colour finder form
		$('colourCodeFinder').observe('submit', function(e){
			e.stop();
			if($('colourCodeInput').value == "") {
				alert('Please input colour code');
			} else {
				new Ajax.Request(this.url.colourValidation, {
					method: 'post',
					parameters: $('colourCodeFinder').serialize(),
					onCreate: function() {
						$('loading').show();
					},
					onComplete: function(transport) {
						$('loading').hide();
						if(transport.responseText == "available") {
							thisObj.loadColour($('colourCodeInput').value);
						} else if(transport.responseText == "not_available") {
							alert('Colour is not available for this product');
							//$('colourCodeInput').value = "";
						} else {
							alert('Colour code is not valid');
							$('colourCodeInput').value = "";
						}
					}
				});
			}
		}.bind(this));
		
		// Observe texture items
		$$('#textures .texture').invoke('observe', 'click', function(e){
			var clicked = e.element();
			var container = $(clicked).up('.texture');
			var dataObject = container.getElementsBySelector('a')[0];
			var params = thisObj._readParameter(dataObject.rel);
			thisObj.setTexture(params.texture);
		});
		
		this.setScrapbookItems();
		
		$('sampleColourClear').observe('click', function() {
			this.clearColour();
			$('sampleActions').hide();
		}.bind(this));
		
		$('sampleTextureClear').observe('click', function() {
			this.clearTexture();
		}.bind(this));
		
		$('addToScrapbook').observe('click', function() {
			this.addToScrapbook();
		}.bind(this));
		
		if($('viewProducts')) {
			$('viewProducts').observe('click', function() {
				window.location = this.url.viewProducts+'?colour='+this.selectedColour+'&texture='+this.selectedTexture;
			}.bind(this));
		}
		
		if($('selectColour')) {
			$('selectColour').observe('click', function(e) {
				var params = thisObj._readParameter($('selectColour').rel);
				this.selectColour(params.unit_id);
			}.bind(this));
		}
	},
	setScrapbookItems: function() {
		var thisObj = this;
		// Observe scrapbook items
		if($$('#scrapbook .item').length > 0) {
			$$('#scrapbook .item').each(function(item) {
				item.observe('mouseover', function() {
					this.getElementsBySelector('a.delete')[0].show();
				});
				
				item.observe('mouseout', function() {
					this.getElementsBySelector('a.delete')[0].hide();
				});
				
				var imageButton = item.getElementsBySelector('a.images')[0];
				imageButton.observe('click', function(e) {
					var clicked = e.element();
					var container = $(clicked).up('.content');
					var dataObject = container.getElementsBySelector('a.images')[0];
					var params = thisObj._readParameter(dataObject.rel);
					thisObj.loadSelection(params.colour, params.texture);
				});
				
				var deleteButton = item.getElementsBySelector('a.delete')[0];
				deleteButton.observe('click', function(e) {
					var clicked = e.element();
					var container = $(clicked).up('.content');
					var dataObject = container.getElementsBySelector('a.delete')[0];
					var params = thisObj._readParameter(dataObject.rel);
					thisObj.removeScrapbook(params.id);
				});
			});
		}
	},
	noCache: function(uri) {
		return uri.concat(/\?/.test(uri)?"&":"?","noCache=",(new Date).getTime(),".",Math.random()*1234567);
	},
	_readParameter: function(data) {
		var object = new Object();
		var params = data.split(',');
		for (var i = 0; i < params.length; i++) {
			current = params[i].split(':');
			var key = current[0];
			var value = current[1];
			object[key] = value;
		}
		return object;
	},
	getFlashObject: function(movieName) {
		if (window.document[movieName]) {
			return window.document[movieName];
		}
		if (navigator.appName.indexOf("Microsoft Internet")==-1) {
			if (document.embeds && document.embeds[movieName])
		  		return document.embeds[movieName]; 
		} else {
			return document.getElementById(movieName);
		}
	},
	setRange: function(number, defaultSelect) {
		// Ajax call to update range colours
		var thisObj = this; 
		new Ajax.Updater('rangeColours', thisObj.noCache(thisObj.url.range+number), {
			method: "get",
			onCreate: function() {
				$('rangeColours').hide();
				$('rangeColourLoading').show();
			},
			onComplete: function() {
				$('rangeColourLoading').hide();
				$('rangeColours').show();
				if(defaultSelect) {
					$('colour-'+number).addClassName('act');
				}
				thisObj.setRangeColourItems();
			}
		});
	},
	setRangeColourItems: function() {
		var thisObj = this; 
		// Set newly loaded colours
		$$('#rangeColours .item').invoke('observe', 'click', function(e){
			var clicked = e.element();
			var container = $(clicked).up('.item');
			if(container.hasClassName('off')) {
				return;
			}
			var dataObject = container.getElementsBySelector('a')[0];
			var params = thisObj._readParameter(dataObject.rel);
			thisObj.setColour(params.colour);
		});
	},
	setColour: function(number) {
		// Clear current colour
		this.clearColour();
		
		// Set current colour selection
		this.selectedColour = number;
		
		// Set selected range colour
		if($('colour-'+number)) {
			$('colour-'+number).addClassName('act');
		}
		
		// Load image for preview
		var img = new Image();
		img.onload = function() {
			var img = new Element('img', { 'id': 'sampleColour', 'src': this.src, 'style':'display:none;' });
			$('samplePreview').appendChild(img);
			new Effect.Appear('sampleColour', { duration: 0.5 });
			$('sample-colour-number').update(number);
			$('sampleColourClear').show();
		}
		img.src = this.url.imgPathLarge+number+'.gif';
		
		// Show user action buttons
		new Effect.Appear('sampleActions');
	},
	clearColour: function() {
		// Reset seleted colour
		this.selectedColour = null;
		
		// Clear sample colour label
		$('sample-colour-number').update();
		
		// Hide clear button
		$('sampleColourClear').hide();
		
		// Remove sample colour image
		if($('sampleColour')) { $('sampleColour').remove(); }
		
		// Clear colour range selection
		if($$('#rangeColours .row .item').length > 0) {
			$$('#rangeColours .row .item').each(function(item) {
				item.removeClassName('act');
			});
		}
	},
	setTexture: function(textureId) {
		// Clear current texture
		this.clearTexture();
		
		// Set current texture selection
		this.selectedTexture = textureId;
		$('texture-'+textureId).addClassName('act');
		
		// Update texture sample
		var img = $$('#texture-'+textureId+' img')[0];
		$('samplePreview').appendChild(new Element('img', { 'id': 'sampleTexture', 'src': img.src }));
		var name = $$('#texture-'+textureId+' span.label')[0].innerHTML;
		$('sample-texture-name').update(name);
		$('sampleTextureClear').show();
	},
	clearTexture: function() {
		// Unset current texture
		this.selectedTexture = null;
		
		// Clear sample info 
		$('sample-texture-name').update();
		$('sampleTextureClear').hide();
		
		// Remove sample texture image
		if($('sampleTexture')) { $('sampleTexture').remove(); }
		
		// Clear texture list
		if($$('#textures .row .texture').length > 0) {
			$$('#textures .row .texture').each(function(item) {
				item.removeClassName('act');
			});
		}
	},
	refreshScrapbook: function() {
		var thisObj = this;
		new Ajax.Updater('scrapbook', thisObj.noCache(thisObj.url.scrapbook), {
			method: "get",
			evalScripts: true,
			onComplete: function() {
				$('loading').hide();
				thisObj.setScrapbookItems();
			}
		});
	},
	addToScrapbook: function() {
		if(!this.selectedColour) {
			alert('Please select a colour');
		} else {
			var thisObj = this;
			new Ajax.Request(thisObj.noCache(thisObj.url.scrapbookAdd), {
				method: "post",
				parameters: { colour: thisObj.selectedColour, texture: thisObj.selectedTexture },
				onCreate: function() {
					$('loading').show();
				},
				onSuccess: function(transport) {
					thisObj.refreshScrapbook();
				}
			});
		}
	},
	removeScrapbook: function(scrapbook_id) {
		var thisObj = this;
		new Ajax.Request(thisObj.noCache(thisObj.url.scrapbookRemove+scrapbook_id), {
			method: "get",
			onCreate: function() {
				$('loading').show();
			},
			onSuccess: function(transport) {
				thisObj.refreshScrapbook();
			}
		});
	},
	loadSelection: function(colourNumber, textureId) {
		// Load colour
		this.setColour(colourNumber);
		
		// Load range colours
		this.setRange(colourNumber, true);
		
		// Load texture
		if(textureId) {
			this.setTexture(textureId);
		} else {
			this.clearTexture();
		}
		
		// Load colour wheel selection
		var myMovie = this.getFlashObject('flashColourWheel');
		var number = colourNumber.substr(0, 3)+"00";
		myMovie.activate(number);
	},
	loadColour: function(number) {
		this.setColour(number);
		this.setRange(number, true);
	},
	selectColour: function(unit_id) {
		if(this.selectedColour) {
			// Create thumbnail
			var thumbnail = new Element('span', { 'style': 'display:block;width:66px;height:20px;overflow:hidden;' });
			var img = new Element('img', { 'alt': this.selectedColour, 'title': this.selectedColour });
			img.src = this.url.imgPathSmall+this.selectedColour+'.gif';
			thumbnail.update(img);
			// Set unit colour value
			$('unit-colour-'+unit_id).value = this.selectedColour;
			$('unit-colour-picker-'+unit_id).update(thumbnail);
			// Hide lightbox
			myLightbox.hide();
		} else {
			alert('Please select a colour');
		}
	}
});