//set this in the ascx file
var CategoryFilter1Id; //number
var CategoryFilter2Id; //number
var CategoryFilter1Name = '';
var Default_BGType = '';
var Default_Sizes; //array
var CurrentCatalogCategoryId; //number
var PreviousCollectionCategoryId; //number
var SizeOptionDisplay; //number
var BoysCatId; //number
var GirlsCatId; //number

$(document).ready(function() {
    //Setup
    SetupCategoryFilter();

    //Load Data
    GetCategoryProducts();
});

function GetCategoryProducts(clearList) {
    if (clearList) {
        $('.divResults .divList').html('');
        if (window.location.href.indexOf('localhost') > -1) {
            $('.resultCount').html('0');
        }
        return;
    }

    //Collect categories, sizes, and BGType
    var selectedSizes = [];
    var allCategoriesList = [];
    var anyCategoriesList = [];//must never contain the PreviousCategoryID
    var bgType = "";
    var tabCat = "";

    //get BGType
    bgType = $('table[id$=rblBGType] input:checked').val();

    //get TabCat
    tabCat = $('.rblTabCat input:checked').val();

    //get selectedCategories and sizes
    //if on tabs 1,2,3 then check for level 1 and level 2 category selections
    var currentTabId = clientTabStrip.getSelectedTab().get_id();
    var isSizeTab = currentTabId == 4;
    if (isSizeTab == false) {
        allCategoriesList.push(CategoryFilter1Id);
        var level2CatId = GetLevel2CategoryId();
        if (level2CatId != null) {
            allCategoriesList.push(level2CatId);
        }
    }
    else {
        //if size tab
        //add categories for bgType if any
        //switch does not allow array .push to I used if/else if
        if (bgType == 1) {
            anyCategoriesList.push(BoysCatId);
        }
        else if (bgType == 2) {
            anyCategoriesList.push(GirlsCatId);
        }
        else if (bgType == 3) {
            //Do not restrict on boys or girls in effect allowing both
            anyCategoriesList.push(BoysCatId);
            anyCategoriesList.push(GirlsCatId);
        }

        //add categories for tabCat
        if (tabCat.length > 0) {
            allCategoriesList.push(tabCat);
        }

        //Get sizes only if on the size filter tab
        $('table[id$=cblSizesSet1] input:checked').each(function() {
            selectedSizes.push($(this).parent().attr('sizeId'));
        });
        $('table[id$=cblSizesSet2] input:checked').each(function() {
            selectedSizes.push($(this).parent().attr('sizeId'));
        });
    }

    var service = new Mediachase.Store.Web.PublicService();
    service.GetCategoryProducts(allCategoriesList, anyCategoriesList, selectedSizes, ShowFilteredProducts, null, null);
    $('.divResults .divList').hide();
    $('.divResults .divLoading').fadeIn('3000');

}

