/********************************** START SIDE ICONS **********************************/

$(function() {
	/**
	* the list of posts
	*/
	var $list 		= $('#rp_list ul');
	/**
	* number of related posts
	*/
	var elems_cnt 		= $list.children().length;
	
	/**
	* show the first set of posts.
	* 200 is the initial left margin for the list elements
	*/
	load(200);
	
	function load(initial){
		$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
		var loaded	= 0;
		//show 5 random posts from all the ones in the list. 
		//Make sure not to repeat
		while(loaded < 5){
			var r 		= Math.floor(Math.random()*elems_cnt);
			//var $elem	= $list.find('li:nth-child('+ (r+1) +')');
			var $elem	= $list.find('li:nth-child('+ (loaded) +')');
			if($elem.is(':visible'))
				continue;
			else
				$elem.show();
			++loaded;
		}
		//animate them
		var d = 200;
		if ($.browser.opera) {var left_default = 70;}
		else{var left_default = 140;}
		$list.find('li:visible div').each(function(){
			$(this).stop().animate({
				'marginLeft':'-'+left_default+'px'
			},d += 100);
		});
	}
		
	/**
	* hovering over the list elements makes them slide out
	*/	
	if ($.browser.opera) {
		$list.find('li:visible').live('mouseenter',function () {
			$(this).find('div').stop().animate({
				'marginLeft':'-170px'
			},200);
		}).live('mouseleave',function () {
			$(this).find('div').stop().animate({
				'marginLeft':'-70px'
			},200);
		});
 	}
	else
	{
		$list.find('li:visible').live('mouseenter',function () {
			$(this).find('div').stop().animate({
				'marginLeft':'-320px'
			},200);
		}).live('mouseleave',function () {
			$(this).find('div').stop().animate({
				'marginLeft':'-140px'
			},200);
		});
	}
	/**
	* when clicking the shuffle button,
	* show 5 random posts
	*/
	$('#rp_shuffle').unbind('click')
					.bind('click',shuffle)
					.stop()
					.animate({'margin-left':'-18px'},700);
					
	function shuffle(){
		$list.find('li:visible div').stop().animate({
			'marginLeft':'60px'
		},200,function(){
			load(-60);
		});
	}
});
/********************************** END SIDE ICONS **********************************/



/********************************** START GOOGLE ANALITICS **********************************/
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-13073021-10']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
/************************************ END GOOGLE ANALITICS **********************************/



/********************************** START MAIN SLIDER **********************************/

$(document).ready(function() {

	//Set Default State of each portfolio piece
	$(".paging").show();
	$(".paging a:first").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel div").size();
	var imageReelWidth = imageWidth * imageSum;
	
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	
	//Paging + Slider Function
	rotate = function(){	
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel").animate({ 
			left: -image_reelPosition
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitch(); //Run function on launch
	
	//On Hover
	$(".image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	
	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});	
	
});

/********************************** END MAIN SLIDER **********************************/


/********************************** START DATE PICKER **********************************/
$(function()
{
	$('.date-pick').datePicker({clickInput:true})
});
/********************************** END DATE PICKER **********************************/



/********************************** START HIGHSLIDE **********************************/

	hs.graphicsDir = '../highslide/graphics/';
	hs.align = 'center';
	hs.transitions = ['expand', 'crossfade'];
	hs.fadeInOut = true;
	hs.dimmingOpacity = 0.8;
	hs.outlineType = 'rounded-white';
	hs.captionEval = 'this.thumb.alt';
	hs.marginBottom = 105; // make room for the thumbstrip and the controls
	hs.numberPosition = 'caption';

	
/********************************** END HIGHSLIDE **********************************/