/*

MOKO.UI (requires yahoo-dom-event.js)

- 'el' and 'form' parameters can be either an object or object id
- 'focus' is optional, sets focus to first text input, parameter should be written as string 'focus'
- 'closebutton' is optional, parameter should be written as image path relative from page
- 'elWidth' and 'elHeight' should be in pixels, they parsed as integers so CSS values with unit are OK
- 'e' is event object required by some browsers to handle keypress, eg. onkeypress="mokoNumbersOnly(event)"
- 'fn' is function to fire when Enter key is pressed
- 'exception' is ascii value of key to allow as well as numbers

mokoObject(el);
mokoModalLightbox(url,width,height,returnFunc);
mokoModalHide()
mokoLightbox(el,focus,closebutton);
mokoLightboxHide(el);
mokoCentreElement(el,elWidth,elHeight);
mokoGetStyle(el,cssRule);
mokoSetFocus(form);
mokoHighlightInputs(form,color);
mokoGetTextInputs(el);
mokoNumbersOnly(e,fn);
mokoHideSelects(true); // Targets IE6

*/

function $(id) {return document.getElementById(id);}

var gReturnFunc;
var focusElement; // Global element used for setting focus with setTimeout()
var isIE6; if (navigator.userAgent.indexOf('MSIE 6.') != -1) isIE6 = true;

function checkDelete(){
    return confirm('Delete this record? This action cannot be undone...');
}
function mokoObject(el) {
	if (typeof el == 'string') el = $(el);
	return el;
}
function doDebug() {
    alert('debugging');
    var i = 1;
}
function mokoModalLightbox(title,url,width,height,returnFunc) {
	$('popupHeader').innerHTML = title;
	var container = $('popup-container');
	var frame = $('modalFrame');
	var dimmer = $('popup-dimmer');
	var marginOffset = parseInt(mokoGetStyle(document.body,'margin-top')) + parseInt(mokoGetStyle(document.body,'margin-bottom')); 
	dimmer.style.height = document.body.clientHeight + marginOffset + 20 + 'px';
	container.style.display = 'block';
	frame.width = width;
	frame.height = height;
	frame.src = url;
	mokoCentreElement(container, container.offsetWidth, container.offsetHeight);
	dimmer.style.display = 'block';
	mokoHideSelects(true);
	dimmer.style.visibility = 'visible';
	if (document.body.offsetHeight >= mokoGetViewportHeight()) {
    	dimmer.style.height = document.body.offsetHeight + "px";
    } else {
        dimmer.style.height = mokoGetViewportHeight() + "px";
    }	
	frame.style.visibility = 'visible';
	container.style.visibility = 'visible';
	gReturnFunc = returnFunc;
}

function mokoModalHide(callReturnFunc) {
	mokoHideSelects(false);
	$('popup-container').style.display = 'none';
	$('popup-dimmer').style.display = 'none';
	$('popup-container').style.visibility = 'hidden';
	$('popup-dimmer').style.visibility = 'hidden';
	if (callReturnFunc == true && gReturnFunc != null)
		gReturnFunc();
	$('modalFrame').src = '/loading.html';
}

function mokoLightbox(el,focus,closebutton) {
	// Creates a full screen lightbox effect with specified element positioned in centre of page
	// Lightbox elements are added to the DOM and styled inline, no CSS required
	el = mokoObject(el);
	var dimmer = document.createElement('div');
	var marginOffset = parseInt(mokoGetStyle(document.body,'margin-top')) + parseInt(mokoGetStyle(document.body,'margin-bottom')); 
	dimmer.id = 'dimmer';
	if (isIE6) dimmer.style.position = 'absolute';
	else dimmer.style.position = 'fixed';
	dimmer.style.top = '0px';
	dimmer.style.left = '0px';
	dimmer.style.background = '#000';
	dimmer.style.opacity = '.65';
	dimmer.style.filter = 'alpha(opacity=65)';
	dimmer.style.width = '100%';
	if (document.body.offsetHeight >= mokoGetViewportHeight()) {
    	dimmer.style.height = document.body.offsetHeight + "px";
    } else {
        dimmer.style.height = mokoGetViewportHeight() + "px";
    }	
	dimmer.style.zIndex = '1000';
	el.style.visibility = 'hidden';
	el.style.position = 'absolute';
	el.style.zIndex = '1001';
	el.style.display = 'block';
	if (closebutton) {
		var closeButton = document.createElement('img');
		closeButton.id = 'closebutton';
		closeButton.src = closebutton;
		closeButton.alt = 'Close';
		closeButton.title = 'Close';
		closeButton.style.position = 'absolute';
		closeButton.style.top = '6px';
		closeButton.style.right = '6px';
		closeButton.style.opacity = '0';
		el.appendChild(closeButton);
		// Workaround for Safari Mac, which needs CSS width and height for absolute position to work properly
		closeButton.onload = function() {
			closeButton.style.width = closeButton.width + 'px';
			closeButton.style.height = closeButton.height + 'px';
			closeButton.style.opacity = '1';
		}
	}
	// This bit is to stop selects showing above popup in IE6
	if (isIE6) {
		mokoHideSelects(true);
		// Then we have to show the ones inside the popup
		var elSelects = el.getElementsByTagName('select');
		for (i = 0; i < elSelects.length; i++) {
			elSelects[i].style.visibility = 'visible';
		}
	}
	el.parentNode.removeChild(el);
	document.body.appendChild(dimmer);
	document.forms[0].appendChild(el);
	mokoCentreElement(el,el.offsetWidth,el.offsetHeight);
	el.style.visibility = 'visible';
	if (focus == 'focus') mokoSetFocus(el);
	YAHOO.util.Event.on('dimmer','click',function(){mokoLightboxHide(el)});
	if (closebutton) YAHOO.util.Event.on('closebutton','click',function(){mokoLightboxHide(el)});
	//YAHOO.util.Event.on(window,'resize',function(){mokoCentreElement(el,el.offsetWidth,el.offsetHeight);});
}