function ShowFilteredProducts(result) {
    var resultsTemplate = "<table class='tblResults'>ROWS</table>";
    var groupTemplate = '<tr>CELLS</tr>';
    var groupSize = 4;
    var itemContainerTemplate = "<td class='cat-item'>PRODUCT</td>";
    var itemTemplate = "<a class='ProductLeftLink' href='ProductInfo.aspx?id=PRODUCT_ID'>PRODUCT_IMAGE PRODUCT_NAME</a> PRODUCT_PRICE";
    var itemImageTemplate = "<div class='sPicWrap'><img src='IURL' alt='PRODUCT_NAME' />BADGE</div>";
    var itemProductNameTemplate = "<div class='ProductLeftLink'>PRODUCT_NAME</div>";
    var itemPriceTemplate = "<div class='prod-price'>PRODUCT_PRICE</div>";

    //1) For each product generate the item content
    //2) Group items into rows
    //3) Assemble rows into the table
    var ItemContent = [];
    //1: Items
    for (var i = 0; i < result.length; i++) {
        var iURL = result[i].Photo.replace('~', '..');
        var badge = result[i].IsInMAWCategory ? '<div class="mawBadge"></div>' : '';
        badge = result[i].IsInMemoryFoamCategory ? '<div class="memoryFoamBadge"></div>' : badge;
        badge = result[i].IsInWashableDRYZCategory ? '<div class="washableDryzBadge"></div>' : badge;
        badge = result[i].IsInMemoryFoamCategory && result[i].IsInWashableDRYZCategory ? '<div class="memoryFoamAndWashableDryzBadge"></div>' : badge;

        var pName = itemProductNameTemplate.replace('PRODUCT_NAME', result[i].Name);
        var pPrice = itemPriceTemplate.replace('PRODUCT_PRICE', result[i].Price);
        var pImage = itemImageTemplate.replace('IURL', iURL).replace('PRODUCT_NAME', result[i].Name).replace('BADGE', badge);
        var p = itemTemplate.replace('PRODUCT_ID', result[i].ProductID).replace('PRODUCT_IMAGE', pImage).replace('PRODUCT_NAME', pName).replace('PRODUCT_PRICE', pPrice);
        var ic = itemContainerTemplate.replace('PRODUCT', p);
        ItemContent.push(ic);
    }
    //Fill the last partial row with blanks by ensuring ItemContent length % groupSize = 0
    if (ItemContent.length % groupSize != 0) {
        //add blanks
        var numBlanksNeeded = groupSize - (ItemContent.length % groupSize);
        for (var i = 0; i < numBlanksNeeded; i++) {
            var icBlank = itemContainerTemplate.replace('PRODUCT', '');
            ItemContent.push(icBlank);
        }
    }

    //2: Grouping
    var cells = '';
    var rows = '';
    var cellIndex = 0;
    for (var i = 0; i < ItemContent.length; i++) {

        //Add the item to the row
        cells += ItemContent[i];
        cellIndex++;

        //Add the row to rows when it is full
        if (cellIndex >= groupSize) {
            rows += groupTemplate.replace('CELLS', cells);
            cellIndex = 0;
            cells = '';
        }
    }

    //3: Display
    var results = '';
    if (ItemContent.length > 0) {
        results = resultsTemplate.replace('ROWS', rows);
    }
    else {
        results = "<div class='divEmpty'><h2>no products match these criteria</h2></div>";
    }

    $('.divResults .divLoading').hide();
    $('.divResults .divList').html(results);
    $('.divResults .divList').fadeIn("fast");

    //debug count
    if (window.location.href.indexOf('localhost') > -1) {
        $('.resultCount').html(result.length);
    }

    TrackAJAX();
}

function SetupCategoryFilter() {
    //Build tab strip items
    BuildClientTabStrip();

    //Set default size selections
    if (Default_Sizes.length == 0) {
        //Preload this tab's controls so that it will be ready if the user decides to use it
        if (SizeOptionDisplay == 3) {
            //if boys or girls category then check all sizes        
            $('table[id$=cblSizesSet1] input').attr('checked', 'checked');
            $('table[id$=cblSizesSet2] input').attr('checked', 'checked');
        }
        else if (SizeOptionDisplay == 1) {
            //if is a category involving just flex then check only flex sizes
            $('table[id$=cblSizesSet1] input').attr('checked', 'checked');
        }
        else if (SizeOptionDisplay == 2) {
            //if is a category involving just originals then check only original sizes
            $('table[id$=cblSizesSet2] input').attr('checked', 'checked');
        }
    }
    else {
        //Show the size controls since this will be the
        clientTabStrip.selectTabById(4); //change the tab top "Search By Size" and show the filter controls

        $('.sizeFilterControls').show();

        //set only specific sizes
        for (var i = 0; i < Default_Sizes.length; i++) {
            $('table[id$=cblSizesSet1] span[sizeId=' + Default_Sizes[i] + '] input').attr('checked', 'checked');
            $('table[id$=cblSizesSet2] span[sizeId=' + Default_Sizes[i] + '] input').attr('checked', 'checked');
        }
    }

    //Set default gender selection
    $('.bgType input[value=' + Default_BGType + ']').attr('checked', true);

    //wireup search button
    $('.categoryFilterSearch').click(function() { GetCategoryProducts(); return false; });

    //Wireup search these shoes by size buttons
    $('.searchTheseBySize').click(function() { SwitchToSearchTabAndPresetTabCatSelection(); return false; });
}

