// Text color animation duration

var textFadeInTime = 350;

var textFadeOutTime = 350;



// Menu arrow slide animation duration

var menuArrowSlideTime = 600;



// Page animation duration

var pageFadeInTime = 350;

var pageFadeOutTime = 350;

var pageSlideTime = 600;



// Thumbnail animation duration

var thumbFadeIn = 400;

var thumbFadeOut = 400;



// Projects animation duration

var projectsFadeIn = 500;

var projectsFadeOut = 500;



// Icons animation duration

var iconsFadeIn = 200;

var iconsFadeOut = 500;



// Network icons animation duration

var networkSlideIn = 170;

var networkSlideOut = 200;



// Tagline tooltip

var taglineSlideIn = 170;

var taglineSlideOut = 200;



// Scroll top time

var scrollTop = 500;



// Page loaded

$(document).ready(function() {

    

    // Get the first page

    var firstPage = window.location.hash;

    

    // Get the hover color

    var hoverColor = $('#hoverColor').css('color');

    

    // Get the normal color

    var normalColor = $('#logo').css('color');

    

    // Hide all pages

    $('#pages .page').hide(0);

    

    // If a first page defined show it else show the home page

    if( $(firstPage).length && firstPage != "#home" ) {

        

        // Set the height of the first page

        // $('#pages').height( $(firstPage).outerHeight(true) );

        

        // Find the first page menu item

        var firstPageItem = $('#menu').find("a[href='" + firstPage + "']").parent('li');

        

        // Add the class to the first page menu item

        $(firstPageItem).addClass('current');

        

        // Show the first page

        $(firstPage).show(0);

        

        // Calculate the position of the arrow

        var pos = 0;

        for(var i=0; i<$(firstPageItem).index(); i++) pos += $('#menu li').eq(i).outerWidth(true);

        pos += $(firstPageItem).outerWidth(true)/2+10;

        

        // Display the arrow

        $('#arrow').css({left: pos, display: 'block'});



    } else {

        

        // Set the height of the home page

        $('#pages').height( $('#home').outerHeight(true) );

        

        // Add the current class to the logo

        $('#logo').addClass('current');

        

        // Show the home page

        $('#home').show(0); 

        

    };

    

    // When menu items are hovered

    $('#menu li').not('#arrow').css({backgroundImage: 'none'});

    $('#menu li').hover(function(){

        if ( !$(this).hasClass('current') ) $(this).find('a').stop().css({color: normalColor}).animate({color: hoverColor}, textFadeInTime);                                                                            

    }, function(){

        if ( !$(this).hasClass('current') ) $(this).find('a').stop().animate({color: normalColor}, textFadeOutTime);

    });

    

    // When menu item are clicked

    $('#menu li').not('#arrow').click(function(){

        

        // If this is not the current page

        if ( !$(this).hasClass('current') ) {  

        

            // Change the title

            document.title = $(this).find('a').attr('title');

            

            // Remove hover color from all items

            $('#menu li a').not( $(this).find('a') ).animate({color: normalColor}, textFadeOutTime);

            

            // Add hover color to current item

            $('this').find('a').css({color: hoverColor});

            

            // Remove the current class

            $('#menu li, #logo').removeClass('current');



            // Add the current class

            $(this).addClass('current');

            

            // Scroll top 

            // $('html, body').animate({scrollTop: 0}, scrollTop);

            

            // Calculate the position of the arrow

            var pos = 0;

            for(var i=0; i<$(this).index(); i++) pos += $('#menu li').eq(i).outerWidth(true);

            pos += $(this).outerWidth(true)/2+10;

            

            // Animate the arrow

            $('#arrow').stop().css({display: 'block'}).animate({left: pos, opacity: 1}, menuArrowSlideTime, "swing", function() {remFilter(this);});                                                

            

            // Find the next page and the height

            var nextPage = $(this).find('a').attr('href');

            var nextHeight = $(nextPage).outerHeight(true);



            // Switch to next page

            $('#pages .page').stop().animate({opacity: 0}, pageFadeOutTime, function(){ 

                $(this).hide(0);

                $('#pages').stop().animate({height: nextHeight}, pageSlideTime, function(){

                    $('#pages').css({height: 'auto'});

                    $(nextPage).show(0).stop().animate({opacity: 1}, pageFadeInTime, "swing", function() {remFilter(this);});

                });                                                                                 

            });

            

        } else { return false; }

    

    });

    

    // Logo click

    $('#logo').click(function(){

        

        // If this is not the current page

        if( !$(this).hasClass('current') ){

            

            // Change the title

            document.title = $(this).attr('title');

            

            // Remove hover color from all items

            $('#menu li a').animate({color: normalColor}, textFadeOutTime);



            // Remove the current class

            $('#menu li').removeClass('current');

            

            // Add the current class

            $(this).addClass('current');

            

            // Hide the arrow

            $('#arrow').animate({opacity: 0}, textFadeOutTime, function(){

                $(this).css({display: 'none', left: 0});

            });

            

            // Scroll top 

            // $('html, body').animate({scrollTop: 0}, scrollTop);



            // Switch to home page

            $('#pages .page').stop().animate({opacity: 0}, pageFadeOutTime, function(){ 

                $(this).hide(0);

                                    

                $('#pages').stop().animate({height: $('#home').outerHeight(true)}, pageSlideTime, function(){

                    $('#home').show(0).stop().animate({opacity: 1}, pageFadeInTime, "swing", function() {remFilter(this);});

                });                                                                                 

            });

            

        } else { return false; }

        

    });

    

    // When thumbnails are hovered

    $('.smallThumbnail, .bigThumbnail').prepend('<span></span>').find('span').css({opacity: 0});

    $('.smallThumbnail, .bigThumbnail').hover(function(){

        $('span', this).show().stop().animate({opacity: $.browser.msie || $.browser.opera ? 0.7 : 1}, thumbFadeIn);                     

    }, function(){

        $('span', this).stop().animate({opacity: 0}, thumbFadeOut, function() { $(this).hide(); });                     

    });

    

    // When icons are hovered

    $('.awardsList li a').prepend('<span></span>').find('span').css({opacity: 0});

    $('.awardsList li').hover(function(){

        $('span', this).show().stop().animate({opacity: $.browser.msie || $.browser.opera ? 0.7 : 1}, iconsFadeIn);                     

    }, function(){

        $('span', this).stop().animate({opacity: 0}, iconsFadeOut, function() { $(this).hide(); });                     

    });

    

    // When networkList items are hovered

    $('#pages .networksList li').hover(function(){

        $(this).stop().animate({paddingLeft: 10}, networkSlideIn);  

        $(this).find('strong').stop().css({color: normalColor}).animate({color: hoverColor}, textFadeInTime);                                                                           

    }, function(){

        $(this).stop().animate({paddingLeft: 0}, networkSlideOut);

        $(this).find('strong').stop().animate({color: normalColor}, textFadeOutTime);

    });

    

    // Tagline tooltip on hover

    $taglineTooltip = $('#taglineButton span').css({opacity: 0, left: 80, display: 'none'});

    $('#taglineButton').hover(function() {

        $taglineTooltip.css({display: 'block'}).stop().animate({                               

            left: "40",

            opacity: 1

        }, taglineSlideIn, function() { $(this).css({opacity: 'none'}); });

        

    }, function() {

        $('span', this).css({display: 'block'}).stop().animate({ 

            left: "80",

            opacity: 0

        }, taglineSlideOut, function() { $(this).hide(); });

    });

    

    // Change the page if the clicked link target is a page id

    $('.button').click(function() {

        $menuItem = $('#menu a[href=' + $(this).attr('href') + ']');

        if( $menuItem.size() > 0 ) $menuItem.trigger('hover').trigger('click');

    });

    

    // Projects Slider

    var $PSItems = $('#projectsSlider li');

    var $PSBgItems = $('#projectsSliderBg li');



    $('#projectsWrapper').height(180);

    $('#projectsSliderBg').show();

    $('#projectsNavigation').html('');

    

    $PSItems.hide().slice(0,6).show();

    $PSItems.find('a').css({background: 'none'});

    

    // Find out the number of project pages

    $PSItemsLength = $PSItems.size();

    $PSPages = Math.round($PSItemsLength/6);

    if($PSPages*6 < $PSItemsLength) $PSPages += 1;

    

    // Fix the project slider padding

    for(i=0; i<$PSItemsLength; i++) {

        $PSItems.add($PSBgItems).eq(i*3).css({marginLeft: 0, marginRight: 15});     

        $PSItems.add($PSBgItems).eq(i*3+2).css({marginRight: 0, marginLeft: 15});

    }

    

    // Create the navigation items

    for(i=$PSPages; i>0; i--) {

        $('#projectsNavigation').prepend('<li><a href="#">'+i+'</a></li>');

    }

    

    // Select the project navigation items

    var $PSNavItems = $('#projectsNavigation li');

    

    // Add the current class for the first item

    $PSNavItems.eq(0).addClass('current');

    

    // When navigation items are clicked

    $PSNavItems.click(function() {

        // If this is not the current projects page

        if ( !$(this).hasClass('current') ) {

            // Add/Remove the current class for the current navigation item

            $PSNavItems.removeClass('current');

            $(this).addClass('current');

            

            // Find the index of the current navigation item

            $index = $(this).index();

            

            // Display the projects 

            $PSItems.stop().animate({opacity: 0}, projectsFadeOut, function() {

                $PSItems.hide().slice($index*6,  $index*6+6).show().stop().animate({opacity: 1}, projectsFadeIn);

            });

        }

        return false;

    });

    

  
    

    

    // Style Changer

    var style = $('body').attr('class').split(' ');

    

    $('#styleChanger .min').click(function () {

        $('#styleChangerContent').show(300, function() {

            $('#styleChanger .close').fadeIn(200);

        });

        $('#styleChanger .min').hide(200); 

    });

    $('#styleChanger .close').click(function () {

        $('#styleChangerContent').hide(300, function() {

            $('#styleChanger .min').fadeIn(200, function() { $('#styleChanger .close').hide(0); });

        });

    });

    

    $('#backgroundStyle a, #colorStyle a').hover(function (){

        $('span', this).stop().animate({marginRight: 0}, 150);

    }, function (){

        $('span', this).stop().animate({marginRight: -10}, 150);

    });



    $('#backgroundStyle a').click(function (){

        style[0] = $(this).attr('href');

        $('body').removeClass().addClass(style[0]).addClass(style[1]);

        return false;

    });

    $('#colorStyle a').click(function (){

        style[1] = $(this).attr('href');

        $('body').removeClass().addClass(style[1]).addClass(style[0]);

        

        hoverColor = $('#hoverColor').css('color');

        normalColor = $('#logo').css('color');

        

        $('#menu .current').find('a').css({color: hoverColor});



        return false;

    });

        

});



// Function to remove filter in IE

function remFilter(x) { 

    if(jQuery.browser.msie) x.style.removeAttribute('filter'); 

}