/**
    Some javascript specific to the category page. Generally,
    this means doing OnLoad stuff, and assigining event handlers
    to various components.
    ~aoliver
*/

dojo.require("dojo.widget.ContentPane")

/**
* Some page-scope variables
*/
PAGE_MODES = {grid:"grid", detail:"detail"};
products = new Array();

function init_mode(){
    currentMode = getCurrentMode();//PAGE_MODES.grid;
    dojo.debug("current mode: " + currentMode);
    if (currentMode == PAGE_MODES.detail){
        dojo.debug('toggling to detail');
        toggleStyleSwitchers("detail-list");
    }
    else{
        toggleStyleSwitchers("grid");
    }
}

/**
* Takes an Javascript Collection object as an argument
*   returns an array
*/
function collectionToArray(col) {
    a = new Array();
    for (i = 0; i < col.length; i++)
        a[ a.length ] = col[ i ];
    return a;
}


/**
* AdManager controls reloading of ads during 'page view' events.
*/
function set_adtag_iframes(){
    dojo.debug('AdManager.initialize');
    if (document.getElementById('agi-ad728x90')){
       this.adtag_iframes = 
       this.adtag_iframes.concat(collectionToArray(document.getElementById('agi-ad728x90').getElementsByTagName("iframe")));
    }
    if (document.getElementById('agi-ad160x600')){
       this.adtag_iframes =
       this.adtag_iframes.concat(collectionToArray(document.getElementById('agi-ad160x600').getElementsByTagName("iframe")));
    }
    if (document.getElementById('agi-ad336x280')){
       this.adtag_iframes =
       this.adtag_iframes.concat(collectionToArray(document.getElementById('agi-ad336x280').getElementsByTagName("iframe")));
       this.adtag_iframes.concat(collectionToArray(document.getElementById('agi-ad336x280').getElementsByTagName("iframe")));
    }
}
function reload_ads(){
    dojo.debug("AdManager.reload");
    for (var i=0; i < this.adtag_iframes.length; i++){
         this.adtag_iframes[ i ].src = this.adtag_iframes[ i ].src;
    }
}
function AdManager(){
    dojo.debug('AdManager contructor');
    this.adtag_iframes = new Array();
    this.initialize    = set_adtag_iframes;
    this.reload        = reload_ads;
}
var ads = new AdManager();

/*
* ThumbManager, SortManager, and PageManager are objects 
* that provide simple functions, but are needed to make
* the call to dojo.event.connect as efficient as possible.
*/
var ThumbManager = {
    popThumb: function(e){
        createPopper(e.target.id, which_popper);
        }
};
var SortManager = {
    currentsort:'usage',
    sort: function(e){
        updateSort();       
    }
};
var PageManager = {
    currentpage:1,

    page: function(e){
        goPage(e.target.title);
    },
    all: function(e){
        goPage('all');
    }
};

/**
* Place the join offer appropriately
*   'click here for one free month'
*/
var offer_html = '';
function get_offer()
{
    //storing innerHTML instead of node because IE loses node value
    //when switching views
    try { offer_html = document.getElementById('agi-free-row-offer').innerHTML; }
    catch(e) { offer_html = ''; }
}
function place_offer(perform_offer)
{
    //not a free user, return
    if(perform_offer.toLowerCase() != "true")
        return;
    //stick offer in appropriate place
    var which = document.getElementById('agi-free-row-offer');
    which.innerHTML = offer_html;
}

/** 
* Initializes the category page
*/
init_category = function(){
        dojo.debug("entering init()");
        initDocPane();
        initBackButton();
        init_mode();
        initSorter();
        initPageChangers();
        initPoppers();
        ads.initialize();
        dojo.debug("leaving init()");
    };

/*
* Create the docpane ContentPane widget programatically.
*/
initDocPane = function(){
    docpaneDiv = dojo.byId('docpane');
    dojo.widget.createWidget('ContentPane',{id:"docpane", 
                                            adjustPaths:false,
                                            executeScripts:true,
                                            loadingMessage:'<p class="loading">Loading...</p>'},docpaneDiv);
};

/*
*   initialize browser history behavior
*/
initBackButton = function(){
    dojo.require("dojo.undo.browser");
    dojo.require("dojo.io.*");
    var bookmarkId = location.hash;
    if (bookmarkId && bookmarkId.length >1){
        bookmarkId = bookmarkId.substring(1,bookmarkId.length); //get rid of the #     
        setPage(bookmarkId);
    }
    else{
        bookmarkId = '1';
    }
    dojo.undo.browser.setInitialState( new ApplicationState(bookmarkId)); 
};

