var currItem = "";
var prevItem = "";
var currSubItem = ""; 
var activeSubMenu = ""; //this is for keeping the sub menu visible on sub pages
var timer = 3;
var t = 0;
var version = $.browser.version;
var subMenuShowing = false;
var subMenuWrapped = false;
var thirdMenuWrapped = false;
var firstRun = true;
var activeMainImgMenu = "";
//activate main nav for ie6
$(document).ready(function() {
    if ($.browser.msie && $.browser.version.substr(0, 1) == "6") {
        $(".sub-menu-item > .swirl > li > a > img").css({ "behavior": "url(/styles/iepngfix.htc)" });
        $(".sub-menu-sub > .third-level-nav > .third-level-nav-center > .third-level-nav-icon-list > a > img").css({ "behavior": "url(/styles/iepngfix.htc)" });
        $("img[src='/images/btn-yellow.png']").attr({ "src": "/images/btn-dark-yellow.gif" });
    }
});
//show the active sub nav
function ShowActiveSubNav(item, currPage) {
    if (currPage == null || currPage == undefined || !currPage) {currPage = ""; }  
    if (item != '') {
        activeSubMenu = $(".nav > li > a[href='" + item + "']").attr("rel"); 
    }
    if(activeSubMenu != ""){
        var offset = $(".top-nav").offset();
        var x = offset.left;
        var y = offset.top + 48;
        $(".sub-menu").css({ "left": x, "top": y });                

        //this fixes the issue of the sub nav menu showing up over the top nav menu when
        //the user is logged in
        if ($("#adminmenu").attr("id") != undefined && firstRun) {
            firstRun = false;
            $(".sub-menu").css({ "left": x, "top": y + 52 });
        }

        $(".sub-menu").show();

        $(".sub-menu-" + activeSubMenu).show();
       
        //set active link on sub bar
        var bg = "url(/styles/images/sub-nav-item-bg.png) no-repeat right top";
        if ($.browser.msie && $.browser.version.substr(0, 1) != "6") {
            bg = "url(/styles/images/sub-nav-item-bg-ie.png) no-repeat right top";         
        } else if ($.browser.msie && $.browser.version.substr(0, 1) == "6") {
            bg = "url(/styles/images/bg-sub-nav-ie.jpg) no-repeat right top";
        }
        $(".sub-menu-" + activeSubMenu + " > ul > li > a[href='" + currPage + "']").css({ "background": bg });
        $(".sub-menu-" + activeSubMenu + " > ul > li > a").each(function() {
            if (currPage.indexOf($(this).attr("href").split("default.aspx").join("")) != -1) {
                $(this).css({ "background": bg });
            }
        });
        
        //when we roll over the sub menu items we want to keep the menu bar showing        
        $(".sub-menu-" + activeSubMenu + " > .sub-nav-list > li > a").bind("mouseenter", SubMenuItem_RollOverEvent);
        $(".sub-menu-" + activeSubMenu + " > .sub-nav-list > li > a").bind("mouseleave", SubMenuItem_RollOffEvent); 
                
    }
}
function ShowSubNav(item) {
    //clear last animation
    clearTimeout(t);
    //reset timer
    timer = 3;
    
    //hide active sub menu if showing
    if (activeSubMenu != "") {
        $(".sub-menu-" + activeSubMenu).hide();
    }
        
    //show sub menu if it is not visible
    if ($(".sub-menu:hidden") || subMenuShowing == false) {          
        var offset = $(".top-nav").offset();
        var x = offset.left;
        var y = offset.top + 48;
        $(".sub-menu").css({ "left": x, "top": y });
        $(".sub-menu").fadeIn("slow");
        subMenuShowing = true; //the sub-men:hidden doesn't work in ie6
    }

    //hide previous set of menu items
    if (prevItem != "" && prevItem != item) {
        $(".sub-menu-" + prevItem).hide();
    }

    //lets show the child elements    
    $(".sub-menu-" + item).show();
        
    
    //reset previous item
    prevItem = item;

    //set current item for referencing later
    currItem = item;

    //when we roll over the sub menu items we want to keep the menu bar showing
    $(".sub-menu-" + item + " > .sub-nav-list > li > a").bind("mouseenter", SubMenuItem_RollOverEvent);
    $(".sub-menu-" + item + " > .sub-nav-list > li > a").bind("mouseleave", SubMenuItem_RollOffEvent);    
}
//handle sub menu item roll over event
function SubMenuItem_RollOverEvent(event) {    
    //set current sub item
    currSubItem = $(this).attr("rel");

    //reset the timer
    timer = 3;

    //we don't want the timer to be counting down while rolled over the images
    clearTimeout(t);

    //prevent items from bubbling up
    event.stopPropagation();
    
    //check to see if there is a third level menu to show
    if ($(".sub-menu-sub-" + $(this).attr("rel")).length > 0) {
        //show third level sub menu
        var offset = $(this).offset();
        var currentItemPos = offset.left - 10; //10 is the left padding added to the item
        var currentItemWidth = $(this).width();
        x = (currentItemPos);
        x = x - ($(".sub-menu-sub-" + $(this).attr("rel")).width() / 2) + (currentItemWidth / 2);
                
        var y = 100 + $(".top-nav").offset().top;       

        //this is to prevent the menu from going off the screen
        var xcheck = x - $(".top-nav").offset().left;        
        if(xcheck < $("#wrapper").offset().left){
            x = $(".top-nav").offset().left;
        }

        $(".sub-menu-sub-" + $(this).attr("rel")).css({ "left": x, "top": y });
        $(".sub-menu-sub-" + $(this).attr("rel")).show();

        //bind rollover event for third level menu
        $(".sub-menu-sub-" + $(this).attr("rel")).bind("mouseenter", ThirdLevelMenuItem_RollOverEvent);
        $(".sub-menu-sub-" + $(this).attr("rel")).bind("mouseleave", ThirdLevelMenuItem_RollOffEvent);
    }
}
//handle sub menu item image roll off event
function SubMenuItem_RollOffEvent(event) {
    //start the timer for hiding the menu bar
    CheckStatus();

    //unbind image rollover and rollout events
    //$(this).unbind("mouseenter",SubMenuItem_RollOverEvent);
    //$(this).unbind("mouseleave",SubMenuItem_RollOffEvent);

    //hide third level sub menu
    $(".sub-menu-sub-" + $(this).attr("rel")).hide();
}
//handle third level menu item rollover evnet
function ThirdLevelMenuItem_RollOverEvent(event) {
    //keep this item showing    
    $(this).show();

    //keep the parent item background highlighted
    $("a[rel=" + currSubItem + "]").addClass("sub-menu-sub-active-parent");
        
    //reset the timer
    timer = 3;

    //we don't want the timer to be counting down while rolled over the images
    clearTimeout(t);

    //prevent items from bubbling up
    event.stopPropagation();
}
function ThirdLevelMenuItem_RollOffEvent(event) {
    //start the timer for hiding the menu bar
    CheckStatus();
   
    //hide this third level item now
    $(this).hide();        

    //remove background item from parent
    $("a[rel=" + currSubItem + "]").removeClass("sub-menu-sub-active-parent");
}
//start count down to hide sub nav menu
function HideSubNav(item) {
    CheckStatus();
}
//set timer to count down till we hide the menu
function CheckStatus() {
    //prevent interval from bubbling up
    clearTimeout(t);

    if (timer == 0) {
        timer = 3;
        //lets hide the child elements        
        $(".sub-menu-" + currItem).hide();
        subMenuShowing = false;
        if (activeSubMenu == "") {
            //hide sub menu            
            $(".sub-menu").fadeOut("slow");            
            subMenuShowing = false;
        } else {
            ShowActiveSubNav('');
        }
        currItem = "";
    } else {
        timer--;
        t = setTimeout("CheckStatus()", 700);
    }
}
//if window is resized we need to reposition the menu
$(window).resize(function() {
    var c = $(".top-nav");
    if ($(".top-nav").length > 0) {
        var offset = $(".top-nav").offset();
        var x = offset.left;
        var y = offset.top + 48;
        $(".sub-menu").css({ "left": x, "top": y });
    }
});


