/*---------------------------------------------------------
 *  For JSLint (http://www.jslint.com/)...
 *      Set these two options:
 *          "The Good Parts" button
 *          "Assume a browser" checkbox
 *      Ignore these errors:
 *          "Problem at line ___ character __: Script URL."
 */
/*global window            : false,
         $                 : false
 */
/*---------------------------------------------------------*/
var initializeVars,
    ctx,
    header,
    navigation,
    mainContent,
    footer,
    browserNotice,
    isGoodBrowser,
    cleanHTML5forIE,
    hideDetailsSummary,
    removeComments,
    tabFocus,
    navMenu,
    loc,
    locParent,
    slideItDown,
    slideItUp,
    scrollToTop,
    thumbnails,
    productLink,
    showProduct,
    makeLarge,
    makeThumb,
    drawPreviewLayer,
    closePreviewLayer,
    stylePicker,
    stylePickerColor,
    stylePickerIcon,
    pickStyle,
    pageColor,
    pageIcon,
    topLink;

/*=================================================*/
initializeVars = function () {
/*=================================================*/
    ctx               = $('div.wrapper');
    header            = $('#header', ctx);
    navigation        = $('.main-nav', ctx);
    mainContent       = $('#main-content', ctx);
    footer            = $('footer');
    topLink           = $('a[href="#top"]', footer);
    loc               = document.location.pathname.split("/").pop().slice(-10);
    locParent         = $('a[href*="' + loc + '"]', navigation).parent('li');
    thumbnails        = $('#thumbnails', mainContent);
    stylePicker       = $('#style-picker');
    stylePickerColor  = $('.color', stylePicker);
    stylePickerIcon   = $('.icon', stylePicker);
};

/*=================================================*/
pickStyle = function () {
/*=================================================*/
    pageColor = $(stylePickerColor).text();
    pageIcon  = $(stylePickerIcon).text();
    if (pageColor === '' || pageIcon === ' ' || pageIcon === '&nbsp') {
        $('body').addClass('onsen');
    } else {
        $('body').addClass(pageColor);
    }

    if (pageIcon === '' || pageIcon === ' ' || pageIcon === '&nbsp') {
        $('body').addClass('lotus');
    } else {
        $('body').addClass(pageIcon);
    }
    stylePicker.remove();
};

/*=================================================*/
browserNotice = function () {
/*=================================================*/
    var badNotice;
    isGoodBrowser = true;
    badNotice = function () {
        $('body').prepend('<div id="browser-notice" style="background-color:yellow; text-align:center;">Please consider upgrading your browser for both security and performance.<br />You might enjoy using the latest versions of <a href="http://www.mozilla.com/en-US/" >Firefox</a>, <a href="http://www.google.com/chrome">Chrome</a> or <a href="http://www.apple.com/safari">Safari</a>, all of which are free.</div>');
        $('#browser-notice')
            .animate({"opacity": 0}, 10000)
            .animate({
                "height": "0px"
            },
                1000,
                function () {
                    $(this).remove();
                });
    }
    if ($.browser.msie && (parseInt($.browser.version, 10) <= 9)) {
        isGoodBrowser = false;
        $('body').addClass('ie');
        if ($.browser.msie && (parseInt($.browser.version, 10) <= 8)) { badNotice() };
    }
    if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
        var ffversion=new Number(RegExp.$1);
        if (ffversion <=5) {
            isGoodBrowser = false;
            $('body').addClass('ff');
            badNotice();
        }
    }
};

/*=================================================*/
removeComments = function () {
/*=================================================*/
    $('*').contents().each(function () {
        if (this.nodeType === 8) {
            $(this).remove();
        }
    });
};

/*=================================================*/
tabFocus = function () {
/*=================================================*/
    $('a', navigation).add('a', mainContent).add('a', footer)
        .focus(function () {
            $(this)
                .addClass('focus')
                .css({
                    'box-shadow' : '0px 0px 5px orange', 
                    'border-radius' : '2px'
                });
        })
        .blur(function () {
            $(this)
                .removeClass('focus')
                .css({
                    'box-shadow' : 'none',
                    'border-radius' : 'auto'
                });
        });
};

