Event.observe(window, 'load', headingScaler);
/*Event.observe(window, 'load', caption);*/
Event.observe(window, 'load', directory);
Event.observe(window, 'load', tabs);
Event.observe(window, 'load', tabsone);
Event.observe(window, 'load', function(){new scroll('flickr');});
Event.observe(window, 'load', function(){new scroll('youtube');});

// isoton scrollers
function scroll(el){
	this.display 		= 1;
	this.items 			= $$('div.'+el);
	this.itemsLength 	= this.items.length;
	this.hideByClass 	= function(){
		if(this.itemsLength>0){
			for(var i=0;i<this.itemsLength;i++){
				this.items[i].style.display = 'none';
			}
		}
	};
	this.clickNext 		= function(){
		this.hideByClass();
		this.display++;
		$(el+this.display).style.display = 'block';
		if(this.display>1){
			this.back.style.visibility = 'visible';
		}
		if(this.display>=this.itemsLength){
			this.next.style.visibility = 'hidden';
		}
		return false;
	};	
	this.clickBack 		= function(){
		this.hideByClass();
		this.display--;
		$(el+this.display).style.display = 'block';
		
		if(this.display<this.itemsLength){
			this.next.style.visibility = 'visible';
		}
		if(this.display<=1){
			this.back.style.visibility = 'hidden';
		}
		return false;
	};
	
	if(this.items.length>0){
		this.next = $(el+'Next');
		this.back = $(el+'Back');
		this.items[0].style.display = 'block';
		this.back.style.visibility = 'hidden';
		if(this.itemsLength==1){
			this.next.style.visibility = 'hidden';
		}
		Event.observe(this.next, 'click', this.clickNext.bindAsEventListener(this));
		Event.observe(this.back, 'click', this.clickBack.bindAsEventListener(this));
	}
	
}

// Course page tab switching
function tabs(){
	// Get all content cards (div#content div.class)
	var cards = document.getElementsByClassName('card', $('content'));
	if(cards.length>0){
		// Get all tabs
		var tabs = $$('ul.tabs li');
		// Get all links
		var anchors = $$('ul.tabs li a');
		
		// Hide all but the first content card
		for(var i=0; i<cards.length; i++){
			if(i!=0){
				cards[i].style.display = 'none';
			}
		}
		// Assign mouse click events to anchors
		for(var i=0;i<anchors.length;i++){
			Event.observe(anchors[i], 'click', function(e){
				// Get clicked tab
				var tab = Event.element(e).getAttribute('id');
				// Get associated card (i.e. div#card1)
				card = tab.replace(/tab/,'card');
				// Hide all cards
				for(var j=0;j<cards.length;j++){
					cards[j].style.display = 'none';
				}
				// Remove active class from all tabs
				for(var j=0;j<tabs.length;j++){
					tabs[j].removeClassName('active');
				}
				// Display associated card
				$(card).style.display = 'block';
				// Set active class on tab
				var ancestors = $(tab).ancestors();
				ancestors[0].addClassName('active');
				
				return false;
			});
		}
	}
}

function tabsone(){
	// Get all content cardsone (div#content div.class)
	var cardsone = document.getElementsByClassName('cardone', $('content'));
	if(cardsone.length>0){
		// Get all tabsone
		var tabsone = $$('ul.tabsone li');
		// Get all links
		var anchors = $$('ul.tabsone li a');
		
		// Hide all but the first content cardone
		for(var i=0; i<cardsone.length; i++){
			if(i!=0){
				cardsone[i].style.display = 'none';
			}
		}
		// Assign mouse click events to anchors
		for(var i=0;i<anchors.length;i++){
			Event.observe(anchors[i], 'click', function(e){
				// Get clicked tabone
				var tabone = Event.element(e).getAttribute('id');
				// Get associated cardone (i.e. div#cardone1)
				cardone = tabone.replace(/tabone/,'cardone');
				// Hide all cardsone
				for(var j=0;j<cardsone.length;j++){
					cardsone[j].style.display = 'none';
				}
				// Remove active class from all tabsone
				for(var j=0;j<tabsone.length;j++){
					tabsone[j].removeClassName('active');
				}
				// Display associated cardone
				$(cardone).style.display = 'block';
				// Set active class on tabone
				var ancestors = $(tabone).ancestors();
				ancestors[0].addClassName('active');
				
				return false;
			});
		}
	}
}




// Directory page expanding list items
function directory(){
	//Get elements with directory class under the content div
	var directories = document.getElementsByClassName('directory', $('content'));
	if(directories.length>0){
		//make sure its a list
		if(directories[0].tagName=='UL'){
			var directory = directories[0];
			//get first level children
			var items = directory.immediateDescendants();
			for(var i=0; i<items.length; i++){
				//check for a list child element
				if(items[i].getElementsByTagName('ul').length>0){
					var anchors = items[i].getElementsByTagName('a');
					//check for an anchor to attach the click event to
					if(anchors[0]){
						Event.observe(anchors[0], 'click', function(e){
							//get element clicked
							var el = Event.element(e);
							//get siblings (ignores text)
							var siblings = el.nextSiblings();
							var sibling = siblings[0];
							var j = 0;
							//loop through siblings until the list is found
							while(sibling.tagName!="UL"){
								j++;
								sibling = siblings[j];
							}
							//swap display attribute
							if(sibling.style.display=='block'){
								sibling.style.display='none';
							}else{
								sibling.style.display='block';
							}
							//return false for ie
							return false;
						});
						//return false for ff
						anchors[0].onclick = function(){return false;};
					}
				}
			}
		}
	}
}

