/*
                            target: "",
                            options: thisContext.options,
                            swatches: cparts[i].options,
                            idToDefMap: thisContext.idToDefMap,
                            defaultSwatch: cparts[i].defaultSwatch
*/
    ZONTIK.Class.create("ZONTIK.Controls.Swatches", ZONTIK.Controls.Control, 
            function(config) {
                var thisContext = this;
                this.config = config;
                this.target = config.target;
                this.hideAllOthers = config.hideCallback;
                this.label = config.label,
                //All choices to choose from
                this.options = config.options;
                //Choices in this swatch palette
                this.swatches = config.swatches;
                this.idToDefMap = config.idToDefMap;
                this.defaultSwatch = config.defaultSwatch;
                //add callback method from super class
                $(document).ready(function(){
                    thisContext.initialize();
                });
            }, 
            {
                idToDefMap: [],
                hideAllOthers: {},
                label: "",
                options: [],
                palleteOpen: false,
                select: [],
                swatches: [],
                defaultSwatch: 0,

                callbackSelect: function(id) {
                    var thisContext = this;
                    this.config.callbackContext.selectedSwatch({index: thisContext.config.index, swatch: id, part: thisContext.config.part});
                },

                closePallete: function() { 
                    this.palleteOpen = false;
                    $("#" + this.target + " .SwatchLabel").removeClass("SwatchPalleteOpen");
                    $("#" + this.target + " .SwatchPalleteContents").remove();
                },
                
                getDefaultSwatchHtml: function() {
                    if (this.idToDefMap[this.defaultSwatch].length != undefined) {
                        return this.getDropdownHtml(this.defaultSwatch);
                    } else {
                        return "<div class='Swatch' id='DefaultSwatch' style='background: url(\"" + this.options[this.idToDefMap[this.defaultSwatch]]["src"] + "\");' onClick='"+ ZONTIK.Delegate.createAsString(this, this.showPallete) + "'><span>" + this.options[this.idToDefMap[this.defaultSwatch]]["label"] + "</span><img src='/images/product.swatch.down.gif' class='SwatchArrow'></div>";
                    }
                },
                
                getDropdownHtml: function(id) {
                    var html = "<select id='" + this.label + "_select'>";
                    this.options[this.idToDefMap[id][0]];
                    for (i=0; i < this.options[this.idToDefMap[id][0]].length; i++) {
                        html += "<option value='" + this.options[this.idToDefMap[id][0]][i]["id"] + "'>" + this.options[this.idToDefMap[id][0]][i]["label"] + "</option>";
                    }
                    html += "</select>";
                    return html;
                },
                
                getHtml: function() {
                    var html = "<div class='SwatchPallete'>";
                    html += this.getSwatchLabelHtml();
                    html += "</div>";
                    return html;
                },
                
                getPaletteHtml: function() {
                    var html= "<div class='SwatchPalleteContents'>";
                    html += "<div class='SwatchPalleteContentsWrapper'>";
                    html += "<div class='SwatchPalleteContentsWrapperTitle SwatchLabel'><img src='/images/cart.item.del.gif' class='SwatchClose' onClick='" + ZONTIK.Delegate.createAsString(this, this.showPallete) +"'>" + this.label + " </div>";
                    html += "<div class='SwatchWrapper'>";                    
                    html += this.getSwatchesHtml();
                    html += "<div class='Clear'></div>";                    
                    html += "</div>";
                    html += "</div>";
                    html += "<div class='Clear'></div>";                    
                    html += "</div>";
                    return html;
                },
                
                getSwatchHtml: function(id) {
                    return "<div class='Swatch' style='background: url(\"" + this.options[this.idToDefMap[id]]["src"] + "\");' onClick='" + ZONTIK.Delegate.createAsString(this, this.swatchSelect, id) + "'></div>";
                },
                
                getSwatchesHtml: function() {
                    var html = "";
                    for (var i=0; i < this.swatches.length; i++) {
                        html += this.getSwatchHtml(this.swatches[i]);
                    }
                    return html;
                },
                
                getSwatchLabelHtml: function() {
                    var html = "<div class='SwatchLabel'>";
                    html += "<div class='SwatchTitle'>" + this.label + "</div>";
                    html += this.getDefaultSwatchHtml();
                    html += "<div class='Clear'></div>";
                    html += "</div>";
                    return html;
                },
                
                initialize: function() {
                    var thisContext = this;
                    if (!(this.config.part == "variant_id")) {
                        $("#" + this.target).html(this.getHtml());
                    } else if (this.config.part == "variant_id") {
                        if (this.idToDefMap[9999].length != 1) {
                            $("#" + this.target).html(this.getHtml());
                            $("#" + this.target + " select").addClass("variantList");
                            /*
                            $("#" + this.target + " select").change(function() {
                                thisContext.callbackSelect($("#" + thisContext.target + " option:selected").val());
                            });
                            */
                        }
                    }
                },
                
                showPallete: function() {
                    if (this.palleteOpen == false) {
                        $("#" + this.target).prepend(this.getPaletteHtml());
                        $("#" + this.target + " .SwatchPalleteContents").show();
                        $("#" + this.target + " .SwatchLabel").addClass("SwatchPalleteOpen");
                        this.palleteOpen = true;
                        this.hideAllOthers();
                    } else {
                        this.closePallete();
                    }
                },
                
                swatchSelect: function(id) {
                    var thisContext = this;
                    this.closePallete();
                    var newBackgroundSrc = this.options[this.idToDefMap[id]]["src"];
                    $("#" + this.target + " #DefaultSwatch").css("background", "url(" + newBackgroundSrc + ")");
                    $("#" + this.target + " #DefaultSwatch").html("<span>" + this.options[this.idToDefMap[id]]["label"] + "</span><img src='/images/product.swatch.down.gif' class='SwatchArrow'>");
                    this.callbackSelect(id);
                }
            }
        );