function GetLevel2CategoryId() {
    //determine which tab is checked
    var categoryId = clientTabStrip.getSelectedTab().get_value();
    if (typeof (categoryId) == "number") {
        return categoryId;
    }
    else {
        return null;
    }
}

function ClearAllSizesRestrictions() {

    //Reset BGType to both (no restriction)
    $('table[id$=rblBGType] input[value=3]').attr('checked', 'checked');

    //Set all sizes
    $('table[id$=cblSizesSet1] input').attr('checked', '');
    $('table[id$=cblSizesSet2] input').attr('checked', '');
}

function BuildClientTabStrip() {
    clientTabStrip.beginUpdate();

    var topTabs = clientTabStrip.get_tabs();
    var newTab;
    var allTabText = "All " + CategoryFilter1Name + " Shoes";
    //On 02/11/10 pediped requested that "Previous Collections" be changed to "Last Chance"
    var tabText = [[allTabText, 1], ["Current Catalog", 2], ["Last Chance", 3], ["Search By Size", 4]];

    for (var i = 0; i < tabText.length; i++) {
        newTab = new ComponentArt.Web.UI.TabStripTab();
        newTab.set_text(tabText[i][0]);
        newTab.set_id(tabText[i][1]);

        //Assign CategoryFilter2Ids to the Tabs and set
        if (i == 1) {
            newTab.set_value(CurrentCatalogCategoryId);
        }
        if (i == 2) {
            newTab.set_value(PreviousCollectionCategoryId);
        }

        topTabs.add(newTab);
    }

    clientTabStrip.selectTabById(1); //default

    clientTabStrip.add_tabSelect(tabSelectEventHandler);

    clientTabStrip.endUpdate();
}

function tabSelectEventHandler(sender, eventArgs) {
    TabSelectChangeActions();
}

function TabSelectChangeActions() {
    var tabId = clientTabStrip.getSelectedTab().get_id();
    var isSizeTab = tabId == 4;
    if (isSizeTab) {
        GetCategoryProducts(true);
        $('.sizeFilterControls').show();
        $('.searchTheseBySize').hide();
    }
    else {
        $('.sizeFilterControls').hide();
        $('.searchTheseBySize').show();
        GetCategoryProducts();
    }
}

function SwitchToSearchTabAndPresetTabCatSelection() {
    //Preset the search tab's tabCategory selection
    PresetTabCategoryCriteria();
    clientTabStrip.selectTabById(4);
    TabSelectChangeActions();
}

function PresetTabCategoryCriteria() {
    var currentTabId = clientTabStrip.getSelectedTab().get_id();
    switch (currentTabId) {

        case 1: //Current
            {
                $('.rblTabCat input[value=' + CurrentCatalogCategoryId + ']').attr('checked', true);
                break;
            }
        default:
        case 2: //All
            {
                $('.rblTabCat input[value=""]').attr('checked', true);
                break;
            }

        case 3: //Previous
            {
                $('.rblTabCat input[value=' + PreviousCollectionCategoryId + ']').attr('checked', true);
                break;
            }
    }
}

function TrackAJAX() {
    var currentTabId = clientTabStrip.getSelectedTab().get_id();
    var trackID = '';
    switch (currentTabId) {

        case 1:
            {
                trackID = 'CategoryInfo-Current.aspx';
                break;
            }
        case 2:
            {
                trackID = 'CategoryInfo-All.aspx';
                break;
            }
        case 3:
            {
                trackID = 'CategoryInfo-Previous.aspx';
                break;
            }
        case 4:
            {
                trackID = 'CategoryInfo-Search.aspx';
                break;
            }
    }

    //pageTracker must be initialized already
    pageTracker._trackPageview(trackID);
}