/**
* Initialize the popper widgets. This lets us delay the building of dojo widgets until
* the mouseover occurs
*/
function initPoppers(){
        var which_popper = getPopper();
        var foo = "ag.widget."+which_popper;
        //dojo.debug('requiring: ' + foo);
        dojo.require("ag.widget."+which_popper);
        for (i in products){
            productNumber = products[i];
            productNode = dojo.byId(productNumber+'');
            smallThumbNode = dojo.byId('small-thumb-' + productNumber);
            dojo.event.connect(smallThumbNode, 'onmouseover', ThumbManager, 'popThumb');
        }
    }

/**
* look for `popper` var on the page. If it exists, build up and return
  correct string for the intended popper widget.
*/
function getPopper()
{
    //popper can be something like "printables" or "downloads"
    //the outcome will be "PrintablesPopper" or "DownloadsPopper";
    try
    {
        //capitalize first character
        which_popper = popper.charAt(0).toUpperCase();
        //tack on rest of string
        which_popper += popper.substring(1).toLowerCase();
    }
    catch(e){ which_popper = ''; }
    //make it official
    which_popper += "Popper";
    //dojo.debug('return from getPopper(): ' + which_popper);
    return which_popper;
}

/**
* Create a Popper widget on the fly
*  NOTE: this is intended to be used only on category-like pages
*        and DEPENDS UPON thumbbuilder.py generating the proper markup/classes.
*/
function createPopper(smallThumbId, which_popper){
        productNumber = smallThumbId.split('-')[2];
        if( dojo.widget.byId("productw-" + productNumber) != null){
            w = dojo.widget.byId("productw-" + productNumber);
            return;
        }
        else{
            //dojo.debug('creating widget: '+which_popper);
            w = dojo.widget.createWidget(which_popper, {
                                                    id:"productw-" + productNumber,
                                                    productNumber:productNumber,
                                                    connectId:smallThumbId, 
                                                    dataId:productNumber,
                                                    fromNode:true,
                                                    imghost:imghost,
                                                    imgbase:imgbase,
                                                    toggle:"fade"
                                                    });
        }
        w._onHover(); //Fire the hover event so the popup appears
    }

function initSorter(){
    var sorter = document.getElementById('sorter');
    if (sorter){
        dojo.event.connect(sorter,'onchange',SortManager,'sort');
    }
}

updateSort = function(){
    var sorter = document.getElementById('sorter');
    if( sorter.value == 'new'){
        sortBy('startdate');
    }
    if( sorter.value == 'usage'){
        sortBy('usage');
    }
    if( sorter.value == 'rating'){
        sortBy('rating');
    }
    //we've resorted the list, so back to page 1
    updateChangerClasses(1);
};

function sortBy(type){
    updateCurrentSort(type);
    destroyPoppers();
    var contentUrl = getContentUrl();
    products = new Array();
    productPane = getResultsPane();
    productPane.addOnLoad(initPoppers);
    productPane.setUrl(contentUrl);
}

/*
* get all popper widget instances on the page
*/
function getPopperWidgets(){
    which_popper = getPopper();
    return dojo.widget.byType(which_popper);
}

/**
* Swtich the style of the thumb container to the grid view.
* Grid view is typically a table-like set of thumbs, with 
* popout behavior turned on.
*/
function styleToGrid(){
    setModeCookie(PAGE_MODES.grid);
    destroyPoppers();
    productPane = getResultsPane();
    productPane.addOnLoad(initPoppers);
    toggleStyleSwitchers("grid");
    contentUrl = getContentUrl();
    productPane.setUrl(contentUrl);
    ads.reload();
}

function setCurrentMode(mode){
    currentMode = mode;
}

function getCurrentMode(){
    cookie_mode = getModeCookie();
    if(cookie_mode){
        return cookie_mode;
    }
    else{
        return "grid";
    }
}

function setModeCookie(mode){
    dojo.debug("setting cookie to " + mode);
    var key="list-style";
    MagicCookie.setCookieValue(key,mode,true);
    dojo.debug("new cookie is :" + getModeCookie());
}

function getModeCookie(mode){
    var key="list-style";
    return MagicCookie.getCookieValue(key);
}

