var settingView = function(controlID, requestUrl, templateHtml) {
    var self = this;
    this.properties = {
        selectedValue : "",
        targetControlID: controlID,
        compareWindow : null,
        selectIndexChangeCallBack : null,
        noDataCallBack : null
    }

    var selectedStyleChange = function(id){
        var items = document.getElementById("ext-comp-1001").childNodes;
        
        //remove previous selected
        for(var i = 0; i < items.length; i ++){
            if (items[i].childNodes[0] && items[i].childNodes[0].className == "thumb2") {
                items[i].childNodes[0].className = "thumb";
                break;
            }
        }
        
        document.getElementById("thumb" + id).className = "thumb2";
    }

    /* events */
    this.onSelectIndexChange = function(fn) {
        self.properties.selectIndexChangeCallBack = fn;
    };
    
    this.onNoData = function(fn){
        self.properties.noDataCallBack = fn;
    }


    //set default value
    var setDefaultInterval;
    function setDefaultSelectedItem() {
        if (!setDefaultInterval) {
            setDefaultInterval = setInterval(function() {
                var data = document.getElementsByName("setting");
                var found = false;
                for (var i = 0; i < data.length; i++) {
                    if (data[i].type == "radio") {
                        data[i].checked = true;
                        clearInterval(setDefaultInterval);
                        setDefaultInterval = null;

                        self.properties.selectedValue = data[i].id.replace("rad", "");
                        selectedStyleChange(self.properties.selectedValue);
                        //raise event
                        if (self.properties.selectIndexChangeCallBack) {
                            self.properties.selectIndexChangeCallBack(self.properties.selectedValue);
                        }
                        found = true;
                        break;
                    }
                }
                
                if(!found) {
                    self.properties.selectedValue = "";
                    if(self.properties.noDataCallBack) self.properties.noDataCallBack();
                }
                
            }, 250);
        }
    }

    var setSelectedItemInterval;
    function setSelectedItem(id) {
        if (!setSelectedItemInterval) {
            setSelectedItemInterval = setInterval(function() {
                var data = document.getElementsByName("setting");
                var getData = false;
                var found = false;
                for (var i = 0; i < data.length; i++) {
                    if (data[i].type == "radio" && data[i].id.replace("rad", "") == id) {
                        data[i].checked = true;
                        clearInterval(setSelectedItemInterval);
                        setSelectedItemInterval = null;

                        self.properties.selectedValue = id;
                        selectedStyleChange(id);
                        //raise event
                        if (self.properties.selectIndexChangeCallBack) {
                            self.properties.selectIndexChangeCallBack(id);
                        }
                        found = true;
                        break;
                    }
                    getData = true;
                }

                //no data exist in current set
                if (getData && setSelectedItemInterval && !found) {
                    clearInterval(setSelectedItemInterval);
                    setSelectedItemInterval = null;
                    setDefaultSelectedItem();
                }
            }
            , 250);
        }
    }

    this.getSelectedValue = function() {
        return self.properties.selectedValue;
    }

    this.selectSetting = function(settingId) {
        var radioes = document.getElementById(self.properties.targetControlID).getElementsByTagName("INPUT");
        for (var i = 0; i < radioes.length; i++) {
            if (radioes[i].type == "radio" && radioes[i].id == "rad" + settingId) {
                radioes[i].checked = true;

                self.properties.selectedValue = settingId;
                selectedStyleChange(settingId);
                //raise event
                if (self.properties.selectIndexChangeCallBack) {
                    self.properties.selectIndexChangeCallBack(settingId);
                }
                break;
            }
        }


        if (self.properties.compareWindow) {
            self.properties.compareWindow.close();
        }
    }

    //data store
    var store = new Ext.data.JsonStore({
        url: requestUrl,
        fields: ['id', 'skunumber', 'caption', 'description', 'imagename']
    });
    store.load();

    this.tpl = new Ext.XTemplate(
		            templateHtml
	            );

    this.dataView = new Ext.DataView({
        store: store,
        tpl: this.tpl,
        //overClass: 'x-view-over',
        itemSelector: 'div.thumb-wrap',

        prepareData: function(data) {
            return data;
        }
    });


    this.dataView.addListener('click', this.dataView.onClick, this.dataView);

    //handle on item was clicked.
    this.dataView.onClick = function(event, target, scope) {
        var currentSelectedValue = self.properties.selectedValue;
        if (target.tagName == "IMG") {
            var rad = document.getElementById("rad" + self.properties.selectedValue);
            self.properties.selectedValue = target.id.replace("img", "");

            document.getElementById("rad" + self.properties.selectedValue).checked = true;
            selectedStyleChange(self.properties.selectedValue);
            
            //raise event
            if (self.properties.selectIndexChangeCallBack && currentSelectedValue != self.properties.selectedValue) {
                self.properties.selectIndexChangeCallBack(self.properties.selectedValue);
            }
        } else if (target.tagName == "INPUT" && target.type == "radio") {
            self.properties.selectedValue = target.id.replace("rad", "");
            selectedStyleChange(self.properties.selectedValue);
            
            //raise event
            if (self.properties.selectIndexChangeCallBack && currentSelectedValue != self.properties.selectedValue) {
                self.properties.selectIndexChangeCallBack(self.properties.selectedValue);
            }
        } else if (target.tagName == "DIV" && target.className == "thumb") {
            self.properties.selectedValue = target.id.replace("thumb", "");
            selectedStyleChange(self.properties.selectedValue);
            
            //raise event
            if (self.properties.selectIndexChangeCallBack && currentSelectedValue != self.properties.selectedValue) {
                self.properties.selectIndexChangeCallBack(self.properties.selectedValue);
            }
        } else if (target.tagName == "SPAN") {
            self.properties.selectedValue = target.id.replace("sp", "");
            selectedStyleChange(self.properties.selectedValue);

            //raise event
            if (self.properties.selectIndexChangeCallBack && currentSelectedValue != self.properties.selectedValue) {
                self.properties.selectIndexChangeCallBack(self.properties.selectedValue);
            }
        }
        
    };

    this.panel = new Ext.Panel({
        id: 'images-view',
        frame: true,
        width: 640,
        //autoHeight: true,
        height: (Ext.isIE6 || Ext.isIE7) ? 175 : 175,
        footer: false,
        autoScroll: true,
        items: this.dataView
    });


    //reload with new datasource
    this.reload = function(newURL, selectValue) {
        var newStore = new Ext.data.JsonStore({
            url: newURL,
            fields: ['id', , 'skunumber', 'caption', 'description', 'imagename']
        });
        newStore.load();

        this.dataView.setStore(newStore);
        this.dataView.refresh();
        if(selectValue)
            setSelectedItem(selectValue);
        else
            setDefaultSelectedItem();
    };


    this.changeImageColor = function(styleId, shapeId, metalId) {
        Ext.Ajax.request({
            url: "Ajax.aspx?method=getimageslist&styleid=" + styleId + "&shapeid=" + shapeId + "&metalid=" + metalId + "&rnd=" + Math.random()
                    , success: function(o) {
                        var data = Ext.util.JSON.decode(o.responseText);
                        var imgs = document.getElementById(self.properties.targetControlID).getElementsByTagName("IMG");
                        Ext.each(data, function(item, index, allItems) {
                            imgs[index].src = item.front110;
                        });
                    }
        });
    }

    this.compareSettings = function(title, requestURL) {
        var count = 0;
        var checkboxes = document.getElementById(self.properties.targetControlID).getElementsByTagName("INPUT");
        var img, id, settings;
        var format = '<div class="compare-item">'
                           + '<img src="{0}" alt="product" />'
                           + '<span class="setting-id">{1}</span>'
                           + '<div class="setting-desc">'
                           + '    {2}'
                           + '</div>'
                           + '<div class="setting-price">'
                           + '    ${3}'
                           + '</div>'
                           + '<a href="#" onclick="selectSetting({4})">select</a>'
                           + '</div>';

        var html = '<div class="compare-wrapper" >';
        settings = "";
        Ext.each(checkboxes, function(item, index, allItems) {
            if (item.type == "checkbox" && item.checked) {
                count += 1;
                id = item.id.replace("cbx", "");
                settings += id + "|";
            }
        });
        
        if (count > 1) {
            Ext.Ajax.request({
                url: requestURL + '&settings=' + settings,
                success: function(o){
                    var data = Ext.util.JSON.decode(o.responseText);
                    count = 0;
                    Ext.each(checkboxes, function(item, index, allItems) {
                        if (item.type == "checkbox" && item.checked) {
                            id = item.id.replace("cbx", "");
                            img = document.getElementById("img" + id);
                            html += String.format(format, img.src, "Style " + id, img.title, data[count].sellingprice, "'" + id + "'");
                            count++;
                        }
                    });

                    html += '</div>';

                    self.properties.compareWindow = new Ext.Window({
                        modal: true,
                        html: html,
                        title: title,
                        width: 140 * count + 25,
                        height: 350
                    });
                    self.properties.compareWindow.show();
                }
            });
        } else {
            Ext.MessageBox.show({
                title: 'Alert',
                msg: 'Please select at least 2 items to compare!',
                buttons: Ext.MessageBox.OK,
                icon: Ext.MessageBox.INFO
            });
        }

    }


    this.render = function() {
        self.panel.render(self.properties.targetControlID);
        setDefaultSelectedItem();
    }
}