// JavaScript Document
/// Author: Anthony Carcelli
/// 9/2008

	/// Show Bubble
	function showBubble(obj) {	
		clearTimeout(timer);
		
		obj = obj.target;
		$('desc_bubble').getElementsByTagName('p')[0].innerHTML = obj.innerHTML;
		$('desc_bubble').appear();
		var newPos = (obj.offsetLeft - 12);
		new Effect.Move($('desc_bubble'), {x:newPos, y:yPos, mode: 'absolute'} );
	}
	
	function hideBubble() {
		timer = setTimeout("$('desc_bubble').fade()", 500);
	}
	
	/// function startIndexes sets starting indexes for the page.
	function startIndexes() {
		for (i=children.length-1; i >= 0; i--){
			children[i].style.zIndex = children.length-i;
			children[i].style.display = 'block';
		}
		//children[1].style.zIndex = 5;
	}
	
	/// function coordinates returns positions of the passed in object.
	function coordinates(obj){
		if (!obj){
			return origX+", "+origY;
		} else {
			var X = obj.offsetLeft;
			var Y = obj.offsetTop;
			return X+", "+Y;
		}
	}
	
	var topIndex;
	/// function setIndex reorders indexes of containers, passed in object being the highest.
	function setIndex(obj){
		obj = obj.target;
	
		while (true){
			if (obj.id.indexOf('content') != 0 ) obj = obj.parentNode;
			else if (obj.id == 'wrapper') break;
			else break;
		}
		
		if (obj.id == topIndex) {
			return;
		}
		
		for (i=0; i < children.length; i++){
			if (children[i].id == obj.id) {
				
				morphContainers(obj);
				
				children[i].style.zIndex = children.length;
				
			} 
			else if (children[i].style.zIndex != 1) {
				children[i].style.zIndex -= 1;
			}
		}
		
		
		
	}
	
	function morphContainers(obj){

		if (!obj) obj = $('content1');

		if (obj.id == 'content2') {
			$$('#content2 .contentarea').each(function(element){
				setHeight(element,1);
			});
		}
		else if (topIndex == 'content2') {
			$$('#content2 .contentarea').each(function(element){
				setHeight(element,0);
			});
		}
	
		topIndex = obj.id;
	
	}
	
	function setHeight(obj, bool){
		if (bool) {
			obj.style.height = 'auto';
			var tempHeight = obj.offsetHeight;
			obj.style.height = '';
			obj.morph('height:'+tempHeight+'px');
		}
		else {
			obj.style.height = '';
			var tempHeight = obj.offsetHeight;
			obj.style.height = 'auto';
			obj.morph('error_message', {
  			style: 'height:'+tempHeight+'px',
  			duration: 0.2
			});
		}
	}
	
