jQuery(document).ready(function(){
	var colorpicker = new ColorPicker;
});

function ColorPicker(){

	this.moreViewsWrapper	 		= jQuery("#more-views-wrapper");
	this.mainImage	 				= jQuery("#image");
	this.sizeSelect					= jQuery("#size-picker select");
	this.sizeWrapper				= jQuery("#size-values");
	this.sizeValues					= this.sizeWrapper.children();
	this.moreViews					= jQuery("#more-views");
	this.showingSizes				= false;
	this.showingMoreViews   		= false;

	this.init = function(){
		this.parseAttrColor();
		this.setupSizePicker();
		this.setupMoreViews();
    	this.preloadMoreViews();
	};

	this.fireEvent = function(element,event){
	    if (document.createEventObject){
	        // dispatch for IE
	        var evt = document.createEventObject();
	        return element.fireEvent('on'+event,evt)
	    }
	    else{
	        // dispatch for firefox + others
	        var evt = document.createEvent("HTMLEvents");
	        evt.initEvent(event, true, true ); // event type, bubbling, cancelable
	        return !element.dispatchEvent(evt);
	    }
	}

	this.parseAttrColor = function(){
        var color_select 		= jQuery("#color-picker select");
        var color_select_opts	= color_select.children();

        var color_ui = "";
        color_select_opts.each(function(){
            var value = jQuery(this).val();
            var title = jQuery(this).html();
            var label = title.split(" ")[0];
            if(value) color_ui = color_ui+"<li class='picker c"+label+"' id='pickColorId-"+value+"' title='"+title+"'><img src='"+jQuery("#moreViewsColor-"+value+" img:first").attr("src")+"' alt='' /></li>\n";
        });

        color_select.before("<ul>"+color_ui+"</ul>");
        color_select.css("visibility", "hidden");

        var _this = this;
        var color_picker = jQuery("#color-picker .picker");
        color_picker.click(function(){

            var element = jQuery(this);
            var colorId = element.attr("id").match(/\d+/);

            element.siblings().removeClass("picked");
            element.addClass("picked");
            color_select.val(colorId);
            _this.fireEvent(document.getElementById(color_select.attr("id")), "change");
            _this.updateSize();

            if(!_this.showingSizes){
            	_this.sizeWrapper.prev().hide();
            	_this.sizeWrapper.fadeIn(400);
            	_this.showingSizes = true;
            }

            if(!_this.showingMoreViews){
            	_this.moreViews.fadeIn(400);
            	_this.showingMoreViews = true;
            }

            var moreViewsPicked = jQuery("#moreViewsColor-"+colorId);
            var moreViewsPickedSiblings = moreViewsPicked.siblings();

            moreViewsPickedSiblings.removeClass("selected");
            moreViewsPicked.addClass("selected");
            moreViewsPicked.show();
            moreViewsPickedSiblings.hide();

            var color = jQuery(this).attr('title');
            jQuery('.selected-color').html('COLOR:'+color);

            var first_image_data = moreViewsPicked.first();
            var main_image = first_image_data.find("a").attr("href");
            jQuery("#image").attr("src", main_image);
        });
    };

	this.updateSize = function(){
        this.sizeValues.removeClass("available");
        this.sizeValues.removeClass("selected");
        this.sizeSelect.children().each(function(){
            jQuery("#size-"+jQuery(this).val()).addClass("available");
        });
    };

    this.setupSizePicker = function(){
    	this.sizeSelect.css("visibility", "hidden");
    	var _this = this;
    	this.sizeValues.click(function(){
    		var element = jQuery(this);

    		if (element.hasClass("available")) {
    			_this.sizeSelect.val(element.attr("id").match(/\d+/));
    			_this.fireEvent(document.getElementById(_this.sizeSelect.attr("id")), "change");
    			_this.sizeValues.removeClass("selected");
    			element.addClass("selected");
    		}
    		return false;
    	});
    	this.sizeWrapper.hide();
    };

    this.setupMoreViews = function(){
    	jQuery("#productMoreViews").siblings().hide();
    	var _this = this;
    	this.moreViewsWrapper.find("a").click(function(){
    		_this.mainImage.attr("src", jQuery(this).attr("href"));
    		return false;
    	});
	};

	this.preloadMoreViews = function (){
	    var preload = new Array();
	    var i       = 0;
	    this.moreViewsWrapper.find("a").each(function(){
	        preload[i] = new Image();
	        preload[i].src = jQuery(this).attr("href");
	        i++;
	    });
	};

	this.init();
}