$("document").ready(function()
{
	// --------------------------------------- common --------------------------------------- \\
	// remove list of child pages as javascript will enable dropdown menus
	$("ul#children").remove();	
	
	
	// ----------------------------------- home page image scroller --------------------------------------- \\
	if($("div#home-portfolio").size())
	{
		// set up
		// shrink the container to 250px height
		$("div#home-portfolio").css({height:"250px"});
		
		// make sites float left
		$("div#home-portfolio div.site").css({float:"left"});
		
		// add the scroll buttons
		$("div#home-portfolio").after("<a href='#' class='home-portfolio-scroll right' id='home-portfolio-scroll-right'>&raquo;</a>");
		$("div#home-portfolio").before("<a href='#' class='home-portfolio-scroll left' id='home-portfolio-scroll-left'>&laquo;</a>");
		
		// scroll functionality
		$("a.home-portfolio-scroll").click(function()
		{
			// left or right?
			
			// right
			if($(this).hasClass("right"))
			{
				// decrease margin on first item to give impression of sliding to the left
				$("div#home-portfolio div.site").eq(0).animate({marginLeft:"-700px"}, 1000, function()
				{
					// reset the margin and move the first site to the end
					$("div#home-portfolio div.site").eq(0).css({marginLeft:"0px"}).appendTo("div#home-portfolio div.inner");
				});				
			} 
			
			// left
			else if($(this).hasClass("left"))
			{
				// first add a -700px margin to the last item, and move it to the front, then animate
				$("div#home-portfolio div.site").eq($("div#home-portfolio div.site").size()-1).css({marginLeft:"-700px"}).prependTo("div#home-portfolio div.inner");
					
				// increase margin on first item to give impression of sliding to the right
				$("div#home-portfolio div.site").eq(0).animate({marginLeft:"0px"}, 1000);				
			} 
			
			return false;
		});
	}
	
	
	// ----------------------------------------- porfolio expansions ------------------------------------------------ \\
	if($("div#full-portfolio").size())
	{		
		// set container height to the number of rows x 220px (3 sites in a row)
		var rows = Math.ceil($("div#full-portfolio div.site").size() / 3);
		var totalHeight = 220 * rows;
		 
		$("div#full-portfolio").css({height:totalHeight+"px"});
		
		// change inner width to 500px (from 600px)
		$("div#full-portfolio div.site div.inner").css({width:"500px"});
		
		// change preview margin from 60px to 20px
		$("div#full-portfolio div.site div.inner div.preview").css({marginRight:"20px"});
		
		// store original height
		$("div#full-portfolio div.site").each(function()
		{
			// store expanded height when width is 500px
			$(this).css({width:"500px"});
			this.h = $(this).height();
		});
			
		// set new css rules and set default state
		$("div#full-portfolio div.site").each(function()
		{
			// new css rules
			$(this).css(
			{
				width:"236px",
				height:"200px",
				float:"left",
				marginRight:"0px",
				overflow:"hidden"
			});
			
			// only add the 18px right margin to the first to
			if(!$(this).hasClass("last")) $(this).css({marginRight:"18px"});
			
			// set state as closed
			this.state = 0;
		});
		
		// make each site absolute positioned
		// first store each sites positions and heights
		$("div#full-portfolio div.site").each(function()
		{
			//this.t = $(this).offset().top;
			//this.l = $(this).offset().left;
			this.t = $(this).position().top;
			this.l = $(this).position().left;
		});
			
		// set absolute positioning
		$("div#full-portfolio div.site").each(function()
		{
			$(this).css(
			{
				position:"absolute", 
				top:this.t, 
				left:this.l
			});
		});	
		
		// hover action
		$("div#full-portfolio div.site").hover(
		function()
		{
			// turn on border and shadow
			$(this).css({borderColor:"#999", "-moz-box-shadow":"1px 1px 6px #aaa", "-webkit-box-shadow":"1px 1px 6px #aaa"});
		},
		function()
		{
			
			// if this site is open, close on mouse out
			if(this.state == 1)
			{
				// animate to preview size
				$(this).animate({marginLeft:"0px", marginTop:"0px", width:"236px", height:"200px"}, 300, function()
				{
					// set state to closed
					this.state = 0 ;
					
					// move this one off the top
					$(this).css({zIndex:"100"});
					
					// turn off border and shadow
					$(this).css({borderColor:"#ccc", "-moz-box-shadow":"none", "-webkit-box-shadow":"none"});
				});
			}
			
			else
			{
				// turn off border and shadow
				$(this).css({borderColor:"#ccc", "-moz-box-shadow":"none", "-webkit-box-shadow":"none"});
			}
		});
		
		// click action
		$("div#full-portfolio div.site").click(function()
		{
			// is it closed
			if(this.state == 0)
			{
				// set state to open
				this.state = 1;
					
				// if this is in the last column, expand to the left
				if($(this).hasClass("last")) var leftAnim = "-265px"; 
				else leftAnim = "0px";
					
				// if this is in the bottom row, expand up
				if($(this).hasClass("bottom")) var topAnim = "-"+(this.h - 200)+"px"; 
				else topAnim = "0px";
				
				// move this one to the top
				$(this).css({zIndex:"1000"});
				
				// animate to full size
				$(this).animate({marginLeft:leftAnim, marginTop:topAnim, width:"500px", height:this.h}, 300);
			}
		});
	}
	
});