$(document).ready(function() {
						   

/*---------    SUPERFISH SUB MENU        -------------*/

		jQuery(function(){
			jQuery('ul.sf-menu').superfish();
		});

/*---------    SUPERFISH SUB MENU        -------------*/
						   
/*---------    THINKER ROTATOR        -------------*/
				   
	 $('.thinker-rotator').cycle({
		fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		random:		1,
		speed:		500,
		timeout:	7500,
		pause:  	1

		});

/*---------    THINKER ROTATOR       -------------*/

/*---------    SECOND NAV    -------------*/

    $(function() {
        $('ul.second-nav').lavaLamp();
    });
	
	
/*---------    SECOND NAV    -------------*/

/*---------    FANCY BOX TRIGGER       -------------*/
	
	$("#showreel, #showreel-link").click(function() {
		$.fancybox({
				'padding'		: 0,
				'overlayOpacity': 0.4,
				'overlayColor'	: '#000',
				'autoScale'		: false,
				'transitionIn'	: 'fade',
				'transitionOut'	: 'fade',
				'title'			: this.title,
				'width'			: 640,
				'height'		: 385,
				'href'			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
				'type'			: 'swf',
				'swf'			: {
				'wmode'		: 'transparent',
				'allowfullscreen'	: 'true'
				}
			});
	
		return false;
	});
	
	
	$("a.case_study").fancybox({
		'padding'		: 0,
		'overlayOpacity': 0.4,
		'overlayColor'	: '#000',
		'transitionIn'	: 'fade',
		'transitionOut'	: 'fade',
		'titleShow'		: false
	});



/*---------    FANCY BOX TRIGGER       -------------*/

/*---------    ROTATE PEOPLE PAGE       -------------*/

    $('#our-people li div.back').hide().css('left', 0);
    
    function mySideChange(front) {
        if (front) {
            $(this).parent().find('div.front').show();
            $(this).parent().find('div.back').hide();
            
        } else {
            $(this).parent().find('div.front').hide();
            $(this).parent().find('div.back').show();
        }
    }
    
    $('#our-people li').hover(
        function () {
            $(this).find('div').stop().rotate3Di('flip', 300, {direction: 'clockwise', sideChange: mySideChange});
        },
        function () {
            $(this).find('div').stop().rotate3Di('unflip', 300, {sideChange: mySideChange});
        }
    );

/*---------    ROTATE PEOPLE PAGE       -------------*/

/*---------    Twitter Console        -------------*/						   
	
		$('#slider-tab').toggle(
									  
			function(){	 
				$('#slider-container').animate({
					right: '0px'
				}, 500);
				$('#slider-tab a').addClass('out');				      
			},
	
	
			function(){	 
				$('#slider-container').animate({
					right: '-387px'
				}, 500);
				$('#slider-tab a').removeClass('out');				      
			return false;});
	
	

  $('div#slider-bg> div').hide();
  $('div#slider-bg> div:first').show();

  $('div#slider-bg> h2').click(function() {
 var $nextDiv = $(this).next();
 var $visibleSiblings = $nextDiv.siblings('div:visible');
 if ($visibleSiblings.length ) {
   $visibleSiblings.slideUp('fast', function() {
  $nextDiv.slideToggle('fast');
   });
 } else {
    $nextDiv.slideToggle('fast');
 }
  });

getTwitters('tp', { 
  id: 'thinkpublishing', 
  count: 3, 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  template: '<img class="avatar-twitter" src="%user_profile_image_url%" alt="Twitter Avatar" />  <p>%text%</p> <a class="twitter-time" target="_blank" href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});

getTwitters('tn', { 
  id: 'treenews', 
  count: 3, 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  template: '<img class="avatar-twitter" src="%user_profile_image_url%" alt="Twitter Avatar" />  <p>%text%</p> <a class="twitter-time" target="_blank" href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});

getTwitters('hs', { 
  id: 'hs_members', 
  count: 3, 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  template: '<img class="avatar-twitter" src="%user_profile_image_url%" alt="Twitter Avatar" />  <p>%text%</p> <a class="twitter-time" target="_blank" href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});

getTwitters('syr', { 
  id: 'yourrucksack', 
  count: 3, 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  template: '<img class="avatar-twitter" src="%user_profile_image_url%" alt="Twitter Avatar" />  <p>%text%</p> <a class="twitter-time" target="_blank" href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});

/*---------    Twitter Console        -------------*/

/*---------    IMAGE ENLARGE CASE STUDY      -------------*/

	$("div#image_container ul#image_study li img").bubbleup({tooltip: true, scale:204});
	$("div#image_container ul#image_study li#end img").bubbleup({tooltip: true, scale:204});
	$("div#image_container2 ul#image_study_lge li img").bubbleup({tooltip: true, scale:280});
	$("div#image_container3 ul#image_study li#end img").bubbleup({tooltip: true, scale:204});
	$("div#image_container3 ul#image_study li img").bubbleup({tooltip: true, scale:204});

/*---------    IMAGE ENLARGE CASE STUDY      -------------*/



/*---------    AWARDS SLIDING BOXES      -------------*/

	$('.expand_title a').click(function () {																	
	$(this.hash).slideToggle(250);	
	$(this).children('span').toggleClass('up');	
	return false;}) ;

/*---------    AWARDS SLIDING BOXES      -------------*/

});

	

/*---------    IMAGE SLIDER PRINT + MAGAZINES    -------------*/

  $(document).ready(function() {
        
        //options( 1 - ON , 0 - OFF)
        var auto_slide = 1;
            var hover_pause = 1;
        var key_slide = 1;
        
        //speed of auto slide(
        var auto_slide_seconds = 4000;
        /* IMPORTANT: i know the variable is called ...seconds but it's 
        in milliseconds ( multiplied with 1000) '*/
        
        /*move the last list item before the first item. The purpose of this is 
        if the user clicks to slide left he will be able to see the last item.*/
        $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
        $('#client-logo li:first').before($('#client-logo li:last')); 
        //check if auto sliding is enabled
        if(auto_slide == 1){
            /*set the interval (loop) to call function slide with option 'right' 
            and set the interval time to the variable we declared previously */
            var timer = setInterval('slide("right")', auto_slide_seconds); 
            
            /*and change the value of our hidden field that hold info about
            the interval, setting it to the number of milliseconds we declared previously*/
            $('#hidden_auto_slide_seconds').val(auto_slide_seconds);
        }
  
        //check if hover pause is enabled
        if(hover_pause == 1){
            //when hovered over the list 
            $('#carousel_ul, #client-logo').hover(function(){
                //stop the interval
                clearInterval(timer)
            },function(){
                //and when mouseout start it again
                timer = setInterval('slide("right")', auto_slide_seconds); 
            });
  
        }
  
        //check if key sliding is enabled
        if(key_slide == 1){
            
            //binding keypress function
            $(document).bind('keypress', function(e) {
                //keyCode for left arrow is 37 and for right it's 39 '
                if(e.keyCode==37){
                        //initialize the slide to left function
                        slide('left');
                }else if(e.keyCode==39){
                        //initialize the slide to right function
                        slide('right');
                }
            });

        }
        
        
  });

//FUNCTIONS BELLOW

//slide function  
function slide(where){
    
            //get the item width
            var item_width = $('#carousel_ul li').outerWidth() + 0;
            
            /* using a if statement and the where variable check 
            we will check where the user wants to slide (left or right)*/
            if(where == 'left'){
                //...calculating the new left indent of the unordered list (ul) for left sliding
                var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
            }else{
                //...calculating the new left indent of the unordered list (ul) for right sliding
                var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
            
            }
            
            
            //make the sliding effect using jQuery's animate function... '
            $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                /* when the animation finishes use the if statement again, and make an ilussion
                of infinity by changing place of last or first item*/
                if(where == 'left'){
                    //...and if it slided to left we put the last item before the first item
                    $('#carousel_ul li:first').before($('#carousel_ul li:last'));
                }else{
                    //...and if it slided to right we put the first item after the last item
                    $('#carousel_ul li:last').after($('#carousel_ul li:first')); 
                }
                
                //...and then just get back the default left indent
                $('#carousel_ul').css({'left' : '-210px'});
            });           
    
            //get the item width
            var item_width = $('#client-logo li').outerWidth() + 0;
            
            /* using a if statement and the where variable check 
            we will check where the user wants to slide (left or right)*/
            if(where == 'left'){
                //...calculating the new left indent of the unordered list (ul) for left sliding
                var left_indent = parseInt($('#client-logo').css('left')) + item_width;
            }else{
                //...calculating the new left indent of the unordered list (ul) for right sliding
                var left_indent = parseInt($('#client-logo').css('left')) - item_width;
            
            }
            
            
            //make the sliding effect using jQuery's animate function... '
            $('#client-logo:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                /* when the animation finishes use the if statement again, and make an ilussion
                of infinity by changing place of last or first item*/
                if(where == 'left'){
                    //...and if it slided to left we put the last item before the first item
                    $('#client-logo li:first').before($('#client-logo li:last'));
                }else{
                    //...and if it slided to right we put the first item after the last item
                    $('#client-logo li:last').after($('#client-logo li:first')); 
                }
                
                //...and then just get back the default left indent
                $('#client-logo').css({'left' : '-150px'});
            });           
}

/*---------    IMAGE SLIDER PRINT + MAGAZINES    -------------*/