﻿Type.registerNamespace('PhotoSite');

var giftService = null;
var productView = null;

function initServiceView()
{
    if (!giftService)
    {
        giftService = new IGiftService();
    }
    
    if (!productView)
    {
        productView = new PhotoSite.ProductViewContainer();
    }
}

function GetProductCategory(encCategoryID)
{
    document.getElementById('priceRange').style.display = 'none';
    showLoadingPopup(res_loadingText);
    initServiceView();
    giftService.GetCategoryProductList(encCategoryID, OnGotProductCategoryResult, gotError);
}

function GetProductSearch(searchText, placementID)
{
    document.getElementById('priceRange').style.display = 'none';
    showLoadingPopup(res_loadingText);
    initServiceView();
    giftService.GetProductListBySearch(searchText, placementID, OnGotProductSearchResult, gotError);
}

function OnGotProductCategoryResult(result)
{
    if (result)
    {
        RenderProductCategorySearchResults(Sys.Serialization.JavaScriptSerializer.deserialize(result));
    }
}

function OnGotProductSearchResult(result)
{
    if (result)
    {
        var info = Sys.Serialization.JavaScriptSerializer.deserialize(result);
        
        RenderProductCategorySearchResults(info);
        
        if (info.Products.length == 0)
        {
            var resultDiv = document.getElementById('div_product_thumbs');
            resultDiv.innerHTML = '<img src="' + res_noResultsImg + '" />';
        }
    }
}

function RenderProductCategorySearchResults(result)
{
    hideLoadingPopup();
       
    productView.clear();

        
    if (result.Products)
    {
        for (var i = 0; i < result.Products.length; ++i)
        {
            productView.addProduct(result.Products[i]);
        }
    }

    if (result.SubCategories) {
        for (var i = 0; i < result.SubCategories.length; ++i) {
            productView.addCategory(result.SubCategories[i]);
        }
    }

    if (result.KeywordGroups)
    {
        for (var i = 0; i < result.KeywordGroups.length; i++)
        {
            productView.addKeywordGroup(result.KeywordGroups[i]);
        }
    }

    productView.render();

    //
    // Look for a keywords value in the query string, if found set the appropriate filters for that category...
    //
    var queryString = location.search.substring(1, location.search.length);
    var keywordIndex = queryString.indexOf('keywords=');

    if (keywordIndex > -1)
    {
        var keywords = queryString.substring(keywordIndex + ('keywords=').length);
        var split = (unescape(keywords).replace(/\+/g, ' ')).split('_');

        for (var i = 0; i < split.length; i += 2)
        {
            productView.setFilterValue(split[i], split[i + 1]);
        }
    }
}

//
// Product View Container
//

PhotoSite.ProductViewContainer = function() {
    this.products = new Array;
    this.keywords = new Array;
    this.categories = new Array;
}

