function initMenu(){
    $('#navigation ul').hide();
    $('#navigation li.main').mouseover(function(){
    }, function(){
    
    });
    
    // on load, let's check to see if there is a page that should be active ...
    //var category = $.url.param("cat");
    //var id = $.url.param("id");
    
    
    $('#navigation li.main').click(function(){
        $('#navigation ul').slideUp('slow');
        $(this).slideUp('fast').slideDown('normal');
        $(this).children().slideDown('normal');
        $(this).next().slideDown('normal');
    });
    // for browsers that are supporting the javascript let's do some ajax
    $('#navigation ul li.small a').click(function(){
        // remove any old highlighted items.
        $(".small_highlighted").removeClass('small_highlighted').addClass('small');
        
        // swap out the class and highlight the new one selected
        $(this).parent().removeClass('small').addClass('small_highlighted');
        
        // fade out the current image to show the loading gif.
        //TODO: finish the ajax load
        var catNum = $(this).attr("href").match(/cat=([0-9]+)/)[1];
        
        // do a tiny bit of RegEx to recognize whether or not the user is on the products poriton of the site or the learning portion of the site for AJAX
        var pagepattern = new RegExp("product|learn");
        var page = pagepattern.exec(window.location.href);
        
        if (page == 'product') {
            $('.left').empty().load("ajax.php", {
                product: 1,
                cat: catNum
            }, initProduct);
        }
        if (page == 'learn') {
            $('.left').empty().load("ajax.php", {
                learn: 1,
                cat: catNum
            }, initProduct);
        }
        
        // do some ajax in the gallery area, and the thumbs area.
        
        // don't follow the link
        return false;
    });
    // if the page is reloaded for whatever reason ...
    // give the use an indication of where they are in the navigation tree
    $(".small_highlighted").parent().slideDown('slow');
};

function initPage(){
    // crossfade the main page.
    
    $('#mainContent').hide();
    $('#footer').hide();
    $('#navigation').hide();
    $('#mainContent').fadeIn(2000);
    $('#footer').slideDown(1000);
    
    //fade in the menu, and add the fancy styles
    $(this).queue(function(){
        initMenu();
        $(this).dequeue();
    })
    $('#navigation').fadeIn(4000);
    initProduct();
    
    $('#slideshow').slideshow({
        timeout: 0000,
        fadetime: 4000,
        type: 'sequence',
    });
    
};

function initProduct(){
    // hide the gallery_box
    $("div.gallery img").hide();
    $("div.gallery img").fadeIn(3000);
    animateThumbs();
    // Hovering over the featured element
    $("div.gallery img").hover(function(){ //rolling on
        $("div.gallery_box").slideDown("fast");
    }, function(){ // rolling off
        $("div.gallery_box").slideUp("fast");
    });
    // click next on a pagination component
    $("a.paginator").live('click', function(){
        var catNum = $(this).attr("href").match(/cat=([A-Za-z0-9]+)/)[1];
        var pageNum = $(this).attr("href").match(/pagenum=([0-9]+)/)[1];
        $("div#thumbs").empty().load("ajax.php", {
            product: 1,
            thumbs: 1,
            pagenum: pageNum,
            cat: catNum
        }, function(){
            //begin of rebinding
            $("ul.thumb li").hover(function(){
                $(this).css({
                    'z-index': '10'
                }); /*Add a higher z-index value so this image stays on top*/
                $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/.animate({
                
                    marginTop: '-50px', /* The next 4 lines will vertically align this image */
                    marginLeft: '-50px',
                    top: '50%',
                    left: '50%',
                    width: '80px', /* Set new width */
                    height: '80px', /* Set new height */
                    padding: '10px'
                }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
            }, function(){
                $(this).css({
                    'z-index': '0'
                }); /* Set z-index back to 0 */
                $(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/.animate({
                
                    marginTop: '0', /* Set alignment back to default */
                    marginLeft: '0',
                    top: '0',
                    left: '0',
                    width: '30px', /* Set width back to default */
                    height: '30px', /* Set height back to default */
                    padding: '5px'
                }, 400);
            });
            
            //end of rebinding
        
        });
        return false;
    });
    // Click on the a product thumbnail
    $("ul.thumb li a").live('click', (function(){
        // 1st step, fade out the current image
        $("div.gallery img").fadeOut("medium");
        $("div.gallery_box").slideUp("fast");
        var image_url = $(this).children().attr("src");
        // add in the replacement to the queue
        $("div.gallery img").queue(function(){
            $("div.gallery img").attr({
                src: image_url
            });
            $("div.gallery img").hide();
            $(this).dequeue();
        });
        $("div.gallery img").fadeIn(2000);
        // update the hoverbox
        var idNum = $(this).attr("href").match(/id=([0-9]+)/)[1];
        $('.gallery_box').empty().load("ajax.php", {
            product: 1,
            describe: 1,
            id: idNum
        });
        
        // AJAX supported ... cancel the page request
        return false;
    }));
    
    // Product Thumbnails
    $("ul.thumb li").hover(function(){
        $(this).css({
            'z-index': '10'
        }); /*Add a higher z-index value so this image stays on top*/
        $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/.animate({
        
            marginTop: '-50px', /* The next 4 lines will vertically align this image */
            marginLeft: '-50px',
            top: '50%',
            left: '50%',
            width: '80px', /* Set new width */
            height: '80px', /* Set new height */
            padding: '10px'
        }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
    }, function(){
        $(this).css({
            'z-index': '0'
        }); /* Set z-index back to 0 */
        $(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/.animate({
        
            marginTop: '0', /* Set alignment back to default */
            marginLeft: '0',
            top: '0',
            left: '0',
            width: '30px', /* Set width back to default */
            height: '30px', /* Set height back to default */
            padding: '5px'
        }, 400);
    });
}

function animateThumbs(){
    $("#gallery_box").hide().fadeIn(4000);
}

$(document).ready(function(){
    initPage();
    //begins slideshow stuff
    var currentPosition = 0;
    var slideWidth = 490;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    
    // Remove scrollbar in JS
    $('#slidesContainer').css('overflow', 'hidden');
    
    // Wrap all .slides with #slideInner div
    slides.wrapAll('<div id="slideInner"></div>') // Float left to display horizontally, readjust .slides width
.css({
        'float': 'left',
        'width': slideWidth
    });
    
    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);
    
    // Insert left and right arrow controls in the DOM
    $('#slideshow').prepend('<span class="control" id="leftControl">Move left</span>').append('<span class="control" id="rightControl">Move right</span>');
    
    // Hide left arrow control on first load
    manageControls(currentPosition);
    
    // Create event listeners for .controls clicks
    $('.control').bind('click', function(){
        // Determine new position
        currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
        
        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
            'marginLeft': slideWidth * (-currentPosition)
        });
    });
    
    // manageControls: Hides and shows controls depending on currentPosition
    function manageControls(position){
        // Hide left arrow if position is first slide
        if (position == 0) {
            $('#leftControl').hide()
        }
        else {
            $('#leftControl').show()
        }
        // Hide right arrow if position is last slide
        if (position == numberOfSlides - 1) {
            $('#rightControl').hide()
        }
        else {
            $('#rightControl').show()
        }
    }
    //ends slideshow stuff

});