/*** 
	
	Javascript effects and integration by eldee smith (eldee.smith AT gmail DOT com) - for freelancing queries, email me or visit http://www.ldsmith.info 
	
	***/
		
	// getObj(divID) - Returns the div object, regardless of browser
	function getObj(name)
	{
		if (document.getElementById) { return document.getElementById(name); }
		else if (document.all) { return document.all[name]; }
		else if (document.layers) { return document.layers[name]; }
	}
	// String.prototype.trim
	String.prototype.trim = function() 
	{
		return this.replace(/^\s+|\s+$/g,"");
	}
	
	// Left(str, n) - Return n characters from the left of the string
	function Left(str, n){
		if (n <= 0)
			return "";
		else if (n > String(str).length)
			return str;
		else
			return String(str).substring(0,n);
	}
	
	// Right(str, n) - Return n characters from the right of the string
	function Right(str, n){
		if (n <= 0)
		   return "";
		else if (n > String(str).length)
		   return str;
		else {
		   var iLen = String(str).length;
		   return String(str).substring(iLen, iLen - n);
		}
	}		
	// Global Vars
	var bPreviewOpen = false;
	var bMoving = false;
	var bScrolling = false;
	var url = "";
	var previewThumb = "";
	var previewURL = "";
	
	// initBodyContent()
	function initBodyContent()
	{
		//getObj("body_content").style.overflow = "auto";
		//alert(getObj("body_content").scrollHeight);
		if(eval(getObj("body_content").scrollHeight-(getObj("body_content").offsetHeight)) > 0)
		{
			// show the scrollbar, we've got scrollable content
			opacity('scroller', 0, 100, 500);
		}		
		if(!Get_Cookie("mgn_undersize"))
		{
			/*if(window.getHeight() < 916)
			{
				alert('undersize ' + window.getHeight() );*/
				// depending onthe screen resolution, we can actually show more of the upper water layer
				new Fx.Style('page', 'top', { duration: 4000, onComplete: ShowBodyContent, transition: Fx.Transitions.Quad.easeInOut}).start(0,-362);
				if(window.getHeight() < 753)
					new Fx.Style('page', 'height', { duration: 1000, transition: Fx.Transitions.Quad.easeOut}).start(getObj("page").style.height,1110);
			/*}
			else
			{*/
			//	alert('full size ' + window.getHeight() );
			//	// if we've got more than 916 pixels to work with, leave the page offset at zero and make the page height whatever the screen rez is.
			//	new Fx.Style('page', 'height', { duration: 1000, transition: Fx.Transitions.Quad.easeOut}).start(getObj("page").style.height,window.getHeight()+360);
			//}			
		}
		else
		{	
			getObj("page").style.top = "-362px";
			//alert(window.getHeight());
			if(window.getHeight() < 753)
				getObj("page").style.height = "1110px";
			else
				getObj("page").style.height = (window.getHeight()+360) + "px";						
				
			ShowBodyContent();
		}
		bMoving = false;
	}
	
	// changeLoc()
	function changeLoc()
	{
		location.href=url;
	}
	
	// alink(href) - causes the page to begin the 'page closing' animation before a new page is loaded.
	function alink(href)
	{
		// doing it this way because google will spider looking for hrefs. passing in the URL onclick will not get us a very high ranking w/ search engines.
		url = href.href;
		if(eval(getObj("body_content").scrollHeight-(getObj("body_content").offsetHeight)) > 0)
		{
			// show the scrollbar, we've got scrollable content
			opacity('scroller', 100, 0, 500);
		}
		new Fx.Style('body_content', 'left', { duration: 1000, onComplete: changeLoc	}).start(0,500);		
		opacity('body_content', 100, 0, 800);	
		
		ClosePreview();
		return false;
	}
	
	// anchorBump(obj) - starts the anchor link mouseover animation
	function anchorBump(obj)
	{
		new Fx.Style(obj, 'padding-left', { duration: 300	}).start(0,20);
	}
	
	// anchorReset(obj) - resets the anchor to it's original position
	function anchorReset(obj)
	{
		new Fx.Style(obj, 'padding-left', { duration: 300	}).start(obj.style.paddingLeft,0);
	}
	
	// ClosePreview() - starts the preview div closing animation
	function ClosePreview()
	{
		if(!bPreviewOpen || getObj("preview").style.opacity < 1)
			return;
		new Fx.Style('preview_bg', 'width', { duration: 1000}).start(454,0);
		new Fx.Style('preview_bg', 'height', { duration: 1000}).start(364,0);
		new Fx.Style('preview_bg', 'top', { duration: 1000}).start(20,384);
		opacity('preview_bg', 50, 0, 800);
		opacity('preview', 100, 0, 200);
		bPreviewOpen = false;
	}
	
	// showPreview() - shows the preview div itself (the image and the close/enlarge controls)
	function showPreview()
	{
		opacity('preview', 0, 100, 500);		
	}
	
	// InitPreview() - begins the preview (and all associated divs) opening animation
	function InitPreview()
	{
		if(bPreviewOpen)
			return;
		bPreviewOpen = true;
		changeOpac(0,'preview_bg');
		changeOpac(0,'preview');
		opacity('preview_bg', 0, 50, 800);
		new Fx.Style('preview_bg', 'width', { duration: 1000, onComplete: showPreview, transition: Fx.Transitions.Cubic.easeOut}).start(0,454);
		new Fx.Style('preview_bg', 'height', { duration: 1000, transition: Fx.Transitions.Cubic.easeOut}).start(0,364);
		new Fx.Style('preview_bg', 'top', { duration: 1000, transition: Fx.Transitions.Cubic.easeOut}).start(384,20);
		
	}
	
	// LoadPreview(thumbURL, ajaxPage) - Loads a new thumbnail into the preview div along with it's accompanying body copy
	function LoadPreview(thumbURL, ajaxPage)
	{
	
		if(!bPreviewOpen)
			bFirstRun = true;
		else
			bFirstRun = false;
			
		InitPreview();		
		
		url = ajaxPage;
		previewThumb = thumbURL;
		previewURL = thumbURL;
		
		// if we're already in the middle of a transition, we need to just switch out the content without resetting the transition.
		if(bMoving)
		{
			new Ajax(url, {
				method: 'get',
				update: $('body_content')
			}).request();
			
			getObj("previewThumbnail").src = 'images/preview/' + previewThumb + '.jpg';
			getObj("zoom_link").href = 'images/fullres/' + previewURL + '.jpg';
		}
		else
		{	
			bMoving = true;
			if(eval(getObj("body_content").scrollHeight-(getObj("body_content").offsetHeight)) > 0)
			{
				opacity('scroller', 100, 0, 500);
			}
			new Fx.Style('body_content', 'left', { duration: 1000, onComplete: loadAjax }).start(0,500);		
			opacity('body_content', 100, 0, 800);
			
			if(!bFirstRun)
				opacity('preview', 100, 0, 800);
		}
		pageTracker._trackPageview("index.html/portfolio="+ajaxPage);
		return false;
	}
	function LoadPage(ajaxPage)
	{
		url = ajaxPage;
		switch(ajaxPage)
		{
			case 'about.html':
				getObj('about').className = "active";
				getObj('portfolio').className = "";
				getObj('contact').className = "";
				break;
			case 'portfolio.html':
				getObj('about').className = "";
				getObj('portfolio').className = "active";
				getObj('contact').className = "";
				break;
			case 'contact.html':
				getObj('about').className = "";
				getObj('portfolio').className = "";
				getObj('contact').className = "active";
				break;
		}
		if(eval(getObj("body_content").scrollHeight-(getObj("body_content").offsetHeight)) > 0)
		{
			opacity('scroller', 100, 0, 500);
		}
		new Fx.Style('body_content', 'left', { duration: 1000, onComplete: loadAjax }).start(0,500);		
		opacity('body_content', 100, 0, 800);
		pageTracker._trackPageview("index.html/"+ajaxPage);
		return false;
	}
	// loadAjax() - Loads the ajax content into the body div after the old content has been animated out.
	function loadAjax()
	{
		new Ajax(url, {
			method: 'get',
			update: $('body_content')
		}).request();
		// TODO: need to check and make sure content has been received before running WindowInit.. on slower connections we're going to see content flashing.
		
		getObj("previewThumbnail").src = 'images/preview/' + previewThumb + '.jpg';
		getObj("zoom_link").href = 'images/fullres/' + previewURL + '.jpg';
		
		// TODO: need to clearly differentiate page loading vs preview loading. page loads are causing preview div to flash sometimes
		if(previewThumb != "") // we're using this function (loadAjax) for a couple different purposes. we don't always want the preview to be handled.
			opacity('preview', 0, 100, 800);
		
		setTimeout(WindowInit, 800);
	}
	
	// stopScroll() - used to keep the scrolling animation on the portfolio nav from being jerky.
	function stopScroll()
	{
		bScrolling=false;	
	}
	
	// scrollNavLeft()
	function scrollNavLeft()
	{
		if(bScrolling)
			return;
		bScrolling=true;		
		var left = getObj("folio_nav").style.left;
		left = Left(left, left.length - 2);
		if (left == "")
			left = 0;
		//alert(left -117);
		new Fx.Style('folio_nav', 'left', { duration: 400, transition: Fx.Transitions.Cubic.easeOut, onComplete: stopScroll	}).start(left,eval(left)-117);		
	}
	
	// scrollNavRight()
	function scrollNavRight()
	{
		if(bScrolling)
			return;
		bScrolling=true;
		var left = getObj("folio_nav").style.left;
		left = Left(left, left.length - 2);
		if (left == "")
			left = 0;
		new Fx.Style('folio_nav', 'left', { duration: 400, transition: Fx.Transitions.Cubic.easeOut, onComplete: stopScroll	}).start(left,eval(left)+117);
	}
	
	// ShowBodyContent()
	function ShowBodyContent()
	{
		/*** FADE IN BODY CONTENT ****/		
		new Fx.Style('body_content', 'left', { duration: 1000, transition: Fx.Transitions.Cubic.easeOut	}).start(500,0);
		opacity('body_content', 0, 100, 800);	
		if(!Get_Cookie("mgn_undersize"))
		{
			opacity('nav', 0, 100, 800);
			setTimeout(function() {opacity('folio_nav', 0, 100, 800);opacity('nav_scroll_l', 0, 100, 800);opacity('nav_scroll_r', 0, 100, 800);}, 800);	
		}
		
		// after we've done this once, set a cookie so this transition doesn't occur every page load. 
		// Expires after 15 minutes so the user experience occurs again when the user revisits
		Set_Cookie( "mgn_undersize", "true", '15', "/", '', '' );
	}
	
	// WindowInit() - starts the initial animation of the entire page
	function WindowInit()
	{
		/*** INIT DIV OPACITY ***/
		if(url == "")
		{
			changeOpac(0,'preview_bg');
			changeOpac(0,'preview');
		}
		changeOpac(0,'scroller');
		changeOpac(0,'body_content');	

		if(!Get_Cookie("mgn_undersize"))
		{
			changeOpac(0,'nav');
			changeOpac(0,'folio_nav');
			changeOpac(0,'nav_scroll_l');
			changeOpac(0,'nav_scroll_r');
		}
		initBodyContent();
		
		/*** INIT BODY CONTENT SLIDER ***/
		var slider = new Slider($('content_scroller'), $('knob'), {	
			//steps: getObj("body_content").scrollHeight-(getObj("body_content").offsetHeight),	
			steps: getObj("body_content").scrollHeight - (getObj("body_content").offsetHeight),
			mode: 'vertical',	
			onChange: function(step){
				$('body_content').scrollTop = step;
			}
		}).set(0);
		
		/*** INIT MOUSEWHEEL ***/
		Element.Events.extend({
			'wheelup': {
				type: Element.Events.mousewheel.type,
				map: function(event){
					event = new Event(event);
					if (event.wheel >= 0) this.fireEvent('wheelup', event)
				}
			},
		 
			'wheeldown': {
				type: Element.Events.mousewheel.type,
				map: function(event){
					event = new Event(event);
					if (event.wheel <= 0) this.fireEvent('wheeldown', event)
				}
			}
		});
		
		/**** SCROLL BODY CONTENT W/ MOUSEWHEEL */
		$('body_content').addEvents({
			'wheelup': function(e) {
				e = new Event(e).stop();
				slider.set($('body_content').scrollTop - 10);
				$('body_content').scrollTop = $('body_content').scrollTop - 10;
				return false;
			},
		 
			'wheeldown': function(e) {
				e = new Event(e).stop();
				slider.set($('body_content').scrollTop + 10);
				$('body_content').scrollTop = $('body_content').scrollTop + 10;
				return false;
			}
		});		
	}
	
	// Window.onDomReady() - this is only fired when the page loads and the DOM is ready.
	Window.onDomReady(function() {
		/*if(!Get_Cookie("mgn_recent_visitor"))
		{
			
			Set_Cookie( "mgn_recent_visitor", "true", '60', "/", '', '' );
		}
		else
		{
			
			Set_Cookie( "mgn_recent_visitor", "true", '60', "/", '', '' );
			WindowInit(); // images are already cached from one of the most recent visits, just load the window.
		}*/
		
	});