jQuery(document).ready(function($) {
    /***********************************
    * jScrollPane on the Bicycles pages
    ***********************************/
    if ($('#content-copy').length) {
        var $divBicycles = $('#content-copy.bicycles');

        $divBicycles.jScrollPane();
        $divBicycles.css({'left': '0'});
        
        $('.jScrollPaneContainer').css({'width': '550px'});
    }

    if ($('#blog').length) {
        var $divBlogPosts = $('#blog-posts');
        $divBlogPosts.jScrollPane();
        $divBlogPosts.css({'left': '0'});
    }
    
    
    /*****************************************************************************************************
    * Fix landing page viewport width woes (smaller than 1253px wide misaligns the landing image copy text
    *  with the logo
    *****************************************************************************************************/
    function landingResizeAndReposition() {
        var viewportWidth = $(window).width();
        var newImageLeftVal = 0 + "";
        
        if (viewportWidth < 960) {
            newImageLeftVal = "-146px";
        }
        else if ((960 < viewportWidth) && (viewportWidth < 1253)) {
            newImageLeftVal = (-146+((viewportWidth - 960)/2)) + "px";
        }
        else /* (viewportWidth >= 1253) */ {
            //do nothing
        }
        
        $('.landing * img').css({'left': newImageLeftVal});
    }

    $(window).resize(landingResizeAndReposition);
    

    /***********************************
    * when the page is first loaded, 
    * resize and move landing image if
    * needed
    ***********************************/
    if ($('div.landing').length) {
        landingResizeAndReposition();
    }
    
    
    
    /*****************************************************************************************************
    * Bicycles Submenu show/hide onClick of Bicycles nav image
    *****************************************************************************************************/
    var $bicyclesNav = $('#navigation ul.main li.bicycles');
    var $bicyclesSubmenu = $('ul.bicycles-submenu');
    var $bicyclesSubmenuStatus = $bicyclesSubmenu.css("display");
    
    function bSonHover() {
        $(this).addClass("hover");
        $bicyclesSubmenu.css({
            'display': 'block'
        });
    }
    
    function bSoffHover() {
        $(this).removeClass("hover");
        $bicyclesSubmenu.css({
            'display': 'none'
        });
    }
    
    $bicyclesNav.hover(bSonHover, bSoffHover);
    
    $bicyclesNav.click(function () {
        if (!($(this).hasClass("hover"))) {
            if ($bicyclesSubmenuStatus == "none") {
                $bicyclesSubmenu.css({
                    'display': 'block'
                });
            }
            else
            {
                $bicyclesSubmenuStatus = "show";
                $bicyclesSubmenu.css({
                    'display': 'none'
                });
            }
        }
    });
    
    
    
    /*****************************************************************************************************
    * Bicycles pages thumbnail hover changes large image
    *****************************************************************************************************/
    var $largeImage = $('#large-image');
    if ($largeImage.length) {
        var thumbNum = 0;
        //var slug = $('div.thumbnails-row1 img:first-child').attr('class').replace(/.*thumb(\d+).([A-Za-z0-9-]+)*/, '$2');
        var slug = $('#thumbnails ul.thumbnail-hovers li:first-child').attr('class').replace(/.*thumb(\d+).([A-Za-z0-9-]+)*/, '$2');
        
        /**********************************************************************
        * replace loadingAnimation.gif once the large image has loaded
        **********************************************************************/
        if ($('#large-image #image0').hasClass('loading')) {
            $('#large-image #image0 *').css({'display':'none'});
            $('#large-image #image0 img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/0.jpg').load(function() {
                $('#large-image').css({'background':'none'});
                $('#large-image #image0')
                    .css({'display': 'block','background':'none'})
                    .removeClass('loading');
                $('#large-image #image0 *')
                    .css({'display': 'block','background':'none'});
                
                if ($('#thumbnails').hasClass('loading')) {
                    $('#thumbnails').css({'display':'block'});
                    $('#thumbnails img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/thumbnails.jpg').load(function() {
                        $('#thumbnails').css({'background-image':'url(/wp-content/themes/mydutchbike/images/bikes/' + slug + '/thumbnails.jpg)'});
                    }); // end hasClass('loading')
                } // end if ($('#thumbnails').hasClass('loading'))
            }); // end hasClass('loading')
        }
        
        // THE FOLLOWING BLOCK WORKS FOR IMAGE1.  REPLICATE FOR IMAGE2-IMAGE12!!!
        if ($('#large-image #image1').hasClass('loading')) {
            $('#large-image #image1').css({'background-image':'url(/wp-content/themes/mydutchbike/images/loadingAnimation.gif)'});
            $('#large-image #image1 *').css({'display':'none'});
            $('#large-image #image1 img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/1.jpg').load(function() {
                $('#large-image #image1')
                    .css({'display': 'none','background':'none'})
                    .removeClass('loading');
                $('#large-image #image1 *')
                    .css({'display': 'block','background':'none'});
            }); // end hasClass('loading')
        }
        
        if ($('#large-image #image2').hasClass('loading')) {
            $('#large-image #image2').css({'background-image':'url(/wp-content/themes/mydutchbike/images/loadingAnimation.gif)'});
            $('#large-image #image2 *').css({'display':'none'});
            $('#large-image #image2 img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/2.jpg').load(function() {
                $('#large-image #image2')
                    .css({'display': 'none','background':'none'})
                    .removeClass('loading');
                $('#large-image #image2 *')
                    .css({'display': 'block','background':'none'});
            }); // end hasClass('loading')
        }
        
        if ($('#large-image #image3').hasClass('loading')) {
            $('#large-image #image3').css({'background-image':'url(/wp-content/themes/mydutchbike/images/loadingAnimation.gif)'});
            $('#large-image #image3 *').css({'display':'none'});
            $('#large-image #image3 img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/3.jpg').load(function() {
                $('#large-image #image3')
                    .css({'display': 'none','background':'none'})
                    .removeClass('loading');
                $('#large-image #image3 *')
                    .css({'display': 'block','background':'none'});
            }); // end hasClass('loading')
        }
        
        if ($('#large-image #image4').hasClass('loading')) {
            $('#large-image #image4').css({'background-image':'url(/wp-content/themes/mydutchbike/images/loadingAnimation.gif)'});
            $('#large-image #image4 *').css({'display':'none'});
            $('#large-image #image4 img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/4.jpg').load(function() {
                $('#large-image #image4')
                    .css({'display': 'none','background':'none'})
                    .removeClass('loading');
                $('#large-image #image4  *')
                    .css({'display': 'block','background':'none'});
            }); // end hasClass('loading')
        }
        
        if ($('#large-image #image5').hasClass('loading')) {
            $('#large-image #image5').css({'background-image':'url(/wp-content/themes/mydutchbike/images/loadingAnimation.gif)'});
            $('#large-image #image5 *').css({'display':'none'});
            $('#large-image #image5 img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/5.jpg').load(function() {
                $('#large-image #image5')
                    .css({'display': 'none','background':'none'})
                    .removeClass('loading');
                $('#large-image #image5 *')
                    .css({'display': 'block','background':'none'});
            }); // end hasClass('loading')
        }
        
        if ($('#large-image #image6').hasClass('loading')) {
            $('#large-image #image6').css({'background-image':'url(/wp-content/themes/mydutchbike/images/loadingAnimation.gif)'});
            $('#large-image #image6 *').css({'display':'none'});
            $('#large-image #image6 img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/6.jpg').load(function() {
                $('#large-image #image6')
                    .css({'display': 'none','background':'none'})
                    .removeClass('loading');
                $('#large-image #image6 *')
                    .css({'display': 'block','background':'none'});
            }); // end hasClass('loading')
        }
        
        if ($('#large-image #image7').hasClass('loading')) {
            $('#large-image #image7').css({'background-image':'url(/wp-content/themes/mydutchbike/images/loadingAnimation.gif)'});
            $('#large-image #image7 *').css({'display':'none'});
            $('#large-image #image7 img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/7.jpg').load(function() {
                $('#large-image #image7')
                    .css({'display': 'none','background':'none'})
                    .removeClass('loading');
                $('#large-image #image7 *')
                    .css({'display': 'block','background':'none'});
            }); // end hasClass('loading')
        }
        
        if ($('#large-image #image8').hasClass('loading')) {
            $('#large-image #image8').css({'background-image':'url(/wp-content/themes/mydutchbike/images/loadingAnimation.gif)'});
            $('#large-image #image8 *').css({'display':'none'});
            $('#large-image #image8 img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/8.jpg').load(function() {
                $('#large-image #image8')
                    .css({'display': 'none','background':'none'})
                    .removeClass('loading');
                $('#large-image #image8 *')
                    .css({'display': 'block','background':'none'});
            }); // end hasClass('loading')
        }
        
        if ($('#large-image #image9').hasClass('loading')) {
            $('#large-image #image9').css({'background-image':'url(/wp-content/themes/mydutchbike/images/loadingAnimation.gif)'});
            $('#large-image #image9 *').css({'display':'none'});
            $('#large-image #image9 img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/9.jpg').load(function() {
                $('#large-image #image9')
                    .css({'display': 'none','background':'none'})
                    .removeClass('loading');
                $('#large-image #image9 *')
                    .css({'display': 'block','background':'none'});
            }); // end hasClass('loading')
        }
        
        if ($('#large-image #image10').hasClass('loading')) {
            $('#large-image #image10').css({'background-image':'url(/wp-content/themes/mydutchbike/images/loadingAnimation.gif)'});
            $('#large-image #image10 *').css({'display':'none'});
            $('#large-image #image10 img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/10.jpg').load(function() {
                $('#large-image #image10')
                    .css({'display': 'none','background':'none'})
                    .removeClass('loading');
                $('#large-image #image10 *')
                    .css({'display': 'block','background':'none'});
            }); // end hasClass('loading')
        }
        
        if ($('#large-image #image11').hasClass('loading')) {
            $('#large-image #image11').css({'background-image':'url(/wp-content/themes/mydutchbike/images/loadingAnimation.gif)'});
            $('#large-image #image11 *').css({'display':'none'});
            $('#large-image #image11 img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/11.jpg').load(function() {
                $('#large-image #image11')
                    .css({'display': 'none','background':'none'})
                    .removeClass('loading');
                $('#large-image #image11 *')
                    .css({'display': 'block','background':'none'});
            }); // end hasClass('loading')
        }
        
        if ($('#large-image #image12').hasClass('loading')) {
            $('#large-image #image12').css({'background-image':'url(/wp-content/themes/mydutchbike/images/loadingAnimation.gif)'});
            $('#large-image #image12 *').css({'display':'none'});
            $('#large-image #image12 img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/12.jpg').load(function() {
                $('#large-image #image12')
                    .css({'display': 'none','background':'none'})
                    .removeClass('loading');
                $('#large-image #image12 *')
                    .css({'display': 'block','background':'none'});
            }); // end hasClass('loading')
        }
        
        
        
        //TRYING TO GET THIS BLOG BELOW TO WORK FOR ALL USING SELECTORS INSTEAD OF STATIC CODE FOR 12 DIV's
        /*$('.loading') {
            $(this).css({'background-image':'url(/wp-content/themes/mydutchbike/images/loadingAnimation.gif)'})
            $(this + ' *').css({'display':'none'});
            $(this+ ' img').attr('src', '/wp-content/themes/mydutchbike/images/bikes/' + slug + '/1.jpg').load(function() {
                $(this)
                    .css({'display': 'block','background':'none'})
                    .removeClass('loading');
                $(this + ' *')
                    .css({'display': 'block','background':'none'});
            });*/ // end hasClass('loading')
        /*}*/
                
        
        /**********************************************************************
        * When hovering off the entire thumbnail section
        *  replace div#imageX with div#image0
        **********************************************************************/
        $('#thumbnails').hover(
            function(){}, // onHover
            function(){
                $('#large-image div:not(#image0)').fadeOut("slow");//.css({'display':'none'});
                $('#large-image #image0').fadeIn("slow");//.css({'display': 'block'})
            }
        ); // end $('#thumbnails').hover()
        
        
        /**********************************************************************
        * When hovering over individual thumbnails
        *  replace div#image0 with one that matches current thumbnail
        **********************************************************************/
        //$('#thumbnails * > img').hover(
        //    function () {
        //        thumbNum = $(this).attr('class').replace(/.*thumb(\d+).*/, '$1');
        //        var currentImgToShow = 'image'+thumbNum;
        //        $('#large-image div:not(#'+currentImgToShow+')').fadeOut("slow");//.css({'display':'none'});
        //        $('#large-image div#'+currentImgToShow).fadeIn("slow"); //.css({'display':'block'})
        //    }, 
        //    function () {} // offHover
        //); // end $('#thumbnails * > img').hover()
        $('#thumbnails * > li').hover(
            function () {
                thumbNum = $(this).attr('class').replace(/.*thumb(\d+).*/, '$1');
                var currentImgToShow = 'image'+thumbNum;
                $('#large-image div:not(#'+currentImgToShow+')').fadeOut("slow");//.css({'display':'none'});
                $('#large-image div#'+currentImgToShow).fadeIn("slow"); //.css({'display':'block'})
            }, 
            function () {} // offHover
        ); // end $('#thumbnails * > img').hover()
        
        
    } // end if $largeImage.length {}
    
    
});