menuEffect = Class.create({
	initialize: function(element,rollElement){
		this.roll = rollElement;
		this.element = $(element);
		//console.log(this.element);
		this.addObservers();
	},
	
	addObservers: function(){
		this.observers = {
			mouseOver: this.mouseOver.bind(this),
			mouseOut: this.mouseOut.bind(this)
		}
		
		this.element.observe("mouseover",this.observers.mouseOver);
		this.element.observe("mouseout",this.observers.mouseOut);
	},
	
	mouseOver: function(e){		
		if(this.mouseOutEffect != null){
			this.mouseOutEffect.cancel();
		}
		this.mouseOnEffect = new Effect.Appear(this.roll,{duration: 0.4, from: 0, to: 1});
		this.mouseOnEffect1 = new Effect.Morph(this.element,{style: "padding-left: 5px; width: 145px;", duration: 0.2});
	},
	
	mouseOut: function(e){
		if(this.mouseOnEffect != null){
			this.mouseOnEffect.cancel();
		}
		this.mouseOutEffect = new Effect.Fade(this.roll,{duration: 0.4, from: 1, to: 0});
		this.mouseOnEffect1 = new Effect.Morph(this.element,{style: "padding-left: 0px; width: 150px;", duration: 0.2});
	}
	
});

thumbEffect = Class.create({
	initialize: function(element){		
		this.element = $(element);
		this.roll = $("desc"+this.element.id);
		this.addObservers();
	},
	
	addObservers: function(){
		this.observers = {
			mouseOver: this.mouseOver.bind(this),
			mouseOut: this.mouseOut.bind(this)
		}
		
		this.element.observe("mouseover",this.observers.mouseOver);
		this.element.observe("mouseout",this.observers.mouseOut);
	},
	
	mouseOver: function(event){			
		
		var relatedTarget = $(event.relatedTarget || event.fromElement);
        var target = Event.element(event);
        if(relatedTarget.descendantOf(this.element) == false){
				if(this.mouseOutEffect != null){
					this.mouseOutEffect.cancel();
				}
                //this.mouseOnEffect = new Effect.Appear(this.roll,{duration: 0.4, from: 0, to: 1});
				this.mouseOnEffect = new Effect.Move(this.roll,{duration: 0.2, x: 0, y: 90, mode: 'absolute'});
        }
		
	},
	
	mouseOut: function(event){		
		
		var relatedTarget = $(event.relatedTarget || event.fromElement);		
        var target = Event.element(event);
		
        if(relatedTarget.descendantOf(this.element) == false){
			if(this.mouseOnEffect != null){
				this.mouseOnEffect.cancel();
			}
			
			//this.mouseOutEffect = new Effect.Fade(this.roll,{duration: 0.4, from: 1, to: 0});
			this.mouseOnEffect = new Effect.Move(this.roll,{duration: 0.2, x: 0, y: 190, mode: 'absolute'});
		}
		
	}
	
});

function init(){
	
	if($('loading') != null){
		new Effect.Fade($('loading'),{duration: 0.3, from: 1, to: 0});
	}
	
	if($("sliderItems") != null){
		switchTicker();
	}
	
	$$('.projectThumb').each(function(thumb) {
		var x = new thumbEffect($(thumb));		
	});
	
	i = 0;
	$$('#menu li li').each(function(menuItem) {
		if($(menuItem).id != "selected"){
			$(menuItem).insert('<div id="rollover' + i + '" style="display: none;"></div>','end');
			$('rollover'+ i).style.display = "none";			
		}
		i++;
	});
	i = 0;
	$$('#menu li li a').each(function(menuItem) {
		if($(menuItem).id != "selected"){
			var x = new menuEffect($(menuItem),$("rollover"+i));			
		}
		i++;
	});
	
	if($("topButton") != null){
		$("topButton").observe("click",function(e){
			e.stop();
			new Effect.ScrollTo("headerWrapper",{duration: 0.5});									
		});
	}
	
	if($("getInTouchButton") != null){
		$("getInTouchButton").observe("click",function(e){
			var pageSize = getPageSize();
			$("getInTouch").setStyle({width: pageSize[0] + 'px',height: pageSize[1] + 'px'});
			new Effect.Appear($("getInTouch"),{duration: 0.4, from: 0, to: 1});
			new Effect.ScrollTo("headerWrapper",{duration: 0.4});
			e.stop();			
		});
	}
	
	if($("getInTouchClose") != null){
		$("getInTouchClose").observe("click",function(e){			
			new Effect.Fade($("getInTouch"),{duration: 0.4, from: 1, to: 0});
			e.stop();			
		});
	}
}

// JavaScript Document
var timeGap = 6; //seconds - change this value to increase/decrease pause between items
currid = null;

function getPageSize() {
	        
	     var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
		
		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
	
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = xScroll;		
		} else {
			pageWidth = windowWidth;
		}

		return [pageWidth,pageHeight];
	}


function switchTicker(){
	Event.observe($('sliderItems'),'mouseover',pauseSlider);
	Event.observe($('sliderItems'),'mouseout',playSlider);
	
	$items = $('sliderItems').getElementsByTagName("li");
	$buttons = $('sliderButtons').getElementsByTagName("li");
	if(currid == null){
		currid = 0;
		showItem($items[currid].id,0);
		Element.toggleClassName($buttons[currid],'selected');
		
	}else{
		Element.removeClassName($buttons[currid],'selected');
		hideItem($items[currid].id);
		if(currid == ($items.length-1)){
			currid = 0;
		}else{
			currid = currid + 1;
		}
		showItem($items[currid].id,0.3);
		Element.toggleClassName($buttons[currid],'selected');
	}
	timer = setTimeout(switchTicker,(timeGap*1000));
}

function pauseSlider(){
	clearTimeout(timer);
}

function playSlider(){
	timer = setTimeout(switchTicker,(timeGap*1000));
}

function switchToItem(itemNum){
	
	clearTimeout(timer);
	hideItem($items[currid].id);
	Element.removeClassName($buttons[currid],'selected');
	currid = itemNum;
	showItem($items[currid].id,0.3);
	timer = setTimeout(switchTicker,(timeGap*1000));
	Element.toggleClassName($buttons[currid],'selected');
	return false;
}

function showItem(id,d){
	//Effect.Appear($(id),{duration: 0.3, from: 0, to: 1,delay:d});
	var pageSize = getPageSize();
	
	xPos = (pageSize[0]/2) - (960/2);
	new Effect.Move($(id), { duration: 0.6, x: xPos, mode: 'absolute', transition: Effect.Transitions.linear});

}

function hideItem(id){
	//Effect.Fade($(id),{duration: 0.3, from: 1, to: 0});
	new Effect.Move($(id), { duration: 0.8, x: -3000, mode: 'absolute', transition: Effect.Transitions.linear, afterFinish: function() { $(id).setStyle({left:'3000px'}); } });
}

Event.observe(window,'load',init);