(function($) {
    var cache = [];
    // Arguments are image paths relative to the current page.
    $.preLoadImages = function() {
        var args_len = arguments.length;
        for (var i = args_len; i--; ) {
            var cacheImage = document.createElement('img');
            cacheImage.src = arguments[i];
            cache.push(cacheImage);
        }
    }
})(jQuery)


function preload() {
    jQuery.preLoadImages("/images/intro-background.jpg");
    jQuery.preLoadImages("/images/intro-text.png");
    jQuery.preLoadImages("/images/intro1.png");
    jQuery.preLoadImages("/images/intro2.png");
    jQuery.preLoadImages("/images/intro3.png");
    jQuery.preLoadImages("/images/cover-image.jpg");
    jQuery.preLoadImages("/images/slider/ReliaBoard.jpg");
    jQuery.preLoadImages("/images/slider/XLM.jpg");
    jQuery.preLoadImages("/images/slider/twinfinish.jpg");
    jQuery.preLoadImages("/images/slider/floorizon.jpg");
    jQuery.preLoadImages("/images/slider/docksider.jpg");
    jQuery.preLoadImages("/images/slider/radiancerail.jpg");
    jQuery.preLoadImages("/images/slider/Ornamental-Rail.jpg");
    jQuery.preLoadImages("/images/slider/BuilderRail.jpg");
    jQuery.preLoadImages("/images/slider/DeckLites.jpg");
    jQuery.preLoadImages("/images/slider/FenceScape.jpg");
    jQuery.preLoadImages("/images/slider/DrySpace.jpg");
    jQuery.preLoadImages("/images/slider/earthwood-evolutions.jpg");
}

