// JavaScript Document
  
function getPortfolioLength()
{
	var scrollerSize = 0;
	var totalBoxes = $$('div.portfolio_box').length;
	
	// work out the tottal size of boxes
	for(i = 0; i < totalBoxes; i++)
	{
		var portfolioSize = document.id('portfolio_'+i).getSize();
		scrollerSize += portfolioSize.x;
	}
	 
	return scrollerSize; 
}


function getSubSize(parent,parent_string)
{
	
	var scrollerSubSize = 0;
	var totalSubChildren = parent.getChildren('.portfolio_slide').length;
	
	// work out the tottal size of boxes
	for(i = 0; i < totalSubChildren; i++)
	{
		var subSize = document.id('portfolio_'+parent_string+'_sub_portfolio_'+i).getSize();
		scrollerSubSize += subSize.x;
	} 
	return scrollerSubSize;
	
}


function resizePortfolioWidth()
{
	document.id('portfolioContents').setStyle('width',Math.round(getPortfolioLength()));
}

function forceResizePortfolioWidth(addMe)
{
	document.id('portfolioContents').setStyle('width',parseInt(getPortfolioLength()+addMe));
}

function indexPages()
{
	var infoEl  =  $$('div.portfolio_box').getElement('.first_info');
	$$(infoEl).fade(0,0);
	
	
	$$('div.portfolio_box').addEvent('click',openSlide);
	
	$$('div.portfolio_box').addEvent('mouseover' , portfolioHover);
	
	$$('div.portfolio_box').addEvent('mouseleave' , portfolioLeave);
	
	$$('.open_close').addEvent('click:relay(a)', function(e){ 

    	e.stop();
		var parent = this.getParent('div.portfolio_box');
		 
		closeSlide(parent);
		
 
  	}); 
}


function portfolioHover()
{
	this.setStyle('cusror','pointer');
	var thisInfoEl  =  this.getElement('.first_info');
	var thisImg = this.getElement('img');
	 
		$$(thisInfoEl).fade(1);
		$$(thisImg).fade(0);
	 
}	

function portfolioLeave()
{	
	var thisInfoEl  =  this.getElement('.first_info');
	var thisImg = this.getElement('img');
	
	$$(thisInfoEl).fade(0);
	$$(thisImg).fade(1);
}

function openSlide()
{
		this.removeEvent('click',openSlide);
		this.removeEvents('mouseover',portfolioHover);
		this.removeEvents('mouseleave',portfolioLeave);
						   
		var page_load = $$(this).get('title');
	 	var string = String(page_load);
		var responseArray = new Array();
		responseArray = string.split('/');
		var parent_id = responseArray[4];
		var thisPortfolio = this;
		 
		var thisSlide  =  thisPortfolio.getElement('.portfolio_slide');
		var thisLoad  =  thisPortfolio.getElement('.portfolio_load');
		var el = $$(thisLoad);
		 
		var thisOpenClose  =  this.getElement('.open_close');
		$$(thisOpenClose).set('html','<a href="#">Close</a> &rarr;');
		
		var loadPage = new Request.HTML({url: page_load,  
		onComplete: function(htmlImages) 
		{ 
			$$(thisLoad).set('html', '');
			$$(thisLoad).adopt(htmlImages);
		
		
			// now that we have the content loaded we get the size of the child elemens
			var subPageSize= 0;  
			 
			subPageSize = getSubSize(thisLoad,parent_id);
			 
			// .. and resize it
			
			$$(thisPortfolio).setStyle('width',Math.floor(365+subPageSize));
			
			// resize the width of the portfolio container
			resizePortfolioWidth();
			
			el.fade('hide');
			el.fade('in');
			
		
		sIFR.replace(sifr_uni_con, {
		  selector: '.sifr_uni_con_large' ,
		 ratios: [9, 1.16, 16, 1.09, 24, 1.06, 37, 1.04, 74, 1.02, 1.01],
		  css:  ['.sIFR-root { color: #999999; text-align:left; text-transform:uppercase; cursor:pointer; letter-spacing: 2}',
			'a { text-decoration: none; color: #999999; }',
			  'a:link { color: #999999; }',
				'a:hover { color: #000000;  text-decoration: none; }'], wmode: 'transparent', sharpness : -200 
		}); 

			 
			
		}
		}).get();
}

function closeSlide(parent)
{  					   
		var page_load = $$(parent).get('title');
		var thisPortfolio = parent;
		var thisSlide  =  parent.getElement('.portfolio_slide');
		var thisLoad  =  parent.getElement('.portfolio_load');
		var el = $$(thisLoad);
		
		var thisOpenClose  =  parent.getElement('.open_close');
		$$(thisOpenClose).set('html','Open &rarr;');
		  
			
			// if its ie we don't do a smooth slide out, it just appears
		 	if(Browser.Engine.trident  &&  Browser.Engine.version =='4')
			{ 
			}
				else
			{
				el.fade(1,0);  
			}
			
			
			var delay_resize = function()
			{
				$$(thisLoad).set('html', ''); 
			}
			
			var delay_resize2 = function()
			{
				$$(thisPortfolio).set('morph', {duration: 500, transition: 'quad:out'});
				$$(thisPortfolio).morph({ width: 365});
				$$(thisPortfolio).get('morph');
			}
			
			var delay_resize3 = function()
			{
				 
				// resize the width of the portfolio container
				resizePortfolioWidth();
				$$(parent).addEvent('click',openSlide);
				$$(parent).addEvent('mouseover' , portfolioHover);
				$$(parent).addEvent('mouseleave' , portfolioLeave);
			}
			
			delay_resize.delay(500);
			delay_resize2.delay(560);
			delay_resize3.delay(1500);
			
			 
}

function init()
{ 
	
	var scrollElement = $('portfolioSpace');
	var portfolioScroller = new Scroller(scrollElement, {area: 300, velocity: 0.2, fps:150});
	scrollElement.addEvent('mouseover', portfolioScroller.start.bind(portfolioScroller));
	scrollElement.addEvent('mouseleave', portfolioScroller.stop.bind(portfolioScroller));
 
		
	resizePortfolioWidth();
	indexPages();
	

}