/// Slides handler
	var slideOffset = 0;
	function nextSlide(obj){
		obj = obj.target;
		var slideWidth = $$('#sites li')[0].offsetWidth;
		if (obj.id == 'slide_right') { slideWidth *= -1; }
		slideOffset += slideWidth;
		
		new Effect.Move('sites', {x:(slideWidth), y:0, mode: 'relative'});
		
		( slideOffset < -10 )? $('slide_left').removeClassName('off') : $('slide_left').addClassName('off') ;
	  
		( Math.abs(slideOffset) > $('sites').offsetWidth - Math.abs(slideWidth) - 20 )? $('slide_right').addClassName('off') : $('slide_right').removeClassName('off') ;
			
	}
	
	/// function changeOpacity sets the moving objects opacity to 70%
	function changeOpacity(obj){		
		obj.opacity = .5;
		$('footer').style.bottom = 0;
	}
	
	/// function resetContainers moves containers back to start position
	function resetContainers(){
		
		morphContainers();
		
		for (i=0; i < children.length; i++){
			if( children[i].offsetLeft != origX || children[i].offsetTop != origY ) new Effect.Move(children[i], {x:origX, y:origY, mode: 'absolute'} );
		}
		startIndexes();
	}
	
	/// function expandContainers moves containers into side by side format
	function expandContainers(){
		
		morphContainers();
		
		var currentYpos= -1*$('wrapper').offsetTop +50;
		var marginY = 25; // represents half the total margin, so if you want the margin between windows to be 20, margin = 10;
		var marginX = 25;
		var tempW = children[0].offsetWidth/2;
		var tempH = children[0].offsetHeight/2;
		
		for (i=0; i < children.length; i++){
			
			if(i%2 == 0) {
				
					new Effect.Move(children[i], {x:-tempW-marginX, y:currentYpos, mode: 'absolute'} );
				
			} else {
				
					new Effect.Move(children[i], {x:tempW+marginX, y:currentYpos, mode: 'absolute'} );
				
				// Now set Y position
				if (children[i-1].offsetHeight > (tempH*2) ){
					currentYpos += ( children[i-1].offsetHeight + marginY );
				} else {
					currentYpos += ( tempH * 2+ marginY );
				}
			}
			
		}
		//$('footer').style.bottom = (-1 * $('footer').offsetHeight)+'px' ;
		
	}
	
	function horizontalContainers(){
		
		morphContainers();
		
		var tempW = children[0].offsetWidth;
		var currentXpos= 240 - $('wrapper').offsetLeft;
		var marginX = 45;
		
		for (i=0; i < children.length; i++){
			
			new Effect.Move(children[i], {x:currentXpos, y:origY, mode: 'absolute'} );
			currentXpos += tempW+marginX;
			
		}
	}
	
	function verticalContainers(){
		
		morphContainers();
		
		var tempH = children[0].offsetHeight;
		var currentYpos= 50 - $('wrapper').offsetTop;
		var marginY = 25;
		
		for (i=0; i < children.length; i++){
			
			new Effect.Move(children[i], {x:origX, y:currentYpos, mode: 'absolute'} );
			currentYpos += tempH+marginY;
			
		}
	}
	/// function resetContainers moves containers back to start position
	function hideShowContainers(obj){
		if ( displayState == "none" ){
			displayState = "block";
			obj.innerHTML = "Hide";
			$('wrapper').appear();
			$$('.expand, .vertical, .horizontal, .reset').each(function(element){
				element.appear();
			});
		}
		else {
			displayState = "none";
			obj.innerHTML = "Show";
			$('wrapper').fade({duration:1.0});
			$$('.expand, .vertical, .horizontal, .reset').each(function(element){
				element.fade();
			});
		}
		
		
		/*for (i=0; i < children.length; i++){			
			children[i].style.display = displayState;
		}*/
		
	}
	
	function showContainerSet(){
		if (displayState == 'none'){
			hideShowContainers( $('position_controls').getElementsByTagName('a')[4] );
		}
	}
	
	/// Wallpaper functions
	  var displayState = 'block';
		var bg_list = new Array(
												'http://www.designcanopy.com/i/bgs/concrete.jpg',
												'http://www.designcanopy.com/i/bgs/uriahbaet_astr_allrightsreserved.jpg',
												'http://www.designcanopy.com/i/bgs/uriahbaet_elephant_allrightsreserved.jpg',
												'http://www.designcanopy.com/i/bgs/uriahbaet_roush_allrightsreserved.jpg',
												'http://www.designcanopy.com/i/bgs/anthonycarcelli_tracks_allrightsreserved.jpg'
												);
		var bg_credit = new Array(
												'',
												'Photo by <a href="http://www.uriahbaet.com" target="_blank">Uriah Baet</a>',
												'Photo by <a href="http://www.uriahbaet.com" target="_blank">Uriah Baet</a>',
												'Photo by <a href="http://www.uriahbaet.com" target="_blank">Uriah Baet</a>',
												'Photo by Anthony Carcelli'
												);
		var bg_title = new Array(
												'Concrete',
												'ASTR',
												'Elephant',
												'Roush',
												'Tracks'
												);
	
			
		$('btn_wallpaper').observe('click',showHideMenu);
	
		function showHideMenu(event) {
			Effect.toggle('flyout_menu','slide', {duration: 0.25});
			$('btn_wallpaper').toggleClassName('active');
		}
		
		function changeBG(event) {
			//var element = Event.element(event);
			if (current_bg) current_bg.style.display = 'none';
			current_bg = $('bgimg'+event.name);
			current_bg.style.display = 'block';
			positionBG ();
			//$('design_canopy').style.backgroundImage = "url("+bg_list[event.name]+")";
			//$('design_canopy').style.backgroundRepeat = "no-repeat";
			$('credits').innerHTML = bg_credit[event.name];
		}
		
		function positionBG () {
			current_bg.style.marginLeft = -1*current_bg.width/2+'px';
		}
		
		var bg = new Array();
		var current_bg;
		function preloadImages() {
			
			for (var i=0; i < bg_list.length; i++) {
				bg[i] = new Element('img');
				bg[i].src = bg_list[i];
				bg[i].name = i;
				bg[i].id = 'bgimg'+i;
				bg[i].className = 'bg_base';
				bg[i].style.display = 'none';
				$('design_canopy').appendChild(bg[i]);
				bg[i].observe('load', addtoMenu);
			}
			//bg.observe(this, 'onload', addtoMenu(i));
		}
		
		function addtoMenu (event) {
			var i = Event.element(event).name;
			var new_li = document.createElement('li');
			Element.extend(new_li);
			new_li.innerHTML = '<a name="' + i + '" onclick="changeBG(this)" >' + bg_title[i] + '</a>';
			$('flyout_menu').childElements()[1].appendChild(new_li);
			//$('flyout_menu').getElementsByTagName('li')[i].observe('click',changeBG);
			
		}
		
		function email() {
			var prefix = 'anthony.carcelli';
			var suffix = 'designcanopy.com';
			window.location = "mailto:"+prefix+"@"+suffix;
		}