PhotoSite.ProductViewContainer.prototype =
{
    products: null,
    keywords: null,
    recurseCount: 0,

    clear: function()
    {
        this.products = new Array;
        this.keywords = new Array;
        this.categories = new Array;
    },

    addProduct: function(product)
    {
        var pv = new PhotoSite.ProductView(product, this.products.length == 0);
        this.products.push(pv);
    },

    addCategory: function(category)
    {
        var pv = new PhotoSite.ProductView(category, this.categories.length == 0);
        pv._type = 'Category';
        pv._productPlacementID = category.ProductPlacementID;
        this.categories.push(pv);
    },

    addKeywordGroup: function(group)
    {
        var kg = new PhotoSite.ProductFilter(group);
        kg.setOnOptionChangedCallback(this, this.onOptionsChanged);
        this.keywords.push(kg);
    },

    setFilterValue: function(groupName, value, loPrice, hiPrice, eCategoryID)
    {
        for (var i = 0; i < this.keywords.length; i++)
        {
            if (this.keywords[i].getGroupName() == groupName)
            {
                this.keywords[i].setSelectedValue(value);
            }
        }

        this.onOptionsChanged(groupName, loPrice, hiPrice, eCategoryID);
    },

    onOptionsChanged: function(groupName, loPrice, hiPrice, eCategoryID)
    {
        var keys = new Array;
        var resetSelectedFilter = false;
        var selectedFilter = null;
        var duplicates = new Array();


        for (var i = 0; i < this.keywords.length; i++)
        {
            var key = this.keywords[i].getSelectedValue();

            if (key.length > 0)
            {
                keys.push(key);
                selectedFilter = this.keywords[i];
            }
            else if (this.keywords[i].getGroupName() == groupName)
            {
                resetSelectedFilter = true;
            }
        }

        if (resetSelectedFilter == true && selectedFilter != null)
        {
            groupName = selectedFilter.getGroupName();
        }

        var visibleProductCount = this.products.length;


        for (var i = 0; i < this.categories.length; i++)
        {
            //filter does not apply to categories
            this.categories[i].hide();
        }

        
        for (var i = 0; i < this.products.length; i++)
        {
            var showProduct = true;


            //do keyword filtering
            for (var j = 0; j < keys.length; j++)
            {
                if (this.products[i].hasKeyword(keys[j]) == false)
                {
                    showProduct = false;
                    visibleProductCount--;
                    break;
                }
            }

            //do price filtering
            if (showProduct && (hiPrice || loPrice))
            {
                if (this.products[i]._product.Price > 0)
                    if (this.products[i]._product.Price < loPrice || this.products[i]._product.Price > hiPrice)
                {
                    showProduct = false;
                    visibleProductCount--;
                }
            }

            //do category filtering
            if (showProduct && eCategoryID)
            {
                if (this.products[i]._product.eParentCategory != eCategoryID)
                {
                    showProduct = false;
                    visibleProductCount--;
                }
            }

            //filter out duplicates
            if (showProduct)
                if (duplicates[this.products[i]._product.ID] != null)
            {
                showProduct = false;
                visibleProductCount--;
            }
            duplicates[this.products[i]._product.ID] = true;


            showProduct ? this.products[i].show() : this.products[i].hide();
        }

        var noProducts = document.getElementById('no_products');
        var resultDiv = document.getElementById('div_product_thumbs');


        if (noProducts) noProducts.style.display = (visibleProductCount <= 0) ? 'block' : 'none';
        if (resultDiv) resultDiv.style.display = (visibleProductCount > 0) ? 'block' : 'none';


        //        if (visibleProductCount == 0)
        //        {
        //            for (var i = 0; i < this.keywords.length; i++)
        //            {
        //                if (this.keywords[i].getGroupName() != groupName)
        //                {
        //                    this.keywords[i].setSelectedValue('');
        //                }
        //            }

        //            this.recurseCount++;

        //            if (this.recurseCount < 2)
        //            {
        //                this.onOptionsChanged(groupName);
        //            }

        //            this.recurseCount--;

        //            return;
        //        }

        for (var i = 0; i < this.keywords.length; i++)
        {
            var name = this.keywords[i].getGroupName();
            var selected = this.keywords[i].getSelectedValue();
            var values = new Array;

            for (var j = 0; j < this.products.length; j++)
            {
                if (name == groupName || this.products[j].isVisible())
                {
                    var prod_values = this.products[j].getKeywordsByGroup(name);

                    for (var k = 0; k < prod_values.length; k++)
                    {
                        var prod_value = prod_values[k].toLowerCase();
                        var found = false;

                        for (var n = 0; n < values.length; n++)
                        {
                            if (values[n].toLowerCase() == prod_value)
                            {
                                found = true;
                                break;
                            }
                        }

                        if (found == false)
                        {
                            values.push(prod_values[k]);
                        }
                    }
                }
            }

            this.keywords[i].updateValues(values);
            this.keywords[i].setSelectedValue(selected);
        }
    },

    render: function()
    {
        var productParent = document.getElementById('div_product_thumbs');
        var keywordParent = document.getElementById('filter_options');
        var z = 0;
        var duplicates = new Array();
        productParent.innerHTML = '';
        keywordParent.innerHTML = '';

        //render all products for this page
        for (var i = 0; i < this.products.length; i++)
        {
            this.products[i].render(productParent);
            z++;

            //filter out duplicates
            if (duplicates[this.products[i]._product.ID] != null)
                this.products[i].hide();

            duplicates[this.products[i]._product.ID] = true;

            document.getElementById('priceRange').style.display = 'block';
        }


        //render all categories for this page
        for (var i = 0; i < this.categories.length; i++)
        {
            this.categories[i].render(productParent);
            z++;
        }

        if (z == 0)
        {
            var resultDiv = document.getElementById('div_product_thumbs'); //this go to the no products found image
            resultDiv.innerHTML = '<img src="' + res_noResultsImg + '" />'; //when the user is redirected from step panel 
        }
        if (this.keywords.length > 0)
        {
            document.getElementById('filter_column').style.display = '';
            document.getElementById('product_column').style.width = '495px';
            document.getElementById('div_product_thumbs').style.width = '480px';
        }
        else
        {
            document.getElementById('filter_column').style.display = 'none';
            document.getElementById('product_column').style.width = '690px';
            document.getElementById('div_product_thumbs').style.width = '680px';
        }

        for (var i = 0; i < this.keywords.length; i++)
        {
            this.keywords[i].render(keywordParent);
        }
    }

};