/**
* Switch the style of the thumb container from 
* 'grid' to 'detail'. 
*/
function styleToDetail(){
    setModeCookie(PAGE_MODES.detail);
    destroyPoppers();
    toggleStyleSwitchers("detail-list");
    productPane = dojo.widget.byId("docpane");
    var contentUrl = getContentUrl();
    productPane.setUrl(contentUrl);
    ads.reload();
}

/**
* flip the style switchers to highlight and disable the currently selected mode
*/
function toggleStyleSwitchers(styleName){
    pageNumber = getQueryVariable("adisplay");
    thumbSwitchElem = document.getElementById('viewby_page');
    detailSwitchElem = document.getElementById('viewby_detail');
    if(styleName == "grid"){
        dojo.event.disconnect(thumbSwitchElem, "onclick", "styleToGrid");
        dojo.event.connect(detailSwitchElem, "onclick", "styleToDetail");
        dojo.html.setClass(detailSwitchElem, 'switchview');
        dojo.html.setClass(thumbSwitchElem, 'switchview-selected');
    }
    if(styleName == "detail-list"){
        dojo.event.disconnect(detailSwitchElem, "onclick", "styleToDetail");
        dojo.event.connect(thumbSwitchElem, "onclick", "styleToGrid");
        dojo.html.setClass(detailSwitchElem, 'switchview-selected');
        dojo.html.setClass(thumbSwitchElem, 'switchview');
    }
}

/**
* Initialize the links on the page that switch
* view-styles.
*/
function initStyleSwitchers(){
    toggleStyleSwitchers("grid");
}

/**
* Initialize the paging links
*/
function initPageChangers(){
    var pageNodes = getPagePickers();
    for (p in pageNodes){
        var pageNode = pageNodes[p];
        o = new Object();
        pageFunc = function(){goPage(pageNode.title);};
        dojo.event.connect(pageNode,'onclick', PageManager, 'page');
    }
    var viewAllNodes = dojo.html.getElementsByClass('viewall');
    for( n in viewAllNodes ){
        var node = viewAllNodes[n];
        dojo.event.connect(node, 'onclick', PageManager, 'all');
    }
    if (getViewAllCookie() == 'all'){
        updateChangerClasses('all');
        PageManager.currentpage = 'all';
    }
}

/**
* get a list of the elements used as paging links
*/
function getPagePickers(){
    var mainNode = document.getElementById('agi-category');
    var pageListNodes = dojo.html.getElementsByClass('picker',mainNode, "div");
    var pageNodes = new Array();
    for (n in pageListNodes){
        var node = pageListNodes[n];
        numberNodes = dojo.html.getElementsByClass("pagenumber", node, "li");
        for (m in numberNodes){
            pageNodes.push(numberNodes[m]);
        }
        
    }
    return pageNodes;
}

/**
* Destroy all Popper widgets on the page. Most often used
* when switching to another page of thumbs. This saves resources, and
* also gives dojo a clean slate when coming back to this page of results.
*/
function destroyPoppers(){
    poppers = getPopperWidgets();
    for (i in poppers){
        popper = poppers[i];
        //parents cause problems for destroying things ~aoliver
        popper.parent = null;
        popper.destroy();
    }
}

/*
*  Inspect the current state of things and return the URL we want 
*  to show in the content pane.
*
* Note, this funciton assumes things like the current page and desired
* view have already been set, it merely spits back the URL of the "current
* state" of the docpane for refreshing.
*/
function getContentUrl(){
    try {
        return __getContentUrl();
    } catch(e) {
        ; // Don't do anything on error, just continue to the default code.
    }
    url = khost + "/" + product_line + "/products.pd";
    var path = getQueryVariable("path");
    if (path){
        //classic, we have a path query param
        url = url + "?path=" + path + "&viewmode=" + getCurrentMode();
    }
    else{
        //friendly
        url = url + getFriendlyPath() + "?viewmode=" + getCurrentMode();
    }
    var pageNumber = PageManager.currentpage;
    if(pageNumber == null || pageNumber == "all"){
        url = url + "&va=1";
        setViewAllCookie('all');
    }
    else{
        url = url + "&adisplay=" + pageNumber ;
        setViewAllCookie('');
    }
    url = url + "&sortby=" + SortManager.currentsort;
    return url;
}

