var MatchingProduct = Class.create();
MatchingProduct.prototype = {
    initialize: function(productType, baseUrl, param){
        this.productType = productType;
        this.page = 1;
        this.baseUrl = baseUrl;
        this.result = null;
        this.param = param;
    },

    loadDiamonds: function(){
        $('diamond-loading').setStyle({'display':'inline'});
        params = $('diamond_compact_filter_form').serialize() + "&limit=15";
        params += "&p=" + this.page;
        if (typeof(pageTracker) != 'undefined') {
            pageTracker._trackPageview('/diamonds/index/ajax?' + params);
        }
        new Ajax.Request(
            '/diamonds/index/ajax',
            {
                method:'post',
                parameters: params,
                onComplete: this.showDiamondList.bind(this)
            }
        );
    },

    creatLayer: function(){
        overlay = $('overlayDiv');
        if (!overlay) {
            overlay = document.createElement('div');
            overlay.setAttribute('id', 'overlayDiv');
            var body = document.getElementsByTagName('body')[0];
            body.appendChild(overlay);
            $('overlayDiv').update('<p id="loading-mask" class="loader"><img alt="Loading..." src="' + this.baseUrl + 'skin/frontend/default/JB/images/ajax-loader.gif"></p>');
        } else {
            Element.setStyle($('loading-mask'), {display: 'block'});
            Element.setStyle($('overlayDiv'), {opacity : '0.6'});
        }

        overlay.style.height = document.documentElement.scrollHeight + "px";
        Element.setStyle(overlay, {'display':'block'});
    },

    showDiamondList: function(response){
        this.result = response.responseText.evalJSON(true);
        toolbar = '<div class="toolbar"><div class="stats">' + this.result['rowStats'] + '</div>';
        toolbar += '<div class="pager">' + this.result['pageStats'] + '</div><div class="clear"></div></div>';
        items = this.result['collection'];
        content = '<table cellpadding="0" cellspacing="0"><tbody>';
        if (items.length > 0) {
            for (i=0; i < items.length; i++) {
                styleClass = '';
                if ( i%2 == 0) {
                    styleClass = "special"
                }
                trContent = '<tr class=" ' + styleClass + ' " onclick="javascript:window.location.href=\''+ this.baseUrl + 'JB_Catalog/product/matching/id/' + items[i]['id'] + '/matchingId/' + $('productId').value +'\';">';
                trContent += '<td class="first"><img style="vertical-align:middle" src="' + items[i]['pictrue'] +  '"/><span style="vertical-align:middle">&nbsp;' + items[i]['diamond_shape'] + '</span></td>';
                trContent += '<td>' + items[i]['diamond_size'] + '.ct</td>';
                trContent += '<td>' + items[i]['diamond_color'] + '</td>';
                trContent += '<td>' + items[i]['diamond_clarity'] + '</td>';
                trContent += '<td class="price">$' + items[i]['price'] + '</td>';
                trContent += '<td class="last"><button class="button-small-light" type="reset" onclick="javascript:window.location.href=\''+ this.baseUrl + 'JB_Catalog/product/matching/id/' + items[i]['id'] + '/matchingId/' + $('productId').value +'\';"><span>Select</span></button></td>';
                trContent += '</tr>';
                content += trContent;
            }
            content += '</tbody></table>';
            content += toolbar;
        } else {
            content = '<div class="note-msg">Your search returns no results.</div>';
        }
        Element.setStyle($('overlayDiv'), {opacity : '0.4'});
        $('diamond-listing').update(content);

        if (Element.getStyle($('compact-diamond-search'),'display') == "none") {
            Element.setStyle($('compact-diamond-search'), {display : 'block'});
            $('diamond_start_price_text').value = '$' + this.result['param']['price']['start'];
            $('diamond_end_price_text').value = '$' + this.result['param']['price']['end'];
            initialClarityCompactSlider(this.result['param']['diamond_clarity']['min'], this.result['param']['diamond_clarity']['max']);
            initialColorCompactSlider(this.result['param']['diamond_color']['min'], this.result['param']['diamond_color']['max']);
            initialCutCompactlider(this.result['param']['diamond_cut']['min'], this.result['param']['diamond_cut']['max']);
            initialPolishCompactSlider(this.result['param']['diamond_polish']['min'], this.result['param']['diamond_polish']['max']);
            initialSymmetryCompactSlider(this.result['param']['diamond_sym']['min'], this.result['param']['diamond_sym']['max']);
            initialPriceCompactSlider(this.result['price']['min_price'], this.result['price']['max_price'], this.result['price']['start_price'], this.result['price']['end_price']);
            Element.remove($('firstMatching'));
        }
        Element.setStyle($('loading-mask'), {display:'none'});
        Element.setStyle($('diamond-loading'), {display:'none'});
    },

    loadRings: function() {
        $('ring-loading').setStyle({'display':'inline'});
        params = $('ring_compact_filter_form').serialize();
        params += "&matchingPageNum=" + this.page;
        if (typeof(pageTracker) != 'undefined') {
            pageTracker._trackPageview('/JB_Catalog/product/getProductMatchings?' + params);
        }

        new Ajax.Request(
            '/JB_Catalog/product/getProductMatchings',
            {
                method: 'post',
                parameters: params,
                onComplete: this.initialRingsFilter.bind(this)
            }
        );
    },

    initialRingsFilter: function(response) {
        this.result = response.responseText.evalJSON();
        if (this.result) {
            if (Element.getStyle($('compact-ring-search'),'display') == "none") {
                $('ring_start_price_text').value = '$' + this.result['price_min'];
                $('ring_end_price_text').value = '$' + this.result['price_max'];
                styleArray = $H(this.result['style']);
                styleString = '<li style="padding:3px"><input id="style-any" class="any" type="checkbox" checked="checked" style="margin-right:5px"/><a><label for="style-any" style="cursor: pointer;">Any</label></a></li>';
                styleArray.each(function(e){
                     styleString += '<li>';
                     styleString += '<input id="style' + e.key + '" name="style[]" value="' + e.key + '" type="checkbox" style="margin-right:5px"/>';
                     styleString += '<a><label for="style' + e.key + '" style="cursor: pointer;">' + e.value + '</label></a>';
                     styleString += '</li>';
                });
                     $('list-ring-style').update(styleString);
                     metalArray = $H(this.result['metal']);
                     metalString = '<li style="padding:3px"><input id="metal-any" class="any" type="checkbox" checked="checked" style="margin-right:5px"/><a><label for="metal-any" style="cursor: pointer;">Any</label></a></li>';
                     metalArray.each(function(e){
                     metalString += '<li>';
                     metalString += '<input id="metal_type' + e.key + '" name="metal_type[]" value="' + e.key + '" type="checkbox" style="margin-right:5px"/>';
                     metalString += '<a><label for="metal_type' + e.key + '" style="cursor: pointer;">' + e.value + '</label></a>';
                     metalString += '</li>';
                 });
                 $('list-metal-style').update(metalString);

                 initialLink();
                 this.showRingList();
                 Element.setStyle($('compact-ring-search'), {display:'block'});
                 initialRingPriceCompactSlider(this.result['price_min_slider'], this.result['price_max_slider']);
            } else {
                 this.showRingList();
            }
        }

    },

    showRingList: function() {
        toolbar = '<div class="toolbar"><div class="stats">' + this.result['rowStats'] + '</div>';
        toolbar += '<div class="pager">' + this.result['pageStats'] + '</div><div class="clear"></div></div>';
        items = this.result['collection'];
        content = '<table cellpadding="0" cellspacing="0"><tbody>';

        if (items.length > 0) {
            for (i=0; i < items.length; i++) {
                trContent = '<tr onclick="javascript:window.location.href=\'' + this.baseUrl + 'JB_Catalog/product/matching/id/' + items[i]['id'] + '/matchingId/' + this.result['product_id'] +'\';">';
                trContent += '<td class="first"><img style="vertical-align:middle" src="' + items[i]['thumbnail'] +  '"/><span style="vertical-align:middle">&nbsp;' + items[i]['title'] + '</span></td>';
                trContent += '<td class="price">' + items[i]['price'] + '</td>';
                trContent += '<td class="last"><button class="button-small-light" style="*background-position: left 2px;" type="reset" onclick="javascript:window.location.href=\'' + this.baseUrl + 'JB_Catalog/product/matching/id/' + items[i]['id'] + '/matchingId/' + this.result['product_id'] +'\';"><span>Select</span></button></td>';
                trContent += '</tr>';
                content += trContent;
            }
            content += '</tbody></table>';
            content += toolbar;
        } else {
            content = '<div class="note-msg">Your search returns no results.</div>';
        }
        Element.setStyle($('overlayDiv'), {opacity : '0.4'});
        $('ring-listing').update(content);
        Element.setStyle($('loading-mask'), {display:'none'});
        $('ring-loading').setStyle({'display':'none'});
    },

    initialDafaultConditionForRing: function() {
        defaultConditionString = '<input type="text" class="hidden" value="' + this.param + '" name="productId"/>';
        $('ring_default_condition').update(defaultConditionString);
    },

    initialDefaultConditionForDiamond: function() {
        defaultString = '';
        if (Object.isArray(this.param['diamond_shape'])) {
            for(i=0;i<this.param['diamond_shape'].length;i++) {
                defaultString += '<input class="hidden" name="diamond_shape[]" checked="checked" value="' + this.param['diamond_shape'][i] + '" type="checkbox">';
            }
        } else {
            defaultString += '<input class="hidden" name="diamond_shape[]" checked="checked" value="' + this.param['diamond_shape'] + '" type="checkbox">';
        }
        defaultString += '<input class="hidden" id="diamond_width_range" name="diamond_width" value="' + this.param['diamond_width'] + '" checked="checked" type="checkbox">';
        defaultString += '<input class="hidden" id="diamond_width_range" name="diamond_length" value="' + this.param['diamond_length'] + '" checked="checked" type="checkbox">';
        defaultString += '<input id="productId" type="hidden" value="' + this.param['product_id'] + '"/>';
        defaultString += '<input id="firstMatching" name="firstMatching" type="hidden" value="1"/>';
        $('default_condition').update(defaultString);
    },

    loadMatchingProduct: function(page) {
        if (page) {
            this.page = page;
        }
        if(this.productType == "diamond") { 
            this.loadDiamonds();
        } else if (this.productType == "ring"){
            this.loadRings();
        }
    },

    initialDefaultCondtitionAndLoad: function(){
        this.creatLayer();
        if(this.productType == "diamond") {
            if ($('diamond-listing').innerHTML.blank()) {
                this.initialDefaultConditionForDiamond();
                this.loadMatchingProduct();
            } else {
                Element.setStyle($('overlayDiv'), {opacity : '0.4'});
                Element.setStyle($('overlayDiv'), {'display':'block'});
                Element.setStyle($('loading-mask'), {display: 'block'});
                Element.setStyle($('compact-diamond-search'), {display:'block'});
            }
        } else if (this.productType == "ring"){
            if ($('ring-listing').innerHTML.blank()) {
                this.initialDafaultConditionForRing();
                this.loadMatchingProduct();
            } else {
                Element.setStyle($('overlayDiv'), {opacity : '0.4'});
                Element.setStyle($('overlayDiv'), {'display':'block'});
                Element.setStyle($('loading-mask'), {display: 'block'});
                Element.setStyle($('compact-ring-search'), {display:'block'});
            }
        }
    }
}