Magento : Product Detail Page : JS-Config : for Colorswicher

//js\varien\config.js

if(typeof Product=='undefined') {
    var Product = {};
}
if(typeof selectedAssocProducts=='undefined') {
        var selectedAssocProducts = {};
    }
/**************************** CONFIGURABLE PRODUCT **************************/
var _BigImg;
Product.Config = Class.create();
Product.Config.prototype = {
    initialize: function(config){
        this.config     = config;
        this.taxConfig  = this.config.taxConfig;
        this.settings   = $$('.super-attribute-select');
        this.state      = new Hash();
        this.priceTemplate = new Template(this.config.template);
        this.prices     = config.prices;
        this.settings.each(function(element){
            Event.observe(element, 'change', this.configure.bind(this))
        }.bind(this));

        // fill state
        this.settings.each(function(element){
            var attributeId = element.id.replace(/[a-z]*/, '');
            if(attributeId && this.config.attributes[attributeId]) {
                element.config = this.config.attributes[attributeId];
                element.attributeId = attributeId;
                this.state[attributeId] = false;
            }
        }.bind(this))

        // Init settings dropdown
        var childSettings = [];
        for(var i=this.settings.length-1;i>=0;i--){
            var prevSetting = this.settings[i-1] ? this.settings[i-1] : false;
            var nextSetting = this.settings[i+1] ? this.settings[i+1] : false;
            if(i==0){
                this.fillSelect(this.settings[i])
            }
            else {
                this.settings[i].disabled=true;
            }
            $(this.settings[i]).childSettings = childSettings.clone();
            $(this.settings[i]).prevSetting   = prevSetting;
            $(this.settings[i]).nextSetting   = nextSetting;
            childSettings.push(this.settings[i]);
        }

        // try retireve options from url
        var separatorIndex = window.location.href.indexOf('#');
        if (separatorIndex!=-1) {
            var paramsStr = window.location.href.substr(separatorIndex+1);
            this.values = paramsStr.toQueryParams();
            this.settings.each(function(element){
                var attributeId = element.attributeId;
                element.value = this.values[attributeId];
                this.configureElement(element);
            }.bind(this));
        }
    },

    configure: function(event){
        var element = Event.element(event);
        this.configureElement(element);
    },

    configureElement : function(element) {
        this.reloadOptionLabels(element);
        if(element.value){
            this.state[element.config.id] = element.value;
            if(element.nextSetting){
                element.nextSetting.disabled = false;
                this.fillSelect(element.nextSetting);
                this.resetChildren(element.nextSetting);
            }
        }
        else {
            this.resetChildren(element);
        }
        this.reloadPrice();
//      Calculator.updatePrice();
        /***** Load Associated Image : This should come after this.resetChildren is called *****/

    // If an option doesnt have a value attribute, it'll take its innerHTML as its value - hence the reason for || element.value.substr(0,6) == 'choose'
    if (!element.value || element.value.substr(0,6) == 'choose') return; // Selected "choose option"
    var attributeId = element.id.replace(/[a-z]*/, '');
    for (var a in this.config.attributes)
    {
        for (i = 0; i < this.config.attributes[a].options.length; i++)
        {
            if (this.config.attributes[a].options[i].id != element.value) continue;
            selectedAssocProducts[a] = this.config.attributes[attributeId].options[i].products;

        }
    }

        var productNo = selectedAssocProductsImg(selectedAssocProducts) || selectedAssocProducts[attributeId][0];
        var changeImg = document.getElementsByClassName("normalimg");
        var changeBigImg = document.getElementsByClassName("masterzoom");
        var associatedProductImg= assocIMG[productNo] ;
        var associatedProductBigImg= assocBIGIMG[productNo] ;

        /*var i__;
        for (i__ = 0; i__ < changeImg.length; i__++) {
            changeImg[i__].src=associatedProductImg;
        }
        for (i__ = 0; i__ < changeBigImg.length; i__++) {
            changeBigImg[i__].href=associatedProductBigImg;
        }*/
        if(typeof _xtemp !== 'undefined' && typeof associatedProductImg !== 'undefined'){

            this.appendBigImg(associatedProductBigImg);
            jQuery('.zoomPad').unbind().remove();

            _dfi++;
            ne = _xtemp.replace(/xxx/g, _dfi).replace(/xxsmall/g, associatedProductImg).replace(/xxbig/g, associatedProductBigImg);
            net = _xttemp.replace(/xxx/g, _dfi);
            jQuery(".product-image").html(ne);
            jQuery(".more-views").html("<ul id='gal"+_dfi+"'>" + net + "</ul>");
            jQuery('#gal'+_dfi).bxSlider({
                auto: false,
                mode: 'vertical',
                minSlides: 4,
                maxSlides: 4,
                nextText: '',
                prevText: '',
                pager: false,
                preloadImages:'all',
                hideControlOnEnd: true,
                infiniteLoop: false
            });

             setTimeout(function(){
             jQuery('.jqzoom'+_dfi).jqzoom({
               zoomType: 'reverse',
               lens:true,
               preloadImages: false,
               alwaysOn:false,
               zoomWidth: 478,
               zoomHeight: 497,
             });
             }, 100);
        }
    },

    appendBigImg:function(url){
        /*jQuery('.jqzoom').removeData('jqzoom');
        jQuery('.jqzoom').unbind();
        jQuery('.zoomPup').unbind();
        jQuery('#gal1').find('img').unbind();
        jQuery('#gal1').find('a').unbind();

        _BigImg = new Image();
        _BigImg.style.position = 'absolute';
        _BigImg.style.border = '0px';
        _BigImg.style.display = 'block';
        _BigImg.style.left = '-5000px';
        _BigImg.style.top = '0px';
        document.body.appendChild(_BigImg);
        _BigImg.src = url; // fires off async
        this.fetchBigImg();*/
    },

    fetchBigImg:function(){
        _BigImg.style.left = '0px';
        document.body.removeChild(_BigImg);
        document.getElementById('zwi').innerHTML = "";
        document.getElementById('zwi').appendChild( _BigImg);

        i = jQuery('#jqzomm-masterimg').clone();
        jQuery('.jqzoom').html( i.prop('outerHTML') );
        jQuery('.jqzoom').jqzoom({
           zoomType: 'reverse',
           lens:true,
           preloadImages: false,
           alwaysOn:false,
           zoomWidth: 478,
           zoomHeight: 497,
         });


    },

    reloadOptionLabels: function(element){
        var selectedPrice;
        if(element.options[element.selectedIndex].config){
            selectedPrice = parseFloat(element.options[element.selectedIndex].config.price)
        }
        else{
            selectedPrice = 0;
        }
        for(var i=0;i<element.options.length;i++){
            if(element.options[i].config){
                element.options[i].text = this.getOptionLabel(element.options[i].config, element.options[i].config.price-selectedPrice);
            }
        }
    },

    resetChildren : function(element){
        if(element.childSettings) {
            for(var i=0;i<element.childSettings.length;i++){
                element.childSettings[i].selectedIndex = 0;
                element.childSettings[i].disabled = true;
                if(element.config){
                    this.state[element.config.id] = false;
                }
            }
        }
    },

    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 = [];
                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]);
                        }
                    }
                } else {
                    allowedProducts = options[i].products.clone();
                }

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

    getOptionLabel: function(option, price){
        var price = parseFloat(price);
        if (this.taxConfig.includeTax) {
            var tax = price / (100 + this.taxConfig.defaultTax) * this.taxConfig.defaultTax;
            var excl = price - tax;
            var incl = excl*(1+(this.taxConfig.currentTax/100));
        } else {
            var tax = price * (this.taxConfig.currentTax / 100);
            var excl = price;
            var incl = excl + tax;
        }

        if (this.taxConfig.showIncludeTax || this.taxConfig.showBothPrices) {
            price = incl;
        } else {
            price = excl;
        }

        var str = option.label;
        if(price){
            if (this.taxConfig.showBothPrices) {
                str+= ' ' + this.formatPrice(excl, true) + ' (' + this.formatPrice(price, true) + ' ' + this.taxConfig.inclTaxTitle + ')';
            } else {
                str+= ' ' + this.formatPrice(price, true);
            }
        }
        return str;
    },

    formatPrice: function(price, showSign){
        var str = '';
        price = parseFloat(price);
        if(showSign){
            if(price<0){
                str+= '-';
                price = -price;
            }
            else{
                str+= '+';
            }
        }

        var roundedPrice = (Math.round(price*100)/100).toString();

        if (this.prices && this.prices[roundedPrice]) {
            str+= this.prices[roundedPrice];
        }
        else {
            str+= this.priceTemplate.evaluate({price:price.toFixed(2)});
        }
        return str;
    },

    clearSelect: function(element){
        for(var i=element.options.length-1;i>=0;i--){
            element.remove(i);
        }
    },

    getAttributeOptions: function(attributeId){
        if(this.config.attributes[attributeId]){
            return this.config.attributes[attributeId].options;
        }
    },

    reloadPrice: function(){
        var price = 0;
        for(var i=this.settings.length-1;i>=0;i--){
            var selected = this.settings[i].options[this.settings[i].selectedIndex];
            if(selected.config){
                price += parseFloat(selected.config.price);
            }
        }

        optionsPrice.changePrice('config', price);
        optionsPrice.reload();

        return price;

        if($('product-price-'+this.config.productId)){
            $('product-price-'+this.config.productId).innerHTML = price;
        }
        this.reloadOldPrice();
    },

    reloadOldPrice: function(){
        if ($('old-price-'+this.config.productId)) {

            var price = parseFloat(this.config.oldPrice);
            for(var i=this.settings.length-1;i>=0;i--){
                var selected = this.settings[i].options[this.settings[i].selectedIndex];
                if(selected.config){
                    price+= parseFloat(selected.config.price);
                }
            }
            if (price < 0)
                price = 0;
            price = this.formatPrice(price);

            if($('old-price-'+this.config.productId)){
                $('old-price-'+this.config.productId).innerHTML = price;
            }

        }
    }
}
function selectedAssocProductsImg(selectedAssocProduct) // passing associated image array here
    {
        if (selectedAssocProduct == null) return false;

        var newselectedAssocProduct = new Array();
        if (selectedAssocProduct.length == undefined) // push all data in new array if more than one images
        {
            for (var i in selectedAssocProduct)
             newselectedAssocProduct.push(selectedAssocProduct[i]);
        }
        else
         newselectedAssocProduct = selectedAssocProduct;

        if (newselectedAssocProduct.length == 1) return false; // return false if array legth 1
      var finalImgArray = new Array();
        function eachAttribute(newselectedAssocProduct, iIndex, jIndex, JnextIndex)
        {
            if (iIndex == null) iIndex = 0;
            if (jIndex == null) jIndex = 0;
            if (JnextIndex == null) JnextIndex = newselectedAssocProduct[iIndex].length;
            if (iIndex == newselectedAssocProduct.length - 1) return;
            for (var i = jIndex; i < JnextIndex; i++)
            {
                if (finalImgArray.indexOf(newselectedAssocProduct[iIndex][i]) != -1) continue;
                for (var j = 0; j < newselectedAssocProduct[iIndex + 1].length; j++)
                {
                    if (newselectedAssocProduct[iIndex][i] != newselectedAssocProduct[iIndex+1][j]) continue;
                    eachAttribute(newselectedAssocProduct, iIndex + 1, j, j + 1);
                    if (iIndex + 1 == newselectedAssocProduct.length - 1) { finalImgArray.push(newselectedAssocProduct[iIndex][i]); break; }
                }
            }
        }

        eachAttribute(newselectedAssocProduct);
        return finalImgArray;
    }