/*
* Set the current page number and change out content.
* Note, this probably should only be called via goPage if from
* components other than the browser history managers.
*/
function setPage(pageNumber){
    destroyPoppers();
    products = new Array();
    mode = getCurrentMode();
    productPane = getResultsPane();
    if (productPane){
        productPane.addOnLoad(initPoppers);
    }
    PageManager.currentpage = pageNumber;
    contentUrl = getContentUrl();
    productPane.setUrl(contentUrl);
    updateChangerClasses(pageNumber);
}

function setViewAllCookie(page){
    var key="viewall";
    MagicCookie.setCookieValue(key,page,true);
}
   
function getViewAllCookie(){
    var key = "viewall";
    return MagicCookie.getCookieValue(key);
}
/**
* get the ContentPane widget that contains the
* results for the page
*/
function getResultsPane(){
    return dojo.widget.byId("docpane");
}

/**
* get the current view mode of the page
*/
function currentListStyle(){
    gridProductList = dojo.html.getElementsByClass("productlist grid");
    if( gridProductList.length > 0 ){
        return "grid";
    }
    detailProductList = dojo.html.getElementsByClass("productlist detail-list");
    if(detailProductList.length > 0){
        return "detail-list";
    } 
}

function updateCurrentSort(sort){
    if (sort != SortManager.currentsort){
        //sorting means we go back to page 1
        PageManager.currentpage = 1;
    }
    SortManager.currentsort = sort;
}
/**
* Update the page switcher (1|2|3..) to disable the current
* page numbe, and enable the others.
*/
function updateChangerClasses(pageNumber){
    var pageNodes = getPagePickers();
    for( x in pageNodes){
        pageNode = pageNodes[x];
        if(pageNode.title == (pageNumber ) ){
            dojo.html.addClass(pageNode,"current");
        }
        else{
            dojo.html.removeClass(pageNode,"current");
        }
    }
    var viewAllNodes = dojo.html.getElementsByClass("viewall");
    //viewAllNode = document.getElementById("viewall");
    for (n in viewAllNodes){
        node = viewAllNodes[n];
        if(pageNumber == "all"){
            dojo.html.addClass(node, "current");
        }
        else{
            dojo.html.removeClass(node,"current");
        }
    }
}

/**
* Utility function to snag a specific query param.
*/
function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    } 
}

/*
* get the "friendly path" portion of the url.
*
*/
function getFriendlyPath(){
    return window.location.pathname.split(".pd")[1];    
}

/*
* Initializes the autocomplete feature for quicksend
*/
function init_recipient_autocomplete(inputId){
    var toemail = new YahooAreaComplete(inputId);
}

/*
* Pop open a quicksend pane for a product, when in list view.
*
*/
function openQuickSend(productNumber){
       w = dojo.widget.createWidget("Popper", {
                                                id:"productw-" + productNumber,
                                                    productNumber:productNumber+'',
                                                    connectId:"big-thumb-" + productNumber, 
                                                    dataId:productNumber +'',
                                                    fromNode:true,
                                                    imghost:imghost,
                                                    imgbase:imgbase,
                                                    toggle:"fade"
                                              });
    w.open();
    var scroll_offset = dojo.html.getScroll().offset;
    var viewport_size = dojo.html.getViewport();
    var mb = dojo.html.getMarginBox(w.domNode);
    var x = scroll_offset.x + (viewport_size.width - mb.width)/2;
    var y = scroll_offset.y + (viewport_size.height - mb.height)/2;
    with( w.domNode.style){
       left=x + "px";
       top = y + "px";
       position="absolute";
    }
    w.showQuickSendPane();
    w.stopListening();
}

/**
* ApplicationState is used for managing the browser history,
* so that as the user pages through ajax-y content, the browser
* "back" button goes back through various pages of results, rather
* than to the page prior to the category page
* see http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book0
*/
ApplicationState=function(pageNumber){
    if( !pageNumber){
        pageNumber = 1;
    }
    this.pageNumber = pageNumber;
    this.changeUrl = pageNumber;
}
ApplicationState.prototype.back = function(){
    setPage(this.pageNumber); 
    //nasty little hack to make IE happy about backing into the initial page
    if(dojo.undo.browser.historyStack.length == 0 && dojo.render.html.ie){
       location.hash='';
    }
}
ApplicationState.prototype.forward = function(){
        setPage(this.pageNumber);
}

/*
* Back-button compatible way to record app state, then
* change the page.
*/
function goPage(pagenumber){
    var appState = new ApplicationState(pagenumber);
    dojo.undo.browser.addToHistory(appState);
    setPage(pagenumber);
    ads.reload();
}