/* <![CDATA[ */
    
    $( document ).ready( function()
    {
        var animDuration = 1000,
        animEasingType   = 'easeOutQuint';
        
        var slider   = $( '#tabsSlider' ),
        blogsImg     = new Image(),
        blogsImgOver = new Image(),
        catsImg      = new Image(),
        catsImgOver  = new Image(),
        postsImg      = new Image(),
        postsImgOver  = new Image();
        
        slider.css( { display: 'block' } );
        blogsImg.src     = 'fileadmin/templates/PLG-Main-imgs/blog-tabs-blogs-gray.png';
        blogsImgOver.src = 'fileadmin/templates/PLG-Main-imgs/blog-tabs-blogs-blue.png';
        catsImg.src      = 'fileadmin/templates/PLG-Main-imgs/blog-tabs-cats-gray.png';
        catsImgOver.src  = 'fileadmin/templates/PLG-Main-imgs/blog-tabs-cats-blue.png';
        postsImg.src      = 'fileadmin/templates/PLG-Main-imgs/blog-tabs-arts-gray.png';
        postsImgOver.src  = 'fileadmin/templates/PLG-Main-imgs/blog-tabs-arts-blue.png';
        
        var contents   = $( '#contentsContainer' ),
        contentsW      = contents.outerWidth(),
        closeSliderBtn = $( '#closeSliderBtn' ),
        blogsTab       = $( '#blogsTab' ),
        blogsTabImg    = $( '#blogsTab > IMG' ),
        blogsContent   = $( '#blogsContent' ),
        catsTab        = $( '#catsTab' ),
        catsTabImg     = $( '#catsTab > IMG' ),
        catsContent    = $( '#catsContent' ),
        postsTab        = $( '#postsTab' ),
        postsTabImg     = $( '#postsTab > IMG' ),
        postsContent    = $( '#postsContent' )
        activeEl       = null,
        tabOpen        = false;
        
        slider.css( { left: -contentsW } );
        blogsContent.css( { display: 'none' } );
        catsContent.css( { display: 'none' } );
        postsContent.css( { display: 'none' } );
        
        /* Fix a glitch that show up when one of the panel is less tall than
         * the tabs container. Screenshot: http://cl.ly/bHG
         * — Romain Ruetschi <romain@kryzalid.com>
         */
        contents.css( 'minHeight', $( '#tabsContainer' ).height() + 15 );
        
        /* blogsTab events
         */
        blogsTab.mouseover( function()
        {
            blogsTab.css( { cursor: 'pointer' } );
            
            if( activeEl != blogsTab )
            {
                blogsTabImg[ 0 ].src = blogsImgOver.src;
            }
            
        } ).mouseout( function()
        {
            blogsTab.css( { cursor: 'none' } );
            
            if( activeEl != blogsTab )
            {
                blogsTabImg[ 0 ].src = blogsImg.src;
            }
            
        } ).click( function()
        {
            if( activeEl == blogsTab ) // close the slider
            {
                //blogsTab.removeClass( 'active' );
                
                slider.animate(
                    { left: -contentsW },
                    {
                        duration: animDuration,
                        easing:   animEasingType,
                        complete: function()
                        {
                            blogsTab.removeClass( 'active' );
                            blogsTabImg[ 0 ].src = blogsImg.src;
                        }
                    }
                );
                
                tabOpen  = false;
                activeEl = null;
            }
            else // swap the active element & open the slider if not already opened
            {
                catsTab.removeClass( 'active' );
                catsContent.css( { display: 'none' } );
                catsTabImg[ 0 ].src = catsImg.src;
                
                postsTab.removeClass( 'active' );
                postsContent.css( { display: 'none' } );
                postsTabImg[ 0 ].src = postsImg.src;
                
                blogsTab.addClass( 'active' );
                blogsContent.css( { display: 'block' } );
                
                if( !tabOpen )
                {
                    slider.animate(
                        { left: 0 },
                        { duration: animDuration, easing: animEasingType/*, complete: function() { blogsTab.addClass( 'active' ); }*/ }
                    );
                    
                    tabOpen = true;
                }
                
                activeEl = blogsTab;
            }
        } );
        
        /* catsTab events
         */
        catsTab.mouseover( function()
        {
            catsTab.css( { cursor: 'pointer' } );
            
            if( activeEl != catsTab )
            {
                catsTabImg[ 0 ].src = catsImgOver.src;
            }
            
        } ).mouseout( function()
        {
            catsTab.css( { cursor: 'none' } );
            
            if( activeEl != catsTab )
            {
                catsTabImg[ 0 ].src = catsImg.src;
            }
            
        } ).click( function()
        {
            if( activeEl == catsTab ) // close the slider
            {
                //catsTab.removeClass( 'active' );
                
                slider.animate(
                    { left: -contentsW },
                    {
                        duration: animDuration,
                        easing:   animEasingType,
                        complete: function()
                        {
                            catsTab.removeClass( 'active' );
                            catsTabImg[ 0 ].src = catsImg.src;
                        }
                    }
                );
                
                tabOpen  = false;
                activeEl = null;
            }
            else // swap the active element & open the slider if not already opened
            {
                blogsTab.removeClass( 'active' );
                blogsContent.css( { display: 'none' } );
                blogsTabImg[ 0 ].src = blogsImg.src;
                
                postsTab.removeClass( 'active' );
                postsContent.css( { display: 'none' } );
                postsTabImg[ 0 ].src = postsImg.src;
                
                catsTab.addClass( 'active' );
                catsContent.css( { display: 'block' } );
                
                if( !tabOpen )
                {
                    slider.animate(
                        { left: 0 },
                        { duration: animDuration, easing: animEasingType/*, complete: function() { catsTab.addClass( 'active' ); }*/ }
                    );
                    
                    tabOpen = true;
                }
                
                activeEl = catsTab;
            }
        } );
        
        
        /* postsTab events
         */
        postsTab.mouseover( function()
        {
            postsTab.css( { cursor: 'pointer' } );
            
            if( activeEl != postsTab )
            {
                postsTabImg[ 0 ].src = postsImgOver.src;
            }
            
        } ).mouseout( function()
        {
            postsTab.css( { cursor: 'none' } );
            
            if( activeEl != postsTab )
            {
                postsTabImg[ 0 ].src = postsImg.src;
            }
            
        } ).click( function()
        {
            if( activeEl == postsTab ) // close the slider
            {
                //catsTab.removeClass( 'active' );
                
                slider.animate(
                    { left: -contentsW },
                    {
                        duration: animDuration,
                        easing:   animEasingType,
                        complete: function()
                        {
                            postsTab.removeClass( 'active' );
                            postsTabImg[ 0 ].src = postsImg.src;
                        }
                    }
                );
                
                tabOpen  = false;
                activeEl = null;
            }
            else // swap the active element & open the slider if not already opened
            {
                blogsTab.removeClass( 'active' );
                blogsContent.css( { display: 'none' } );
                blogsTabImg[ 0 ].src = blogsImg.src;
                
                catsTab.removeClass( 'active' );
                catsContent.css( { display: 'none' } );
                catsTabImg[ 0 ].src = catsImg.src;
                
                postsTab.addClass( 'active' );
                postsContent.css( { display: 'block' } );
                
                if( !tabOpen )
                {
                    slider.animate(
                        { left: 0 },
                        { duration: animDuration, easing: animEasingType/*, complete: function() { catsTab.addClass( 'active' ); }*/ }
                    );
                    
                    tabOpen = true;
                }
                
                activeEl = postsTab;
            }
        } );
        
        
        closeSliderBtn.click( function()
        {
            slider.animate(
                { left: -contentsW },
                {
                    duration: animDuration,
                    easing:   animEasingType,
                    complete: function()
                    {
                        activeEl.removeClass( 'active' );
                        
                        blogsTabImg[ 0 ].src = blogsImg.src;
                        catsTabImg[ 0 ].src  = catsImg.src;
                        postsTabImg[ 0 ].src  = postsImg.src;
                        
                        tabOpen  = false;
                        activeEl = null;
                    }
                }
            );
            
            return false;
        } );
            
    } );
    
/* ]]> */