PhotoSite.ProductViewContainer.registerClass('PhotoSite.ProductViewContainer');

//
// Product Filter
//

PhotoSite.ProductFilter = function(keywordGroup, loPrice, hiPrice)
{

    this.keywordGroup = keywordGroup;
    this.loPrice = loPrice;
    this.hiPrice = hiPrice;
}

PhotoSite.ProductFilter.prototype = 
{
    keywordGroup: null,
    keywordSelect: null,
    onOptionChangedCallback: null,
    allowCallback:true,
    
    setSelectedValue: function(value)
    {
        this.allowCallback = false;
        
        this.keywordSelect.selectedIndex = 0;
        
        for (var i = 0; i < this.keywordSelect.options.length; i++)
        {
            if (this.keywordSelect.options[i].innerHTML == value)
            {
                this.keywordSelect.selectedIndex = i;
                break;
            }
        }
        
        this.allowCallback = true;
    },
    
    getSelectedValue: function()
    {
        var index = this.keywordSelect.selectedIndex;
        
        if (index == 0)
        {
            return '';
        }
        else
        {
            return this.keywordSelect.options[index].innerHTML;
        }
    },
    
    onOptionChanged: function()
    {
        if (this.allowCallback == true && this.onOptionChangedCallback != null)
        {
            this.onOptionChangedCallback(this.keywordGroup.Name, this.loPrice, this.hiPrice);
        }
    },
    
    setOnOptionChangedCallback: function(instance, method)
    {
        this.onOptionChangedCallback = Function.createDelegate(instance, method);
    },
    
    updateValues: function(values)
    {
        this.allowCallback = false;
        
        var child = this.keywordSelect.childNodes[0];
        
        while (child)
        {
            this.keywordSelect.removeChild(this.keywordSelect.childNodes[0]);
            child = this.keywordSelect.childNodes[0];
        }
        
        var blank = document.createElement('option');
        blank.innerHTML = res_selectText + '...';
        
        this.keywordSelect.appendChild(blank);
        
        for (var i = 0; i < values.length; i++)
        {
            var option = document.createElement('option');
            option.innerHTML = values[i];
            this.keywordSelect.appendChild(option);
        }
        
        this.allowCallback = true;
    },
    
    getGroupName: function()
    {
        return this.keywordGroup.Name;
    },
    
    render: function(parent)
    {
        var container = document.createElement('p');
        container.style.paddingBottom = '20px';

        
        var title = document.createElement('strong');
        title.appendChild(document.createTextNode(this.keywordGroup.Name));
        
        var select = this.keywordSelect = document.createElement('select');
        select.parentProductFilter = this;
        select.onchange = function() { this.parentProductFilter.onOptionChanged(); }
        select.style.width = '155px';
        
        this.updateValues(this.keywordGroup.Values);
        
        container.appendChild(title);
        container.appendChild(document.createElement('br'));
        container.appendChild(select);
        
        parent.appendChild(container);
    }
};

PhotoSite.ProductFilter.registerClass('PhotoSite.ProductFilter');




//
// Product View
//
PhotoSite.ProductView = function(product, selected) {
    this._id = product.ID;
    this._name = product.Name;
    this._type = product.Type;
    this._isGift = product.IsGift;
    this._LayoutKey = product.LayoutKey;
    this._thumburl = product.ThumbUrl;
    this._description = product.Description;
    this._product = product;
    this._selected = selected;
    this._navigateParameters = product.NavigateParameters;
    this._debug = product.Debug;

    if (this._name.length > 43) {
        this._name = this._name.substr(0, 41) + '...';
    }
};

