﻿YAHOO.namespace("SitNSleep.Widget");
options = 0;
(function() {

    var ADD_TO_CART_URL = "/cart/add?";
    var PRODUCT_FORM_KEY = "productId=";
    var OPTION_FORM_KEY = "optionId=";
    var PRODUCT_ID_KEY = "productId";
    var OPTION_ID_KEY = "optionId";
    var SELECTED_CLASS_NAME = "HollowSlideSelected";
    var IMAGE_COLUMN_KEY = "imageUrl";
    var TITLE_KEY = "title";
    var SIZE_KEY = "size";
    var BRAND_KEY = "brand";
    var COMFORT_LEVEL_KEY = "comfortLevel";
    var TECHNOLOGY_KEY = "technology";
    var PRICE_KEY = "priceWithOption";
    var PRICE_MSRP_KEY = "priceMSRP";
    var OPTION_PRICE_KEY = "optionPrice";
    var OPTION_LABEL_KEY = "optionLabel";
    var PRODUCT_LABEL_KEY = "optionLabel";
    var URL_KEY = "url";
    var TEASER_KEY = "teaser";

    //  YAHOO.widget.DataTable.Formatter['priceAndCart'] = function(el, oRecord, oColumn, oData) {
    //    var hasOption = (oRecord.getData(OPTION_LABEL_KEY) && "" != oRecord.getData(OPTION_LABEL_KEY));
    //    var hasProduct = (oRecord.getData(PRODUCT_LABEL_KEY) && "" != oRecord.getData(PRODUCT_LABEL_KEY));
    //    options = this.get("currencyOptions");
    //    el.innerHTML = "<div class='Price'>"
    //      + YAHOO.util.Number.format(oData, oColumn.currencyOptions || this.get("currencyOptions"))
    //      + "</div>"
    //      + ((hasProduct && hasOption) ? "<div class='Description'> with " + oRecord.getData(OPTION_LABEL_KEY) + "</div>" : "")
    //      + "<div class='AddToCart'><a href='" + ADD_TO_CART_URL 
    //      + PRODUCT_FORM_KEY + oRecord.getData(PRODUCT_ID_KEY) + "&" 
    //      + OPTION_FORM_KEY + oRecord.getData(OPTION_ID_KEY) 
    //      + "'><img src='/images/32q32ww32wq2w2w1qw12wdsa'/></a></div>"
    //      + "<div class='Details'><a href='" + oRecord.getData(URL_KEY) + "'>More Options</a></div>";
    //  };

    YAHOO.widget.DataTable.Formatter['priceAndCart'] = function(el, oRecord, oColumn, oData) {
        var hasOption = (oRecord.getData(OPTION_LABEL_KEY) && "" != oRecord.getData(OPTION_LABEL_KEY));
        var hasProduct = (oRecord.getData(PRODUCT_LABEL_KEY) && "" != oRecord.getData(PRODUCT_LABEL_KEY));
        var msrp = oRecord.getData(PRICE_MSRP_KEY);

        options = this.get("currencyOptions");


        //@@PRODUCT SELECTED
        if (msrp > 0.0) {
            el.innerHTML = "<div class='SalePrice'>"
              + YAHOO.util.Number.format(oData, oColumn.currencyOptions || this.get("currencyOptions"))
              + "</div>"
               + "<div class='Description'>Regularly: <span class='StrikeThrough'>" + oRecord.getData(PRICE_MSRP_KEY) + "</span></div>"
              + ((hasProduct && hasOption) ? "<div class='Description'> with " + oRecord.getData(OPTION_LABEL_KEY) + "</div>" : "")
              + "<div class='AddToCart'><a href='" + oRecord.getData(URL_KEY) + "?size=" + oRecord.getData(SIZE_KEY)
              + "'><img src='/images/getmoreinfobutton.jpg'/></a></div>"
              + "<div class='Details'><a href='" + ADD_TO_CART_URL
              + PRODUCT_FORM_KEY + oRecord.getData(PRODUCT_ID_KEY) + "&"
              + OPTION_FORM_KEY + oRecord.getData(OPTION_ID_KEY) + "'>Add to Cart</a></div>";

        }
        else {
            el.innerHTML = "<div class='Price'>" + YAHOO.util.Number.format(oData, oColumn.currencyOptions || this.get("currencyOptions"))
              + "</div>"
              + ((hasProduct && hasOption) ? "<div class='Description'> with " + oRecord.getData(OPTION_LABEL_KEY) + "</div>" : "")
              + "<div class='AddToCart'><a href='" + oRecord.getData(URL_KEY) + "?size=" + oRecord.getData(SIZE_KEY)
              + "'><img src='/images/getmoreinfobutton.jpg'/></a></div>"
              + "<div class='Details'><a href='" + ADD_TO_CART_URL
              + PRODUCT_FORM_KEY + oRecord.getData(PRODUCT_ID_KEY) + "&"
              + OPTION_FORM_KEY + oRecord.getData(OPTION_ID_KEY) + "'>Add to Cart</a></div>";


        }
    };


   

        YAHOO.widget.DataTable.Formatter['imageForUrl'] = function(el, oRecord, oColumn, oData) {
        var imgUrl = (null != oData) ? oData : "/images/noImage_140x80.gif";
        var msrp = oRecord.getData(PRICE_MSRP_KEY);
            
             if (msrp > 0.0) {            
                    el.innerHTML = "<span class='ImageLink'><a href='" + oRecord.getData(URL_KEY)
              + "'><img src='" + imgUrl + "' alt=''/></a></span>"
              + "<h5 class='TitleLink'><a href='" + oRecord.getData(URL_KEY) + "'>"
              + oRecord.getData(TITLE_KEY)
              + "</a><img style='float:right' src='/images/sale_white_55x22.gif' alt='' height='22px' width='55px'/></h5>"
              + "<p class='Teaser'>" + oRecord.getData(TEASER_KEY) + "</p>";                

            }
            else 
            {                
                    el.innerHTML = "<span class='ImageLink'><a href='" + oRecord.getData(URL_KEY)
              + "'><img src='" + imgUrl + "' alt=''/></a></span>"
              + "<h5 class='TitleLink'><a href='" + oRecord.getData(URL_KEY) + "'>"
              + oRecord.getData(TITLE_KEY)
              + "</a></h5>"
              + "<p class='Teaser'>" + oRecord.getData(TEASER_KEY) + "</p>";
           }
        };

    

    YAHOO.widget.DataTable.Formatter['specs'] = function(el, oRecord, oColumn, oData) {
        el.innerHTML = "<dl><dt>Technology:</dt><dd>" + oRecord.getData(TECHNOLOGY_KEY) + "</dd>"
      + "<dt>Comfort Level:</dt><dd>" + oRecord.getData(COMFORT_LEVEL_KEY) + "</dd>"
      + "<dt>Size:</dt><dd>" + oRecord.getData(SIZE_KEY) + "</dd>"
      + "</dl>";
    };

    YAHOO.widget.DataTable.Formatter['titleWithLink'] = function(el, oRecord, oColumn, oData) {
        el.innerHTML = "<span class='TitleLink'><a href='" + oRecord.getData(URL_KEY) + "'>"
      + oRecord.getData(TITLE_KEY)
      + "</a></span>";
    };

    YAHOO.SitNSleep.Widget.MattressFinder = function(widgetForm, cfg) {
        var cfg = (null == cfg) ? {} : cfg;

        this.slider = {
            range: 150,
            tickSize: 5,
            minThumbDistance: 4,
            conversionFactor: (3000 / 150),
            background: YAHOO.util.Dom.get("slider_bg"),
            info: YAHOO.util.Dom.get("slider_info"),
            from: YAHOO.util.Dom.get("slider_from_raw"),
            to: YAHOO.util.Dom.get("slider_to_raw"),
            from_out: YAHOO.util.Dom.get("slider_from"),
            to_out: YAHOO.util.Dom.get("slider_to")
        }

        this.slider.initValues = [(cfg.priceLow) ? this.convertToSliderValue(cfg.priceLow) : 0, (cfg.priceHigh) ? this.convertToSliderValue(cfg.priceHigh) : 150],

    this.slider.control = YAHOO.widget.Slider.getHorizDualSlider(this.slider.background,
        "slider_min_thumb", "slider_max_thumb",
        this.slider.range, this.slider.tickSize, this.slider.initValues);

        this.slider.control.minRange = this.slider.minThumbDistance;


        this.slider.control.subscribe('ready', this.updateSliderValues, this, true);
        this.slider.control.subscribe('change', this.updateSliderValues, this, true);
        this.updateSliderValues();

        this.widgetForm = YAHOO.util.Dom.get(widgetForm);
        this.columnDefs = [
        { key: IMAGE_COLUMN_KEY, formatter: 'imageForUrl', label: "Mattress" },
        { key: TECHNOLOGY_KEY, formatter: 'specs', sortable: true, label: "Specs" },
        { key: PRICE_KEY, formatter: 'priceAndCart', sortable: true, label: "Price" }
    ];

        this.findButton = YAHOO.util.Dom.get("findButton");

        this.dataSource = new YAHOO.util.DataSource("/mattresses/finder/find?");
        this.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        this.dataSource.connXhrMode = "queueRequests";
        this.dataSource.connMgr.setForm(this.widgetForm);
        this.dataSource.responseSchema = {
            resultsList: "records",
            fields: [
            IMAGE_COLUMN_KEY,
            TITLE_KEY,
            SIZE_KEY,
            BRAND_KEY,
            TECHNOLOGY_KEY,
            COMFORT_LEVEL_KEY,
            { key: PRICE_KEY, parser: "number" },
             { key: PRICE_MSRP_KEY, parser: "number" },
            URL_KEY,
            { key: OPTION_PRICE_KEY, parser: "number" },
            OPTION_LABEL_KEY,
            PRODUCT_LABEL_KEY,
            OPTION_ID_KEY,
            PRODUCT_ID_KEY,
            TEASER_KEY
        ],
            metaFields: {
                totalRecords: "totalRecords",
                sortKey: "sort",
                sortDir: "dir"
            }
        };

        this.dataTable = new YAHOO.widget.DataTable("json", this.columnDefs, this.dataSource, {});

        this.callbackObj = {
            success: this.dataTable.onDataReturnReplaceRows,
            failure: this.handleFailure,
            scope: this.dataTable,
            argument: {}
        };

        this.dataTable.doBeforeLoadData = function(oRequest, oResponse, oPayload) {
            var meta = oResponse.meta;
            if (null != oPayload) {
                oPayload.sortedBy = {
                    key: meta.sortKey || PRICE_KEY,
                    dir: (meta.sortDir) ? "yui-dt-" + meta.sortDir : "yui-dt-asc" // Convert from server value to DataTable format
                };
            }
            return true;
        };

        YAHOO.util.Event.addListener(this.findButton, "click", this.handleFindButtonClick, this, true);
    };

    YAHOO.SitNSleep.Widget.MattressFinder.prototype = {
        // executed in this.dataTable scope
        handleSuccess: function(arguments) {
            this.onDataReturnSetRows.apply(this, arguments);
        },

        // executed in this.dataTable scope
        handleFailure: function() {
            this.showTableMessage(YAHOO.widget.DataTable.MSG_ERROR, YAHOO.widget.DataTable.CLASS_ERROR);
            this.onDataReturnReplaceRows.apply(this, arguments);
        },

        handleFindButtonClick: function(ev) {
            YAHOO.util.Event.preventDefault(ev);
            this.doRequest();
        },

        doRequest: function() {
            this.dataTable.showTableMessage(this.dataTable.get("MSG_LOADING"), YAHOO.widget.DataTable.CLASS_LOADING);
            this.dataSource.connMgr.setForm(this.widgetForm);
            this.dataSource.sendRequest(null, this.callbackObj);
        },

        convertSliderValue: function(val) {
            return Math.round(val * this.slider.conversionFactor) + 99;
        },

        convertToSliderValue: function(val) {
            return Math.max(0, Math.round((val - 99) / this.slider.conversionFactor));
        },

        updateSliderValues: function() {
            this.slider.from.value = this.slider.control.minVal;
            this.slider.to.value = this.slider.control.maxVal;

            // Update the converted values and the slider's title.
            // Account for the thumb width offsetting the value range by
            // subtracting the thumb width from the max value.
            var min = this.convertSliderValue(this.slider.control.minVal),
            max = this.convertSliderValue(this.slider.control.maxVal);

            max += 1;
            this.slider.from_out.value = (99 >= min) ? 0 : min;
            this.slider.to_out.value = (3099 <= max) ? "" : max;

            min = (99 >= min) ? "$" + 0 : "$" + min;
            max = (3099 <= max) ? "none" : "$" + max;
            this.slider.info.innerHTML = "Min: <strong>" + min + "</strong> &nbsp;" +
                         "Max: <strong>" + max + "</strong>";
            this.slider.background.title = "Current range " + min + " - " + max;

        }
    };

})();