function caption(){
	//get all images under the container div
	var imageList = document.getElementsByClassName('image', $('container'));
	 
	for(var i=0; i<imageList.length; i++){
		//check for a paragraph within the div (assumed there is a caption) and attach event listeners
		if(imageList[i].getElementsByTagName('p').length > 0){
			imageList[i].onmouseover = function(){ changeState(this, 'over') };
			imageList[i].onmouseout = function(){ changeState(this, 'off') };
			imageList[i].onfocus = function(){ changeState(this, 'over') };
			imageList[i].onblur = function(){ changeState(this, 'off') };
		}
	}
}

function changeState(element,state) {
	var image = element.getElementsByTagName('img')[0];
	var existingClassName=oldClassName(element,'static-state');
	if (element.className.match(/c-[0-9]+-c/)) {
		var timeOutHide=element.className.match(/[0-9]+/);
		timeOutHide=parseInt(timeOutHide);
		clearInterval(timeOutHide);
	}
	if(element.getElementsByTagName('p')[1].className.match('more')) {
		var elementRef=element.getElementsByTagName('p')[1];
		if(!elementRef.style.width){
			element.getElementsByTagName('p')[0].style.width = (image.offsetWidth-14) + 'px';
			elementRef.style.width = (image.offsetWidth-14) + 'px';
		}
		var timeOutRef=setInterval(function (){ show(elementRef, state) }, 10);
		element.className=existingClassName+"c-"+timeOutRef+"-c";
	}
}

function show(element, state) {
	var captionHeight = Element.getHeight(element.parentNode.parentNode.getElementsByTagName('p')[0]);
	var height = Element.getHeight(element);
	var startPosition=-height;
	var endPosition=captionHeight;
	var rate=10;
	var captionPosition=parseInt(element.style.marginBottom);
	if(isNaN(captionPosition)) {
		captionPosition=startPosition;
	}else if(state=='over'){
		captionPosition=captionPosition+rate;
	}else{
		captionPosition=captionPosition-rate;
	}

	if (captionPosition<=endPosition && state=='over' || captionPosition>=startPosition && state=='off') {
		element.style.marginBottom=captionPosition+'px';
	}else{
		var timeOut=element.parentNode.parentNode.className.match(/[0-9]+/);
		var existingClassName=oldClassName(element.parentNode.parentNode,'static-state');
		element.parentNode.parentNode.className=existingClassName+"static-state";
		timeOut=parseInt(timeOut);
		if(!isNaN(timeOut)){ clearInterval(timeOut);}
	}
}

function oldClassName (element, modificationClass) {
	var oldClass='';

	if (element.className) {
		oldClass=element.className;
	}else{
		return oldClass;
 	}

	if (oldClass.match(/(\bmodificationClass\b)|(c-[0-9]+-c)/)) {
		var newClass=oldClass.replace(/(\bmodificationClass\b)|(c-[0-9]+-c)/, "")
		newClass=newClass.replace(modificationClass, "")
	} else {
		var newClass=oldClass+" ";
	}

	return newClass;
}

function headingScaler(){

	if($('summary')){
		var header = $('header');
		var blurbLink = $('blurbLink');
		var scroll = 20;
		var pageWidth = $('container').getStyle('width');
		pageWidth = parseInt(pageWidth.replace(/[A-Z]*/gi,''));
		
		if(blurbLink){
			var blurbLinkMargin = blurbLink.getStyle('margin-right');
			blurbLinkMargin = parseInt(blurbLinkMargin.replace(/[A-Z]*/gi,''));
		}
		
		resize();
		Event.observe(window, 'resize', resize);
	}
		
	function resize(){
		width = getViewportWidth();
		
		// width > 800*600 resolution but less than the page width
		if(width<(pageWidth + scroll)&&width>799){
			// shift background to the left
			left = (pageWidth - width + scroll)*-1 + "px";
			header.setStyle({backgroundPosition: left + " top"});
			if(blurbLink){
				margin = pageWidth + blurbLinkMargin - width + scroll + "px";
				blurbLink.setStyle({marginRight:margin});
			}
			resetContent();
		// width < 800*600 resolution
		}else if(width<800){
			left = (pageWidth - 800 + scroll)*-1 + "px";
			header.setStyle({backgroundPosition: left + " top"});
			if(blurbLink){
				margin = pageWidth - 800 + blurbLinkMargin + scroll + "px";
				blurbLink.setStyle({marginRight:margin});
			}
			resetContent();
		// width > 800*600 resolution and page width
		}else{
			header.setStyle({backgroundPosition: "0 top"});
			if(blurbLink){
				blurbLink.setStyle({marginRight:blurbLinkMargin+"px"});
			}
			resetContent();
		}
	}
}

function resetContent(){
	// if IE6 or lower
	if ((typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) || (typeof window.innerWidth == 'undefined')){
		$('content').setStyle({display: "none"});
		$('content').setStyle({display: "block"});
	}
}

function getViewportWidth(){
	var viewportwidth;
	// mozilla/netscape/opera/IE7
	if (typeof window.innerWidth != 'undefined'){
		 viewportwidth = window.innerWidth;
	}
	// IE6
	else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){
		  viewportwidth = document.documentElement.clientWidth+20;
	}
	// <IE6
	else{
		viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
	}
	return viewportwidth;
}