/*******************************/
/*		Onload setup			
/*******************************/
			
			var date = new Date();
			var onWeek = date.getTime() + (60*60*24*7);
			var children = $('wrapper').childElements();
			var timer; // Timeout var
			
			if ( $('content1') ) {
				var origX = $('content1').offsetLeft;
				var origY = $('content1').offsetTop;			
			
				new Draggable('content1',{
					handle:'handle1',
					revert:function(element){/*return ($('shouldrevert2').checked)*/},
					onStart:function(draggable){ changeOpacity(draggable.element) },
					onDrag:function(draggable){
						$('info1').update( coordinates( draggable.element ) );
						$('info1').parentNode.className = '';
					},
					onEnd:function(draggable){  }
				});
				
				new Draggable('content2',{
					handle:'handle2',
					revert:function(element){/*return ($('shouldrevert2').checked)*/},
					onStart:function(draggable){ changeOpacity(draggable.element) },
					onDrag:function(draggable){
						$('info2').update( coordinates( draggable.element ) );
						$('info2').parentNode.className = '';
					},
					onEnd:function(draggable){  }
				});
				
				new Draggable('content3',{
					handle:'handle3',
					revert:function(element){/*return ($('shouldrevert2').checked)*/},
					onStart:function(draggable){ changeOpacity(draggable.element) },
					onDrag:function(draggable){
						$('info3').update( coordinates( draggable.element ) );
						$('info3').parentNode.className = '';
					},
					onEnd:function(draggable){  }
				});
				
				new Draggable('content4',{
					handle:'handle4',
					revert:function(element){/*return ($('shouldrevert2').checked)*/},
					onStart:function(draggable){ changeOpacity(draggable.element) },
					onDrag:function(draggable){
						$('info4').update( coordinates( draggable.element ) );
						$('info4').parentNode.className = '';
					},
					onEnd:function(draggable){  }
				});
			}
			
			
			
			var yPos = $('desc_bubble').offsetBottom;
			$('desc_bubble').hide();
			
			Event.observe(window, 'load', function(){
																						 
				if( $('content1') ) {						
					startIndexes();
					$('content1').observe('click', this.setIndex.bind(this) );
					$('content2').observe('click', this.setIndex.bind(this) );
					$('content3').observe('click', this.setIndex.bind(this) );
					$('content4').observe('click', this.setIndex.bind(this) );
					//$('slide_left').observe('click', this.nextSlide.bind(this) );
					//$('slide_right').observe('click', this.nextSlide.bind(this) );
				}
				
				/// Image preload
					preloadImages();
	
				
			 var profiles = $('profiles').getElementsByTagName('a');
			 for (i=0; i< profiles.length; i++ ) {
					profiles[i].observe('mouseover', this.showBubble.bind(this) );
					profiles[i].observe('mouseout', hideBubble );
			 }
			 
			});
			
			var today = new Date();
			today = today.getFullYear();
			$('date').innerHTML = today;
			
			// Banner Randomizer
			var ad = $$('.banner a');
			var adnum = Math.floor(Math.random() * ad.length);
			ad[adnum].style.display = 'block';