// Function requried to set selected index based on value
function setSelectedIndex(s, v) {
    for ( var i = 0; i < s.options.length; i++ ) {
        if ( s.options[i].value == v ) {
            s.options[i].selected = true;
            return;
        }
    }
}

window.addEvent('domready', function() {
	
	if($('colorselect')) {
	
		// Add the tooltips to the colour swatch
		var colorTips = new Tips($$('.swatch'));
		
		// Add onclick to swagches to change dropdown
		$$('.swatch').each(function(element) {
	
			// Set the defauly property
			element.setProperty('class','swatch unselected');
	
			element.addEvent('click', function() { 		
				
				setSelectedIndex($('colorselect'),parseInt(this.id.replace('color', "")));							
				
				// Set the style of every swatch as unselected
				$$('.swatch').each(function(swatchElement) {
					swatchElement.setProperty('class','swatch unselected');
				})	
							
				// Set this one as selected
				$('color'+parseInt(this.id.replace('color', ""))).setProperty('class','swatch selected');						
			
				/*
				// Change the image mask
				$$('.swatchimage').each(function(element) {
					element.setProperty('src','/img/tshirt-mask.png');
				})		
				$('mask'+parseInt(this.id.replace('color', ""))).setProperty('src','/img/tshirt-mask-active.png');
				*/
					
			})
				
		})
	
		// Set the initial select state
		var selectedValue = $('colorselect').options[$('colorselect').selectedIndex].value;		
		$('color'+selectedValue).setProperty('class','swatch selected');
		
			
	
		// Add onchange to dropdown to set swatches as active
		$('colorselect').addEvent('change', function() {
			
			var selectedValue = this.options[this.selectedIndex].value;		
			
			// Set the style of every swatch as unselected
			$$('.swatch').each(function(element) {
				element.setProperty('class','swatch unselected');
			})		
			// Set this one as selected
			$('color'+selectedValue).setProperty('class','swatch selected');
			
			/*
			// Change the image mask
			$$('.swatchimage').each(function(element) {
				element.setProperty('src','/img/tshirt-mask.png');
			})		
			$('mask'+selectedValue).setProperty('src','/img/tshirt-mask-active.png');
			*/
					
		})
		
		
		
		// Add onchange to dropdown to set swatches as active
		$('colorselect').addEvent('keypress', function() {
			
			var selectedValue = this.options[this.selectedIndex].value;		
			
			// Set the style of every swatch as unselected
			$$('.swatch').each(function(element) {
				element.setProperty('class','swatch unselected');
			})		
			// Set this one as selected
			$('color'+selectedValue).setProperty('class','swatch selected');
			
			/*
			// Change the image mask		
			$$('.swatchimage').each(function(element) {
				element.setProperty('src','/img/tshirt-mask.png');
			})		
			$('mask'+selectedValue).setProperty('src','/img/tshirt-mask-active.png');
			*/
		})
	
	}
	
})