function mokoLightboxHide(el) {
	// Hides lightbox element and removes dimmer and closebutton from DOM
	el = mokoObject(el);
	document.body.removeChild($('dimmer'));
	if ($('closebutton') != null) el.removeChild($('closebutton'));
	el.style.display = 'none';
	mokoHideSelects(false);
}

function mokoCentreElement(el,elWidth,elHeight) {
	// Centres an element within viewport horizontally and vertically
	// Repositions automatically on window resize
	el = mokoObject(el);
	elWidth = parseInt(elWidth);
	elHeight = parseInt(elHeight);
	var my_width  = mokoGetViewportWidth();
	var my_height = mokoGetViewportHeight();
	el.style.position = 'absolute';
	var scrollY = mokoGetScrollHeight();
	var setX = (my_width - elWidth)/2;
	var setY = (my_height - elHeight)/2 + scrollY;
	setX = (setX < 0) ? 0 : setX;
	setY = (setY < 0) ? 0 : setY;
	el.style.left = setX + 'px';
	el.style.top  = setY + 'px';
	YAHOO.util.Event.on(window,'resize',function(){mokoCentreElement(el,el.offsetWidth,el.offsetHeight);});
}

function mokoGetViewportWidth() {
    var my_width = 0;
    if (typeof(window.innerWidth) == 'number') {
		my_width  = window.innerWidth;
	} else if (document.documentElement && (document.documentElement.clientWidth)) {
		my_width  = document.documentElement.clientWidth;
	} else if (document.body && (document.body.clientWidth)) {
		my_width  = document.body.clientWidth;
	}
	return my_width;
}

function mokoGetViewportHeight() {
    var my_height = 0;
    if (typeof(window.innerWidth) == 'number') {
		my_height = window.innerHeight;
	} else if (document.documentElement && (document.documentElement.clientHeight)) {
		my_height = document.documentElement.clientHeight;
	} else if (document.body && (document.body.clientHeight)) {
		my_height = document.body.clientHeight;
	}
	return my_height;
}

function mokoGetScrollHeight() {
	var scrollY = 0;
	if (document.documentElement && document.documentElement.scrollTop) {
		scrollY = document.documentElement.scrollTop;
	} else if (document.body && document.body.scrollTop) {
		scrollY = document.body.scrollTop;
	} else if (window.pageYOffset) {
		scrollY = window.pageYOffset;
	} else if (window.scrollY) {
		scrollY = window.scrollY;
	}
	return scrollY;
}

function mokoGetStyle(el,cssRule){
	// Returns CSS style value (including units), even if set externally
	el = mokoObject(el);
	var strValue = '';
	if (navigator.userAgent.indexOf('MSIE') != -1) {
		if (cssRule == 'margin-top') {cssRule = 'marginTop'};
		if (cssRule == 'margin-bottom') {cssRule = 'marginBottom'};
	}
	if (document.defaultView && document.defaultView.getComputedStyle) {
		strValue = document.defaultView.getComputedStyle(el,'').getPropertyValue(cssRule);
	}
	else if (el.currentStyle) {
		cssRule = cssRule.replace(/-(w)/g, function (strMatch, p1){
			return p1.toUpperCase();
		});
		strValue = el.currentStyle[cssRule];
	}
	return strValue;
}

function mokoSetFocus(form) {
	// Sets focus to first text input or textarea within an element
	form = mokoObject(form);
	var textInputs = mokoGetTextInputs(form);
	if (textInputs.length != 0) {
		focusElement = textInputs[0];
		setTimeout('focusElement.focus();',0);
		// Must use setTimeout for IE or won't work, and function must be global
	}	
}

