/**
 * Util
 *
 * Jordan Bach <jordanbach at gmail dot com>
 * http://www.jordansmusicstudio.com/dynamic-web-design/
 * September 2008
 *
 * A collection of common, cross-browser functions to make custom JavaScript
 * development a little easier.
 */

var Util;
if (typeof Util == "undefined") 
	Util = {};

/**
 * DOM
 */

Util.addClass = function(el, cname) {
	el.className = el.className + " " + cname;
}

Util.removeClass = function(el, cname) {
	el.className = el.className.replace(new RegExp(" ?" + cname), "");
}

/**
 * Event
 */

Util.addEventListener = function(eventType, el, func) {
	if (el.addEventListener)
		el.addEventListener(eventType, func, false);
	else if (el.attachEvent)
		el.attachEvent('on' + eventType, func);
}

Util.removeEventListener = function(eventType, el, func) {
	if (el.removeEventListener)
		el.removeEventListener(eventType, func, false);
	else if (el.detachEvent)
		el.detachEvent('on' + eventType, func);
}

/**
 * Other
 */

Util.getScrollPosition = function() {
	var pos = {x:0,y:0};
	pos.x = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollLeft;
	pos.y = window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop;
	return pos;
}

Util.getElementDimensions = function(el) {
	var dim = {width:0, height:0};
	dim.width = el.offsetWidth;
	dim.height = el.offsetHeight;
	return dim;
}

Util.getElementPosition = function(el) {
	var pos = {x:0, y:0};
	pos.x = el.offsetLeft;
	pos.y = el.offsetTop;
	return pos;
}

