Product.CLSConfig = Class.create(Product.Config, {
	configureElement: function($super, el) {
        $super(el);
		colorChanger
		    .updateProductImage
		    .bind(
		        colorChanger,
		        el
		    );
	},

	fillSelect: function(element){
		var attributeId = element.id.replace(/[a-z]*/, '');
		var options = this.getAttributeOptions(attributeId);
		this.clearSelect(element);
		element.options[0] = new Option(this.config.chooseText, '');

		var prevConfig = false;
		if(element.prevSetting){
			prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
		}

		if(options) {
			var index = 1;
			for(var i=0;i<options.length;i++){
				var allowedProducts = [];
				var saleableProducts = [];
				if(prevConfig) {
					for(var j=0;j<options[i].products.length;j++){
						if(prevConfig.config.allowedProducts
							&& prevConfig.config.allowedProducts.indexOf(options[i].products[j])>-1){
							allowedProducts.push(options[i].products[j]);
						}
					}
					
					for(var j=0;j<options[i].saleable.length;j++){
						if(prevConfig.config.saleableProducts
							&& prevConfig.config.saleableProducts.indexOf(options[i].saleable[j])>-1){
							saleableProducts.push(options[i].saleable[j]);
						}
					}
				} else {
					allowedProducts = options[i].products.clone();
					saleableProducts = options[i].saleable.clone();
				}

				if(allowedProducts.size()>0){
					options[i].allowedProducts = allowedProducts;
					options[i].saleableProducts = saleableProducts;
					element.options[index] = new Option(this.getOptionLabel(options[i], options[i].price), options[i].id);
					element.options[index].config = options[i];
					
					if(!(saleableProducts.size()>0))
						element.options[index].disabled = true;
						
					index++;
				}
			}
		}
	}
});

Product.CLSColorChanger = Class.create({
	initialize: function(config) {
		this.config = config;
	},
	
	updateProductImage: function(element) {
		
		var attributeId = element.id.replace(/[a-z]*/, '');
		
		if(attributeId == this.config.id) {
			var value = element.value;
			var visibleClass = $$('#attribute' + attributeId + ' option[value="' + element.value + '"]')[0].innerHTML.replace(/\W+/g, '_').toLowerCase();
			
			if($$('.more-views li').size())
				$$('.more-views li').invoke('hide');
			
			if($$('.more-views li.' + visibleClass).size())
				$$('.more-views li.' + visibleClass).invoke('show');
				
			if($$('.more-views li.default-' + visibleClass + ' a').size()){
				$('main-image').src = $$('.more-views li.default-' + visibleClass + ' a')[0].href;
				$('main-image').up().href = $$('.more-views li.default-' + visibleClass + ' a')[0].href;
			}
		}

		reactivateMainImage();
	}
});


$(document).observe('dom:loaded', function(){
	if($('attribute528')){
		$('attribute528').observe('change', function(){
			className = 'color_' + $$('# ' + $(this).id + 'option[value="' + $(this).value + '"]')[0].innerHTML.replace(/[\/\s]/g, '-').replace(/---/g, '-').toLowerCase();
	
			$$('.color-dropdown > span').each(function(el){
				$(el).removeClassName('active');
			});
      if($(className)){
			    $(className).addClassName('active');
	    }
		});
	
		setTimeout('selectFirstColor()', 200)
	}
	
	if($('attribute538')){
		$('attribute538').observe('change', function(){
			className = 'color_' + $$('# ' + $(this).id + 'option[value="' + $(this).value + '"]')[0].innerHTML.replace(/[\/\s]/g, '-').replace(/---/g, '-').toLowerCase();
	
			$$('.color-dropdown > span').each(function(el){
				$(el).removeClassName('active');
			});
      if($(className)){
			    $(className).addClassName('active');
	    }
		});
	
		setTimeout('selectFirstColor()', 200)
	}
});

function selectFirstColor(){
	if($('attribute528') && $$('.color-dropdown span').length>0){
	    $$('.color-dropdown span').first().addClassName('active');
		$('attribute528').value = $A($('attribute528').options)[1].value;
		spConfig.configureElement($('attribute528'));
		reactivateMainImage();
	}

	if($('attribute538') && $$('.color-dropdown span').length > 0){
	    $$('.color-dropdown span')[0].addClassName('active');
		$('attribute538').value = $A($('attribute538').options)[1].value;
		spConfig.configureElement($('attribute538'));
		reactivateMainImage();
	}
}

function reactivateMainImage(){
    
    MagicThumb.refresh();
/*    window.MagicThumb.init()*/
}