function mokoHighlighter(form,color,focus) {
	// Changes text input and textarea background colour on focus
	form = mokoObject(form);
	if (form == null) return;
	var textInputs = mokoGetTextInputs(form);
	if (textInputs.length != 0) {
		for (var i = 0; i < textInputs.length; i++) {
			YAHOO.util.Event.on(textInputs[i],'focus',function() {
				this.style.backgroundColor = color;
			});
			YAHOO.util.Event.on(textInputs[i],'blur',function() {
				this.style.backgroundColor = '';
			});
		}
	}
	if (focus == 'focus') mokoSetFocus(form);
}

function mokoGetTextInputs(el) {
	// Returns array of text inputs, file inputs and textareas within an element
	el = mokoObject(el);
	var textInputs = new Array();
	var inputs = el.getElementsByTagName('input');
	var textareas = el.getElementsByTagName('textarea');
	for (var i = 0; i < inputs.length; i++) {
		if ((inputs[i].type == 'text' || inputs[i].type == 'file' || inputs[i].type == 'password') && !(inputs[i].disabled)) {
			textInputs.push(inputs[i]);
		}
	}
	for (i = 0; i < textareas.length; i++) {
		textInputs.push(textareas[i]);
	}
	return textInputs;
}

function mokoNumbersOnly(e,fn,exception) {
	var key;
	var keychar;
	if (window.event) key = window.event.keyCode;
	else if (e) key = e.which;
	else return true;
	keychar = String.fromCharCode(key);
	if ((key==null) || (key==0) || (key==8) || (key==9) || (key==27)) return true;
	if(exception) {
		if(key==exception)return true;
	}
	if ((key==13) && fn) {
		eval(fn);
		return false;
	}
	else if ((("0123456789").indexOf(keychar) > -1)) return true;
	else return false;
}

function mokoHideSelects(hide) {
	if (hide) var visibility = 'hidden';
	else visibility = 'visible';
	if (isIE6) {
		var selects = document.getElementsByTagName('select');
		for (var i = 0; i < selects.length; i++) {
			selects[i].style.visibility = visibility;
		}	
	}
}

function ImageSwapper(oMainImage, oThumbsContainer) {
    this.mainImage = oMainImage;
    this.thumbsContainer = oThumbsContainer;
    this.thumbImage = null;
    
    ImageSwapper.prototype.init = function() {
		var thumbs = this.thumbsContainer.getElementsByTagName("img");
		for(var i=0; i<thumbs.length; i++) {
			YAHOO.util.Event.on(thumbs[i], "click", this.swapImage, this);
		}
    }
    
    ImageSwapper.prototype.swapImage = function(ev,obj) {
		var fadeout = new YAHOO.util.Anim(obj.mainImage,{opacity:{to:0}},.2,YAHOO.util.Easing.easeOut);
		obj.thumbImage = this;
		fadeout.onComplete.subscribe(obj.loadNewImage, obj);
		fadeout.animate();
    }
    
    ImageSwapper.prototype.loadNewImage = function (type, args, obj) {
		obj.thumbImage.style.cursor = "progress";
		obj.mainImage.src = obj.thumbImage.src.replace(/Thumb/, "Large");
		obj.mainImage.onload = function() {
			var fadein = new YAHOO.util.Anim(obj.mainImage,{opacity:{to:1}},.2,YAHOO.util.Easing.easeOut);
			fadein.animate();
			obj.thumbImage.style.cursor = "";
		}
    }
}

function SlidingList(oList, oThumbsContainer, listItemNumber) {
	this.list = oList;
	this.thumbsContainer = oThumbsContainer;
	//this.listItemWidth = 357;
	this.listItemNumber = null;
	this.thumbs = this.thumbsContainer.getElementsByTagName("img");
	if (listItemNumber != null || listItemNumber == 0) {
	    initPosition(listItemNumber);
	}
	
	SlidingList.prototype.init = function() {
		for(var i=0; i<this.thumbs.length; i++) {
			YAHOO.util.Event.on(this.thumbs[i], "click", this.slide, this);
			this.thumbs[i].listItemNumber = i;
		}
	}

	SlidingList.prototype.slide = function(ev, obj) {
		var newPosition = this.listItemNumber * listItemWidth * -1;
		var slider = new YAHOO.util.Anim(obj.list,{marginLeft:{to:newPosition}},1,YAHOO.util.Easing.easeOutStrong);
		slider.animate();
		for(var i=0; i<obj.thumbs.length; i++) {
			obj.thumbs[i].className = "";
		}
		this.className = "active";
	}
	
	SlidingList.prototype.initPosition = function (listItemNumber) {
	    var newPosition = listItemNumber * listItemWidth * -1;
	    this.list.style.marginLeft = newPosition + "px";
	    this.thumbs[listItemNumber].className = "active";
	}
}