var ColourSelector = Class.create();
ColourSelector.prototype = {
    initialize: function(cid){
		this.cid = cid;
		this.scid = 0;
		
		new Effect.Opacity('colourSelectorContent', { from: 1, to: 0, duration:0, delay:0 });
		
		
		new Ajax.Request('colourSelector/builder.php?action=getCategoryDescription&cid='+cid, {
			onSuccess: function(response) {
				$('colourSelectorDescription').update(response.responseText);
				Cufon.replace('h3');
			}
		});
		
		
		new Ajax.Request('colourSelector/builder.php?action=getCategoryDetails&cid='+cid, {
			onSuccess: function(response) {
				$('colourSelectorSwatches').update("<strong>Please select a colour:</strong> <div id=\"colourSelectorSwatchName\"></div><br /><br />"+response.responseText);
		
				new Ajax.Request('colourSelector/builder.php?action=getInitialColour&cid='+cid, {
					onSuccess: function(response) {
						this.scid = parseInt(response.responseText.replace(/^\s+|\s+$/g,""));
						$("swatch-"+this.scid).addClassName('current');
						$('colourSelectorSwatchName').update($("swatch-"+this.scid).title);
						
					},
					onComplete: function() {
						new Ajax.Request('colourSelector/builder.php?action=getColourProducts&scid='+scid, {
							onSuccess: function(response) {
								$('colourSelectorContent').update(response.responseText);
								new Effect.Opacity('colourSelectorContent', { from: 0, to: 1, duration:0.5, delay:0 });
								$('loaderContainer').hide();
								
								//Reload the colour viewed previously when using the back button
								//Firefox will do this automatically, this is a fix for IE and Safari
								if(window.location.hash) {
									var hashValue = window.location.hash;
									var realValue = hashValue.replace('-',' ').replace('#','');
									
									$$('.colourSelectorSwatch').each(function(el,counter) {
										var swatchIdStripped = el.id.replace('swatch-','');
										if(el.title == realValue) {
											this.scid = swatchIdStripped;
											$("swatch-"+scid).addClassName('current');
													
											new Effect.Opacity('colourSelectorContent', { from: 1, to: 0.25, duration:0.2 });
											$('loaderContainer').show();
											new Ajax.Request('colourSelector/builder.php?action=getColourProducts&scid='+scid, {
												onSuccess: function(response) {
													$('colourSelectorContent').update(response.responseText);
													new Effect.Opacity('colourSelectorContent', { from: 0.25, to: 1, duration:0.2, delay:1});				
													setTimeout("$('loaderContainer').hide();",1000);
												}
											});
											$('colourSelectorSwatchName').update(el.title);
										}
									});
									
								}
								/*****************/
							}
						});
					}
				});
			}
		});
    },
	
	changeColour: function(scid) {
		this.scid = scid;
		$("swatch-"+scid).addClassName('current');
				
		new Effect.Opacity('colourSelectorContent', { from: 1, to: 0.25, duration:0.2 });
		$('loaderContainer').show();
		new Ajax.Request('colourSelector/builder.php?action=getColourProducts&scid='+scid, {
			onSuccess: function(response) {
				$('colourSelectorContent').update(response.responseText);
				new Effect.Opacity('colourSelectorContent', { from: 0.25, to: 1, duration:0.2, delay:1});				
				setTimeout("$('loaderContainer').hide();",1000);
			}
		});
	},
	
	updateSwatchText: function(text) {
		$('colourSelectorSwatchName').update(text);
	}
}