PhotoSite.ProductView.prototype =
{
    _id: null,
    _name: null,
    _selected: null,
    _thumburl: null,
    _isGift: null,
    _LayoutKey: null,
    _description: null,
    _domElement: null,
    _product: null,
    _visible: true,
    _productPlacementID: null,

    onClick: function() {
        if (this._type == 'Category')
            GetProductCategory(this._id);
        else
            location.href = this._product.NavigateUrl;
    },

    getKeywordsByGroup: function(group) {
        var groups = this._product.KeywordGroups;
        var lowGrp = group.toLowerCase();

        for (var i = 0; i < groups.length; i++) {
            if (groups[i].Name.toLowerCase() == lowGrp) {
                return groups[i].Values;
            }
        }

        return [];
    },

    hasKeyword: function(keyword) {
        var groups = this._product.KeywordGroups;
        var lowKW = keyword.toLowerCase();

        for (var i = 0; i < groups.length; i++) {
            var values = groups[i].Values;

            for (var j = 0; j < values.length; j++) {
                if (values[j].toLowerCase() == lowKW) {
                    return true;
                }
            }
        }
        return false;
    },

    onMouseOver: function() {
        this._domElement.className = 'product_thumb_on';
    },

    onMouseOut: function() {
        this._domElement.className = 'product_thumb';
    },

    show: function() {
        this._visible = true;
        this._domElement.style.display = '';
    },

    hide: function() {
        this._visible = false;
        this._domElement.style.display = 'none';
    },

    isVisible: function() {
        return this._visible;
    },

    render: function(parent) {
        var container = this._domElement = document.createElement('div');

        container.id = this._id + '_product_thumb';
        container.className = 'product_thumb';
        container.onclick = Function.createDelegate(this, this.onClick);
        container.onmouseover = Function.createDelegate(this, this.onMouseOver);
        container.onmouseout = Function.createDelegate(this, this.onMouseOut);

        var htmlMarkup = new Sys.StringBuilder();
        htmlMarkup.append("<div class='product_thumb_main'>");
        htmlMarkup.append("<div style='height:162px;'>");
        htmlMarkup.append("<div class='product_thumb_top'><h1>");
        htmlMarkup.append(this._name);
        htmlMarkup.append("</h1></div>");
        htmlMarkup.append("<div class='product_thumb_main_img'><img id='");
        htmlMarkup.append(this._id);
        htmlMarkup.append("_product_thumb_image' style='");

        if (BrowserIsIE6()) {
            htmlMarkup.append("width: expression(this.width > 160 ? 160 : true);");
            htmlMarkup.append("height: expression(this.height > 110 ? 110 : true);");
        }
        else {
            htmlMarkup.append("max-width:160px; max-height:115px;");
        }

        htmlMarkup.append("' src='");
        htmlMarkup.append(this._thumburl);
        htmlMarkup.append("' title='");
        htmlMarkup.append(this._description);
        htmlMarkup.append("' alt='");
        htmlMarkup.append(this._name);
        htmlMarkup.append("' border='0' /></div>");
        htmlMarkup.append("<div class='product_thumb_main_desc'></div>");
        htmlMarkup.append("</div>");
        //Holiday readiness, remove after Christmas
        if (this._debug)
            htmlMarkup.append('<div>' + this._debug + '</div>');

        if (this._isGift && this._isGift == true) {
            if (this._LayoutKey && this._LayoutKey != "") {                
                htmlMarkup.append("<div class='orderby'><img src='../images/album/gifts_thumbs/" + this._LayoutKey + SR.LanguageSuffix + ".gif' border='0' /></div>");
            }
        }
        //Holiday readiness, remove after Christmas
        if (this._product.PriceFormatted)
            htmlMarkup.append("<div class='gift_thumb_price'>" + this._product.PriceFormatted + "</div>"); //Font tag Added to fix FB 27085

        htmlMarkup.append("<div style='clear:both;'></div>");
        htmlMarkup.append("</div>");
        htmlMarkup.append("<div class='product_thumb_btm'><img src='../images/bak_product_thumb_btm.gif' border='0' /></div>");
        htmlMarkup.append("</div>");

        container.innerHTML = htmlMarkup.toString();
        parent.appendChild(container);

        var thumb_element_id = this._id + '_product_thumb_image';

        ImageLoader.LoadEx(this._thumburl,
            function() {
                document.getElementById(thumb_element_id).src = this.src;
            },
            function() {
                document.getElementById(thumb_element_id).src = res_noProductImg;
            },
        null);
    }
};

PhotoSite.ProductView.registerClass('PhotoSite.ProductView');