/*=================================================*/
navMenu = function () {
/*=================================================*/
    locParent.addClass('open');
    $('ul ul li.open', navigation).removeClass('open').parents('li').addClass('open');
    $('ul > li', navigation).has('ul')
        .hover(function () {
            $(this).toggleClass('hover');
        })
        .click(function () {
            if ($(this).hasClass('open')) {
                slideItUp(this);
            } else {
                slideItDown(this);
            }
        })
        .find('a')
        .focus(function () {
            slideItDown($(this).parent('li'));
        });
    $('ul > li', navigation).has('ul').addClass('has-child');
};

/*=================================================*/
slideItUp = function (elem) {
/*=================================================*/
    $(elem).find('ul').slideUp('fast', function () {
        $(this).parent('li').removeClass('open');
    });
};

/*=================================================*/
slideItDown = function (elem) {
/*=================================================*/
    $(elem).find('ul').slideDown().parent('li').addClass('open');
};

/*=================================================*/
scrollToTop = function (selector) {
/*=================================================*/
    $(selector).each(function () {
        $(this).click(function () {
            $('html,body').animate({scrollTop: 0}, 1000);
            return false;
        });
    });
};

/*=================================================*/
hideDetailsSummary = function () {
/*=================================================*/
    $('summary', mainContent).attr({hidden: "hidden"}).hide();
};

/*=================================================*/
showProduct = function () {
/*=================================================*/
    if (window.document.width >= 320 && isGoodBrowser == true) {
        $('img', thumbnails).add('h1', thumbnails).click(function () {
            drawPreviewLayer();

//            if (isGoodBrowser == false) {
//                $(this).parents('div.product').clone().appendTo('#product-preview');
//            } else {
                $(this).parents('div.product').clone().appendTo('#product-preview');
                productLink = $('#product-preview a[href*="aitsafe.com/cf/add.cfm"]');
                productLink.remove();
                $('#product-preview .figcaption').append(productLink);
//            }

            $('html, body').scrollTop(0);
            $('#product-preview-wrapper').height(window.document.height);

            closePreviewLayer();
        });
    }
    if (window.document.width <= 320) {
        $('figure', thumbnails).addClass('thumb');

        $('figure.thumb', thumbnails).live('click', makeLarge);
        $('figure.large', thumbnails).live('click', makeThumb);
    }
};

/*=================================================*/
makeLarge = function () {
/*=================================================*/
    $(this)
        .removeClass('thumb')
        .addClass('large')
        .add('img', this).animate({
            width: "250px",
            height: "250px",
            marginLeft: "4px"
        }, 500)
        .add($(this).parents('article.product').find('a[href*="aitsafe.com/cf/add.cfm"]'))
        .add($(this).parents('article.product').find('details div'))
        .css('float', 'none');
    $(this)
        .css('padding-bottom', '6px')
        .parents('article.product').find('div.attention')
        .css('width', '244px');
};

/*=================================================*/
makeThumb = function () {
/*=================================================*/
    $(this)
        .removeClass('large')
        .addClass('thumb')
        .css('float', 'left')
        .add('img', this).animate({
            width: "98px",
            height: "98px",
            marginLeft: "0px"
        }, 300);
    $(this).parents('article.product').find('a[href*="aitsafe.com/cf/add.cfm"]')
        .add($(this).parents('article.product').find('details div.attention'))
        .css('float', 'right');
    $(this).parents('article.product').find('div.attention')
        .css('width', '140px');
};

/*=================================================*/
drawPreviewLayer = function () {
/*=================================================*/
    $('body').append('<div id="product-preview-wrapper"><div id="product-preview"><span class="close-preview"><a id="close-preview">X</a></span></div></div>');
};

/*=================================================*/
closePreviewLayer = function () {
/*=================================================*/
    $('.close-preview, #product-preview-wrapper').click(function () {
        $('#product-preview-wrapper').remove();
    });
};

/*=================================================*/
$(document).ready(
    function () {
        $('#stylePicker').remove();
        $('body.editing').removeClass('editing');
        removeComments();
        initializeVars();
        pickStyle();
        browserNotice();
        tabFocus();
        navMenu();
        scrollToTop(topLink);
        hideDetailsSummary();
        showProduct();
/* end main function */
    }
/* end document.ready */
);