Util.getMouseCoordinates = function(e) {
	var pos = { x:0, y:0 };
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	{
		pos.x = e.pageX;
		pos.y = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		pos.x = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		pos.y = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	return pos;
}

Util.getViewport = function() {
	var v = {width:0, height:0};
	if (window.innerHeight) {
		v.height = window.innerHeight;
		v.width = window.innerWidth;
	} else if (document.documentElement.clientHeight) {
		v.height = document.documentElement.clientHeight;
		v.width = document.documentElement.clientWidth;
	} else {
		v.height = document.body.clientHeight;
		v.width = document.body.clientWidth;
	}
	return v;
}
/**
 * Overlay
 *
 * Jordan Bach <jordanbach at gmail dot com>
 * http://www.jordansmusicstudio.com/dynamic-web-design/
 * September 2008
 *
 * Places a div over the entire screen and places a div with some content over
 * it. Intended to display pictures and other content in a modal fashion.
 */

function Overlay(params, opts) {
	
// dependencies
	if (typeof Util == "undefined")
		alert("Error: this script requires Util.js.");
	
// instance options
	this.backgroundColor = '#000';
	this.backgroundImage = null;
	this.maxOpacity = 0.4;
	
	this.closeButtonImage = null;
	this.closeButtonImageHover = null;
	this.closeButtonImageActive = null;
	this.closeButtonHoverClass = 'hover';
	this.closeButtonActiveClass = 'active';
	this.iframeClass = 'frameContent';
	
	this.enableFade = true;
	this.framerate = 30;
	this.duration = 500;
	
	this.enableDrag = false;
	
	this.overlayContentClass = 'overlayContent';
	this.closeButtonClass = 'overlayClose';

	if (typeof opts != "undefined")
		loadOptions(this);

// instance vars
	var ref = this,
		closeElement = createCloseElement(),
		backgroundElement = createBackgroundElement(),
		contentContainer = createContentContainer(),
		contentElement = null,
	

// internal state vars	
		isContentVisible = false,
		cursorOffset = {x:0, y:0}; // for drag support

// initialization
	registerTriggerEvents();
	resizeOverlay();
	Util.addEventListener('resize', window, resizeAndRepositionAll);

// Load content and place it in the contentContainer, signal when done
	function loadContent(resourceObj) {
		switch (resourceObj.resourceType) {
		case 'image':
			contentElement = new Image();
			contentElement.onload = onContentReady;
			contentElement.src = resourceObj.resource;
			break
		case 'html':
			contentElement = document.getElementById(resourceObj.resource).cloneNode(true);
			onContentReady();
			break;
		case 'webpage':
			contentElement = document.createElement('IFRAME');
			contentElement.style.width = '750px';
			contentElement.style.height = '500px';
			contentElement.frameborder ='0';
			contentElement.src = resourceObj.resource;
			onContentReady();
			break;
		case 'dynamic':
			contentElement = resourceObj.resource();
			onContentReady();
			break;
		default:
			alert('Error (Overlay.js): unsupported resource type.');
		}
	}

// Creates onclick listeners for all trigger elements
	function registerTriggerEvents() {
		var anchors = document.getElementsByTagName('A'),
			i;
		for (i = 0; i < anchors.length; i++)
			if (typeof params[anchors[i].id] != 'undefined')
				anchors[i].onclick = onTriggerClick;
	}
	
// Determines the appropriate content from the params array to display based on
// the id attribute of the trigger element.
	function onTriggerClick() {
		if (typeof params[this.id] != 'undefined') {
			loadContent(params[this.id]);
			return false;
		}
	}
	
	function showOverlay() {
		resizeOverlay();
		backgroundElement.style.display = 'block';
		contentContainer.style.display = 'block';
		contentElement.style.display = 'block';
		repositionContent();
	}
	
	function hideOverlay() {
		backgroundElement.style.display = 'none';
		contentContainer.style.display = 'none';
		contentElement.style.display = 'none';
	}
	
	function onContentReady() {
		contentElement.style.display = 'block';
		contentElement.style.visibility = 'visible';
		
		contentContainer.appendChild(closeElement);
		contentContainer.appendChild(contentElement);
		
		closeElement.onclick = onContentClose;
		
		if (ref.enableFade)
			fadeIn();
		else
			showOverlay();
		
//		if (ref.enableDrag) {
//		} else {
//		}
	}
	
	function onContentClose() {
		if (ref.enableFade)
			fadeOut();
		else
			hideOverlay();
	}
	
	function fadeIn() {
		animateOpacity(backgroundElement, 0, ref.maxOpacity, null, null);
		// animateOpacity(contentElement, 0, 1, null, repositionContent);
		contentContainer.style.display = 'block';
		repositionContent();
	}
	
	function fadeOut() {
		animateOpacity(backgroundElement, ref.maxOpacity, 0, hideOverlay, null);
		// animateOpacity(contentElement, 1, 0, hideOverlay, null);
	}
	
	function createBackgroundElement() {
		var el = document.createElement('DIV');
		el.style.background = ref.backgroundColor;
		el.style.backgroundImage = 'url(' + ref.backgroundImage + ')';
		el.style.opacity = ref.maxOpacity;
		el.style.filter = 'alpha(opacity=' + (ref.maxOpacity * 100) + ')';
		el.style.position = 'absolute';
		el.style.top = '0px';
		el.style.left = '0px';
		el.style.display = 'none';
		document.body.appendChild(el);
		return el;
	}

// Build the document element that holds the content for this overlay
	function createContentContainer() {
		var el = document.createElement('DIV');
		el.style.position = 'absolute';
		el.style.top = '0px';
		el.style.left = '0px';
		el.style.display = 'none';
		Util.addClass(el, ref.overlayContentClass);
		document.body.appendChild(el);
		return el;
	}
	
// Creates the element that closes the overlay and registers the listeners
	function createCloseElement() {
		var el = document.createElement('DIV'),
			img = new Image(),
			elText;

		if (ref.closeButtonImage !== null) {
			img.src = ref.closeButtonImage;
			el.appendChild(img);
		} else {
			elText = document.createTextNode('Close Window');
			el.appendChild(elText);
		}
		
		Util.addClass(el, ref.closeButtonClass);
		
		el.onclick = function() {
			Util.removeClass(el, 'hover');
			Util.removeClass(el, 'active');
			if (ref.closeButtonImage !== null) {
				img.src = ref.closeButtonImage;
			}
			onContentClose();
		}
		
		el.onmouseover = function() {
			Util.addClass(el, 'hover');
			if (ref.closeButtonImageHover !== null) {
				img.src = ref.closeButtonImageHover;
			}
		}
		
		el.onmousedown = function() {
			Util.removeClass(el, 'hover');
			Util.addClass(el, 'active');
			if (ref.closeButtonImageActive !== null) {
				img.src = ref.closeButtonImageActive;
			}
		}
		
		el.onmouseout = function() {
			Util.removeClass(el, 'hover');
			Util.removeClass(el, 'active');
			if (ref.closeButtonImage !== null) {
				img.src = ref.closeButtonImage;
			}
		}
		
		el.onmouseup = function() {
			Util.removeClass(el, 'active');
			Util.addClass(el, 'hover');
			if (ref.closeButtonImageHover !== null) {
				img.src = ref.closeButtonImageHover;
			}
		}
		
		closeElement = el;
		return el;
	}	

// Override default options with user preferences
	function loadOptions(obj) {
		for (var i in opts)
			if (typeof obj[i] != "undefined")
				obj[i] = opts[i];
	}

// adjust overlay size to fill document	
	function resizeOverlay() {
		var vp = Util.getViewport(),
			dm = Util.getElementDimensions(document.body);
		if (vp.height > dm.height)
			backgroundElement.style.height = vp.height + 'px';
		else
			backgroundElement.style.height = dm.height + 'px';
		backgroundElement.style.width = '100%';
	}

// position content in center of screen
	function repositionContent() {
		if (!contentElement) return;
		var vp = Util.getViewport(),
			dm = Util.getElementDimensions(contentElement),
			sp = Util.getScrollPosition();
		contentContainer.style.top = (sp.y + ((vp.height - dm.height)/3)) +'px';
		contentContainer.style.left = (sp.x + ((vp.width - dm.width)/2)) + 'px';
	}

// resize and position everything important
	function resizeAndRepositionAll() {
		resizeOverlay();
		repositionContent();
	}

// TODO: position element based on mouse coordinates
	function updateContentPosition(e) {
		if (!e) e = window.event;
		var mc = Util.getMouseCoordinates(e);
		contentContainer.style.top = (mc.y - cursorOffset.y) + 'px';
		contentContainer.style.left = (mc.x - cursorOffset.x) + 'px';
	}

// animate opacity on the given element
	function animateOpacity(el, start, end, callbackFunc, posFunc) {
		var fps = Math.floor(1000/ref.framerate),
			currentValue = start,
			finalValue = end,
			increment = Math.abs(end - start)/(ref.duration/fps),
			t;
	
		el.style.filter = 'alpha(opacity = '+(currentValue*100)+')';
		el.style.opacity = currentValue;

		// if (posFunc) posFunc();
		el.style.display = 'block';
		if (posFunc) posFunc();
		
		if (end >= start)
			t = setInterval(step, fps);
		else
			t = setInterval(reverseStep, fps);
		
		function step(off) {
			currentValue += increment;
			el.style.filter = 'alpha(opacity = '+(currentValue*100)+')';
			el.style.opacity = currentValue;
			if (currentValue >= finalValue) {
				clearTimeout(t);
				el.style.filter = 'alpha(opacity = '+(finalValue*100)+')';
				el.style.opacity = finalValue;
				if (callbackFunc) callbackFunc();
			}
		}
		
		function reverseStep() {
			currentValue -= increment;
			el.style.filter = 'alpha(opacity = '+(currentValue*100)+')';
			el.style.opacity = currentValue;
			if (currentValue <= finalValue) {
				clearTimeout(t);
				el.style.filter = 'alpha(opacity = '+(finalValue*100)+')';
				el.style.opacity = finalValue;
				if (callbackFunc) callbackFunc();
			}
		}
	}
}
/**
 * Client code for Overlay.js
 *
 * Jordan Bach <jordanbach at gmail dot com>
 * http://www.jordansmusicstudio.com/dynamic-web-design/
 * September 2008
 */

// You must specify this for each page.
// Possible resource types: image, html, webpage, or dynamic.
// The triggerN property is the actual HTML ID of an element that will 'trigger'
// or show the overlay effect when it is clicked.
var overlayContent = {
	trigger1: { 
		resource: 'images/sticky_snow.jpg',
		resourceType: 'image' 
	},
	trigger2: { 
		resource: 'images/sticky_snow.jpg',
		resourceType: 'image' 
	},
	trigger3: {
		resource: 'register-conditions.php?terms',
		resourceType: 'webpage'
	},
	trigger4: {
		resource: 'register-conditions.php?privacy',
		resourceType: 'webpage'
	},
	trigger5: {
		resource: myCallbackFunction,
		resourceType: 'dynamic'
	}
};

// These are all available options. All have defaults, so feel free to use as
// many or as few as you need.
var overlayOptions = {
	backgroundColor: '#00f',
	backgroundImage: 'images/checkered.png',
	maxOpacity: 0.8,
	
	closeButtonImage: 'images/close_off.gif',
	closeButtonImageHover: 'images/close_hover.gif',
	closeButtonImageActive: 'images/close_active.gif',
	closeButtonHoverClass: 'hover',
	closeButtonActiveClass: 'active',
	iframeClass: 'framedContent',
	
	enableFade: true,
	framerate: 30,
	duration: 500,
	
	enableDrag: false,
	
	overlayContentClass: 'overlayContent',
	closeButtonClass: 'overlayClose'
}

// Formats the current time HH:MM:SS
function displayTime(el) {
	var curDate = new Date(),
		hh = curDate.getHours(),
		mm = curDate.getMinutes(),
		ss = curDate.getSeconds();
	el.innerHTML = 'The time is: ' 
				 + (hh > 9 ? hh : '0' + hh) + ':'
				 + (mm > 9 ? mm : '0' + mm) + ':'
				 + (ss > 9 ? ss : '0' + ss);
}

// Callback function for dynamic content
function myCallbackFunction() {
	var myHeading = document.createElement('H2');
	displayTime(myHeading);
	setInterval(function(){displayTime(myHeading);}, 500)
	Util.addClass(myHeading, 'myHeading');
	return myHeading;
}

// Bind options and configuration to an Overlay instance to run when page loads.
Util.addEventListener('load', window, function() {
	var myOverlay = new Overlay(overlayContent, overlayOptions);
});