var ThreeAcrossVIPage = Class.create();

ThreeAcrossVIPage.prototype = {

    initialize: function(restore) {

        this.bodyContainer = $('bodyContainer');

        this.brandID = brandConst.BRAND_ID;

        this.brandProductItem = {
            "GP": "brand1 productItem",
            "BR": "brand2 productItem",
            "ON": "brand3 productItem",
            "PL": "brand4 productItem",
            "AT": "brand10 productItem"
        };

        this.brandImgDiv = {
            "GP": "brand1 imgDiv",
            "BR": "brand2 imgDiv",
            "ON": "brand3 imgDiv",
            "PL": "brand4 imgDiv",
            "AT": "brand10 imgDiv"
        };

        if (( location.pathname == '/browse/category.do' || 
                location.pathname == '/browse/search.do' || 
                location.pathname == '/browse/mpp.do' ) 
                && !restore) {
                
            this.insertCSS();

            if (location.pathname == '/browse/category.do' || location.pathname == '/browse/mpp.do' ) {
                this.walkThroughProductGrid();
            }
            else if (location.pathname == '/browse/search.do') {
                this.walkThroughSearchGrid();
            }
        }
        else {
            this.restoreCSS();
        }

    },

    insertCSS: function() {

        var headID = document.getElementsByTagName("head")[0];
        var cssNode = document.createElement('link');
        cssNode.type = 'text/css';
        cssNode.rel = 'stylesheet';
        cssNode.href = '/Asset_Archive/ONWeb/content/0001/592/283/assets/ThreeAcross.css';
        cssNode.media = 'screen';
        headID.appendChild(cssNode);
        this.restoreCSS();
    },

    restoreCSS: function() {

        //show tabTableOff now
        var headID = document.getElementsByTagName("head")[0];
        var cssNode = document.createElement('link');
        cssNode.type = 'text/css';
        cssNode.rel = 'stylesheet';
        cssNode.href = '/Asset_Archive/ONWeb/content/0001/592/283/assets/ThreeAcross_Restore.css';
        cssNode.media = 'screen';
        headID.appendChild(cssNode);

        if ($('tabTableOff') != null) {
            $('tabTableOff').style.visibility = "visible";
        }
    },

    /*
    *  walkThroughProductGrid
    *  Grab every product image for every "brandX imgDiv".
    *  Then change it's src to the appropriate quickLook/p01 image path
    */

    walkThroughProductGrid: function() {

        var thisClass = this.brandProductItem[this.brandID];
        var allProducts = $$("div[class=" + thisClass + "]");
        var i = 0;
        var counter = 0;

        while (i < allProducts.length) {

            //check if previous sibling is a 'divider' (sub category)
            //if NOT then increment counter
            //else this is the beginning of a row and should set counter to 1

            prevNode = allProducts[i].previous();

            if (prevNode.className != 'divider1') {
                counter++;
                //allProducts[counter].style.border = "1px solid red";
            }
            else {
                counter = 1;
            }

            //insert a 'clear' break after every third product (row)
            //OR for the last productItem
            //check the 'next' node to see if it is 'productToolsLine' (last product)
            //skip 'clear5' classes

            var nextNodeClassName = allProducts[i].next().className;

            if (nextNodeClassName == 'clear5') {
                nextNodeClassName = allProducts[i].next().next().className;
            }

            if (counter == 3 || nextNodeClassName.indexOf('productToolsLine') >= 0) {

                clearBreak = document.createElement('div');
                clearBreak.setAttribute('class', 'threeAcrossClearFix');

                if (clientBrowser.isIE6 == null) {
                    hiddenText = document.createTextNode(' ');
                    clearBreak.appendChild(hiddenText);
                }
                else {
                    clearBreak.innerHTML = "<div style='display:block;clear:both;color:#ffffff;width:450px;height:8px;border:0px solid red;'>.</div>";
                }

                allProducts[i].parentNode.insertBefore(clearBreak, allProducts[i].nextSibling);
                counter = 0;

            }
            i++;
        }
    },

    /*
    *  walkThroughSearchGrid
    *  Grab every product image for every "brandX imgDiv".
    *  Then change it's src to the appropriate quickLook/p01 image path
    */
    walkThroughSearchGrid: function() {

        //alert("Search Grid!");

        var thisClass = this.brandProductItem[this.brandID];
        var allProducts = $$("div[class=" + thisClass + "]");
        var i = 0;
        var counter = 0;

        while (i < allProducts.length) {

            //check if previous sibling is a 'divider' (sub category)
            //if NOT then increment counter
            //else this is the beginning of a row and should set counter to 1

            prevNode = allProducts[i].previous();

            if (prevNode.className != 'divider1') {
                counter++;
                //allProducts[counter].style.border = "1px solid red";
            }
            else {
                counter = 1;
            }

            //insert a 'clear' break after every third product (row)
            //OR for the last productItem
            //check the 'next' node to see if it is 'productToolsLine' (last product)
            //skip 'clear5' classes

            var isThisTheLastProduct = false;

            if (allProducts[i].next().className == 'clear5') {

                //since next element is "clear5"
                //check if this is last product in Search Grid
                if (allProducts[i].next().next() == null) {
                    //alert('found last product');
                    isThisTheLastProduct = true;
                }
            }

            if (counter == 3 || isThisTheLastProduct) {

                clearBreak = document.createElement('div');
                clearBreak.setAttribute('class', 'threeAcrossClearFix');

                if (clientBrowser.isIE6 == null) {
                    hiddenText = document.createTextNode(' ');
                    clearBreak.appendChild(hiddenText);
                }
                else {
                    clearBreak.innerHTML = "<div style='display:block;clear:both;color:#ffffff;width:450px;height:8px;border:0px solid red;'>.</div>";
                }

                allProducts[i].parentNode.insertBefore(clearBreak, allProducts[i].nextSibling);
                counter = 0;

            }
            i++;
        }
    }
}