var Swatch = Class.create({
    name: null,
    img: null,
    initialize: function(name, path) {
        this.name = name;
        this.img = new Image();
        this.img.src = path;
    },
    htmlImg: function(h,w) {
		return new Element('img', 
		{
			'src': this.img.src,
			'height': h,
			'width': w,
			'title': this.name
		}
		);
    }
});

var Switcher = {
	swatch: null,
	swatchName: null,
	change: function(e) {

        if (!this.swatch) {
            this.swatch = $('swatch-image');
            this.swatchName = $('swatch-name');
		}
        var element = Event.element(e);
        this.swatch.src = element.src;
        this.swatchName.update(element.title);

	}
}

var stock_plus_color_array = [];

var stock_color_array = [];


var SwatchStockPanel = {
    draw: function() {
        if (stock_color_array.length == 0)
            return;
            
        var panel = new Element('div', {'class':'view-option'});
        panel.appendChild(new Element('strong', {'class':'panel-title'}).update('Stock Colors:'));
        panel.appendChild(new Element('em').update('Ready for Delivery'));
        
        stock_color_array.each(
            function(swatch) {
                var img = swatch.htmlImg(35,35);
                img.observe('click', Switcher.change);
                panel.appendChild(img);
            }
        );
        
        $('swatches').appendChild(panel);
        
    }

}
var SwatchMainPanel = {
    draw: function() {
        if (stock_color_array ==0 && stock_plus_color_array == 0)
            return; 
        var panel = new Element('div',{'class':'view-option'});
        panel.appendChild(new Element('div').setStyle({'margin':'3px 0'}).update('<b>View available colors ( no additonal cost )</b>'));

        stock_color_array.each(
            function(swatch) {
                var img = swatch.htmlImg(25,25).setStyle({'border':'1px solid #ddd'}).observe('click', viewSwatches);
                panel.appendChild(img);
            }
        );
		panel.appendChild(new Element('div').setStyle({'margin':'3px 0','font-weight':'bold'}).update('<b>Shown In</b>'));
        stock_plus_color_array.each(
            function(swatch) {
                var img = swatch.htmlImg(25,25).setStyle({'border':'1px solid #ddd'}).observe('click', viewSwatches);
                panel.appendChild(img);
            }
		);

        panel.appendChild(new Element('div').setStyle({'margin':'3px 0','font-weight':'bold'}).update('<b>Additional colors ( please allow extra time for delivery )</b>'));
        $('swatch-panel').appendChild(panel);
    }
}
var SwatchStockPlusPanel = {
    draw: function() {
        if (stock_plus_color_array.length == 0)
            return;
            
        var panel = new Element('div', {'class':'view-option'});
        panel.appendChild(new Element('strong', {'class':'panel-title'}).update('Stock Plus Colors:'));
        panel.appendChild(new Element('em').update('No extra cost; Allow extra time for delivery'));
        
        stock_plus_color_array.each(
            function(swatch) {
                var img = swatch.htmlImg(35,35);
                img.observe('click', Switcher.change);
                panel.appendChild(img);
            }
        );
        
        $('swatches').appendChild(panel);
        
    }

}