$(window).load(function() {
    $('#site-intro').show();
    $('#site-intro-background').show(function() {
        $('#earthwood-evolution').show();
        $('.new-arrow-right').show();
        $('.new-arrow-left').show();
        $('.new-slideshow-buttons').show();
        $('#site-intro').css("background-image", "url(/images/cover-image.jpg)");
        $('#intro1').fadeIn();
        setTimeout(function() { $('#intro2').fadeIn() }, 1000);
        setTimeout(function() { $('#intro3').fadeIn() }, 1900);
        setTimeout(function() { $('.intro-img').animate({ "marginTop": "128px" }, { "duration": "slow" }) }, 3000);
        setTimeout(function() { $('#intro-text').fadeIn(1000) }, 3200);
        setTimeout(function() { $('#site-intro-background').animate({ "marginTop": "399px" }, { "duration": "slow" }) }, 5200);
        setTimeout(function() { $('#site-intro-background').hide(); }, 6200);
        setTimeout(function() { $('#site-intro').hide(); }, 8798);
        setTimeout(function() { $('#left-main-section').fadeIn('slow'); }, 8100);
        setTimeout(function() { $('#right-main-section').fadeIn('slow'); }, 8100);

        //$('#slideshow-intro').hide();
       
      
    });


});

var slidecats = [];
var catslides = [];
var currentcat, currentslide = 0;
preload();

$(document).ready(function() {
    //activeMainImgMenu = "decking";
    currentcat = 0;
    currentslide = 0;

                            $(".right-main-a").click(function(e) {
                                e.preventDefault();

                                var clickedId = $(this).attr('id');

                                //alert(clickedId);
                                //alert(clickedId.split('-')[1]);
                                $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide) + ")").hide();
                                $("#" + slidecats[parseInt(currentcat)] + "-" + currentcat).removeClass('selected-item-flash');

                                catslides = [];
                                //alert('.slide-categories:eq(' + parseInt(currentcat) + ') .new-slide');
                                $('.slide-categories:eq(' + parseInt(clickedId.split('-')[1]) + ') .new-slide').each(function(index) {
                                    //alert(index + ': ' + $(this).attr('id'));
                                    catslides.push($(this).attr('id'));
                                });

                                currentcat = clickedId.split('-')[1];
                                currentslide = 0;
                                createSlideButtons(1);

                                $("#" + slidecats[parseInt(currentcat)] + "-" + currentcat).addClass('selected-item-flash');
                                $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide) + ")").fadeIn(); ;

                            });

  


        $('.slide-categories').each(function(index) {
            //alert(index + ': ' + $(this).attr('id'));
            slidecats.push($(this).attr('id'));
        });

        $(".new-arrow-right>a").click(function(e) {
            e.preventDefault();

            catslides = [];
            $('.slide-categories:eq(' + parseInt(currentcat) + ') .new-slide').each(function(index) {
                catslides.push($(this).attr('id'));
            });

            //if at end go to beginning
            if (currentcat == (slidecats.length - 1) && currentslide == (catslides.length - 1)) {

                $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide) + ")").hide();
                $("#" + slidecats[parseInt(currentcat)] + "-" + currentcat).removeClass('selected-item-flash');
                currentcat = 0;
                currentslide = 0;
                catslides = [];
                $('.slide-categories:eq(' + parseInt(currentcat) + ') .new-slide').each(function(index) {
                    catslides.push($(this).attr('id'));
                });

                $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide) + ")").fadeIn();
                $("#" + slidecats[parseInt(currentcat)] + "-" + currentcat).addClass('selected-item-flash');
                createSlideButtons(1);

                return;
            }

            //we need to change categories
            if ((catslides.length - 1) == currentslide) {

                catslides = [];
                $('.slide-categories:eq(' + parseInt(currentcat) + ') .new-slide').each(function(index) {
                    catslides.push($(this).attr('id'));
                });
                $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide) + ")").hide();
                $("#" + slidecats[parseInt(currentcat)] + "-" + currentcat).removeClass('selected-item-flash');
                currentcat++;
                currentslide = 0;
                catslides = [];
                $('.slide-categories:eq(' + parseInt(currentcat) + ') .new-slide').each(function(index) {
                    catslides.push($(this).attr('id'));
                });
                $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide) + ")").fadeIn();
                $("#" + slidecats[parseInt(currentcat)] + "-" + currentcat).addClass('selected-item-flash');
                createSlideButtons(1);
            } else {

                $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide) + ")").hide();
                $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide + 1) + ")").fadeIn();

                currentslide++;

                $('.slideshow-button').removeClass("slideshow-button-active");
                $("#btnSlideShow" + parseInt(currentslide + 1)).addClass("slideshow-button-active");
            }


        });

        $(".new-arrow-left>a").click(function(e) {
            e.preventDefault();

            //if at begin, go to end
            if (currentcat == 0 && currentslide == 0) {
                $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide) + ")").hide();
                $("#" + slidecats[parseInt(currentcat)] + "-" + currentcat).removeClass('selected-item-flash');

                currentcat = slidecats.length - 1;
                currentslide = 0;

                catslides = [];

                $('.slide-categories:eq(' + parseInt(currentcat) + ') .new-slide').each(function(index) {
                    catslides.push($(this).attr('id'));
                });

                $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide) + ")").fadeIn();
                $("#" + slidecats[parseInt(currentcat)] + "-" + currentcat).addClass('selected-item-flash');
                createSlideButtons(catslides.length);

                return;
            }
            catslides = [];

            $('.slide-categories:eq(' + parseInt(currentcat) + ') .new-slide').each(function(index) {
                catslides.push($(this).attr('id'));
            });

            //we need to change categories
            if (currentslide == 0) {

                catslides = [];
                $('.slide-categories:eq(' + parseInt(currentcat - 1) + ') .new-slide').each(function(index) {
                    catslides.push($(this).attr('id'));
                });
                $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide) + ")").hide();
                $("#" + slidecats[parseInt(currentcat)] + "-" + currentcat).removeClass('selected-item-flash');
                currentcat--;
                currentslide = catslides.length - 1;
                $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide) + ")").fadeIn();
                $("#" + slidecats[parseInt(currentcat)] + "-" + currentcat).addClass('selected-item-flash');
                createSlideButtons(catslides.length);
            } else {

                $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide) + ")").hide();
                $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide - 1) + ")").fadeIn();
                currentslide--;

                $('.slideshow-button').removeClass("slideshow-button-active");
                $("#btnSlideShow" + parseInt(currentslide + 1)).addClass("slideshow-button-active");
            }

        });

        createSlideButtons(1);



   
});


function createSlideButtons(i) {
    $('.new-slideshow-buttons').html("");
    if (catslides.length == 1) {
        return;
    }    
    $('.slide-categories:eq(' + parseInt(currentcat) + ') .new-slide').each(function(index) {


        $('.new-slideshow-buttons').append('<input type="button" onclick="ChangeButtonActive(this);" id="btnSlideShow' + (index + 1) + '"  class="slideshow-button" value="' + (index + 1) + '" />');
    });

    $("#btnSlideShow" + parseInt(i)).addClass("slideshow-button-active");
}
function ChangeButtonActive(e) {
    //alert(e.id);
        
    $('.slideshow-button').removeClass("slideshow-button-active");
    $('#' + e.id).addClass("slideshow-button-active");
   
    var buttonVal = $('#' + e.id).val();

    $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(currentslide) + ")").hide();
    $("#" + slidecats[parseInt(currentcat)] + " .new-slide:eq(" + parseInt(buttonVal-1) + ")").fadeIn();
    currentslide = buttonVal - 1;
    
}