/*  MockType Prototype Framework, version 0.7
 *  (c) 2009-current Lammert Postma
 *
 *  MockType is freely distributable under the Creative Commons license.
 *  For details, see the MockType web site: http://www.mocktype.org/
 *
 *--------------------------------------------------------------------------*/

var isIE=(navigator.userAgent.indexOf('MSIE') > -1); isIE=false;
/* ------------------------------------
	Fire off functions after DOM is loaded
------------------------------------ */	
window.onload = wndLoaded;

	function wndLoaded(){
		initAccordions();
		initForms();
		if(isIE==false){
			initCollapsible();
			initMenuFlyout();
			initMenuToc();
			initTab();
			initCarrousel();
			initTable();
			initInfoPanel();
			//initAccount();
			//initDock();
		}
	}
	
	
	// Event.observe(window, 'load', function() { 
		  				
	//	  }	);

/* ------------------------------------
	Start of components functions
------------------------------------ */	

	/* ------------------------------------
	||	Accordions (accordion, open-1, animate)
	------------------------------------ */	
	
	function initAccordions() {
		var tC = getElementsByClassName("accordion");	
		if(tC){
			for(var i=0; i < tC.length; i++){
				
				var accObj = tC[i]	// accordion Element
				// Set header of accordion element
				var dtElements = accObj.getElementsByTagName('DT');
				for(var iB=0; iB<dtElements.length; iB++){
					if(dtElements[iB].className){ if(! dtElements[iB].className.indexOf("closed")){ dtElements[iB].className += ' closed';}} else {dtElements[iB].className="closed";}					
					dtElements[iB].setAttribute('onclick','toggleAccordion(this)')
				}
				
				// Hide all body elements
				var ddElements = accObj.getElementsByTagName('DD');
				for(var iC=0; iC<ddElements.length; iC++){
					if (isIE==false) ddElements[iC].style.display = 'none';
				}
				
				// Check if one elements has to be set to open
				if(accObj.className.indexOf('open-')){
					var start = accObj.className.indexOf('open-')+5;
					var num = accObj.className.substr(start,1) - 1;
					var obj = accObj.getElementsByTagName('DT')[num];
					 if (isIE==false){ if(obj) toggleAccordion(obj);
						else	alert('#Error - Element: Accordion\n\nThe option-[index] you have entered is not recognized. Please make sure this number is correct.');
					 }
				}
			}
		}
	}
	
	
	
	function initAccordionsORIG() {
		var tC = getElementsByClassName("accordion");	
		if(tC){
			for(var i=0; i < tC.length; i++){
				
				var accObj = tC[i]	// accordion Element
				// Set header of accordion element
				var dtElements = $(accObj).getElementsByTagName('DT');
				for(var iB=0; iB<dtElements.length; iB++){
					$(dtElements[iB]).addClassName('closed');
					$(dtElements[iB]).setAttribute('onclick','toggleAccordion(this)')
				}
				
				// Hide all body elements
				var ddElements = $(accObj).getElementsByTagName('DD');
				for(var iC=0; iC<ddElements.length; iC++){
					if (isIE==false) $(ddElements[iC]).style.display = 'none';
				}
				
				// Check if one elements has to be set to open
				if($(accObj).className.include('open-')){
					var start = $(accObj).className.indexOf('open-')+5;
					var num = $(accObj).className.substr(start,1) - 1;
					var obj = $(accObj).getElementsByTagName('DT')[num];
					 if (isIE==false){ if(obj) toggleAccordion(obj);
						else	alert('#Error - Element: Accordion\n\nThe option-[index] you have entered is not recognized. Please make sure this number is correct.');
					 }
				}
			}
		}
	}
	
	
	function toggleAccordionTEST(obj){
		var accObject = obj.parentNode;
		var accElementHeader = obj;
		var accElementBody = obj.next();
		
		var accAllHeader = accObject.getElementsByTagName('DT');
		var accAllBody = accObject.getElementsByTagName('DD');

		var animate = false
		
		// Check for animation and speed
		if(accObject.className.indexOf('animate')){animate = true;}
		
		for(var i=0; i<accAllHeader.length; i++){
			if(accAllHeader[i]!=accElementHeader) {
				accAllHeader[i].className.replace('open','closed');
				//$(accAllHeader[i]).addClassName('closed');
				//$(accAllHeader[i]).removeClassName('open');
				
				if(animate)	Effect.BlindUp($(accAllHeader[i]).next(),{duration:0.5});
				else		$(accAllHeader[i]).next().style.display = 'none';
			}
		}
				
		if(accElementHeader.hasClassName('closed')) 	{
			accElementHeader.removeClassName('closed');
			accElementHeader.addClassName('open');
			if(animate)	Effect.BlindDown(accElementBody,{duration:0.5});
			else		accElementBody.style.display = 'block';
		}
		else	{
			accElementHeader.removeClassName('open');
			accElementHeader.addClassName('closed');
			if(animate) Effect.BlindUp(accElementBody,{duration:0.5});
			else		accElementBody.style.display = 'none';
		}
	}
	
	function toggleAccordion(obj){
		var accObject = obj.parentNode;
		var accElementHeader = obj;
		try{ var accElementBody = obj.next();} catch(err){}
		
		var accAllHeader = accObject.getElementsByTagName('DT');
		var accAllBody = accObject.getElementsByTagName('DD');

		var animate = false
		
		// Check for animation and speed
		if(accObject.className.include('animate')){
			animate = true;
		}
		
		for(var i=0; i<accAllHeader.length; i++){
			if(accAllHeader[i]!=accElementHeader) {
				accAllHeader[i].addClassName('closed');
				accAllHeader[i].removeClassName('open');
				
				if(animate)	Effect.BlindUp($(accAllHeader[i]).next(),{duration:0.5});
				else		$(accAllHeader[i]).next().style.display = 'none';
			}
		}
				
		if(accElementHeader.hasClassName('closed')) 	{
			accElementHeader.removeClassName('closed');
			accElementHeader.addClassName('open');
			if(animate)	try{Effect.BlindDown(accElementBody,{duration:0.5});} catch(err){}
			else		accElementBody.style.display = 'block';
		}
		else	{
			accElementHeader.removeClassName('open');
			accElementHeader.addClassName('closed');
			if(animate) try{Effect.BlindUp(accElementBody,{duration:0.5});} catch(err){}
			else		accElementBody.style.display = 'none';
		}
	}
	
	/* ------------------------------------
	||	Collapsible - (collapsible, open, animate)
	------------------------------------ */	
	function initCollapsible(){
		var tC = getElementsByClassName("collapsible");	
		if(tC){
			for(var i=0; i<tC.length; i++){
				var tH = $(tC[i]).down()
				var tB = $(tC[i]).down().next();
				
				$(tH).setAttribute('onclick','toggleCollapsible(this)')
				
				if(tC[i].hasClassName('open')){
					tB.setAttribute('style','display:block;')
				}
				else{
					$(tC[i]).addClassName('closed');
					tB.setAttribute('style','display:none;')
				}
			}
		}
	}
	function toggleCollapsible(obj){
		var tC = obj.parentNode.down().next();
		var animate = false
		
		// Check for animation and speed
		if($(obj).up().className.include('animate')){
			animate = true;
		}

		if(obj.parentNode.hasClassName('closed')) 	{
			obj.parentNode.removeClassName('closed');
			obj.parentNode.addClassName('open');
			if(animate) Effect.toggle(tC,'blind',{duration:0.5});
			else	tC.show();
		}
		else	{
			obj.parentNode.removeClassName('open');
			obj.parentNode.addClassName('closed');
			if(animate) Effect.toggle(tC,'blind',{duration:0.5});
			else	tC.hide();
		}
	}
	
	/* ------------------------------------
	||	Menu Table of Contents (menu-toc, animate, activePage)
	------------------------------------ */	
	function initMenuToc(){
		var tC = getElementsByClassName("menu-toc");	
		if(tC){
			for(var i=0; i<tC.length; i++){
				var subMenu = $(tC[i]).getElementsByTagName('UL');
				
				for(n=0; n<subMenu.length; n++){
					$(subMenu[n]).previous().setAttribute('onclick','toggleMenuToc(this); return false');
					
					if($(subMenu[n]).parentNode.hasClassName('open')){
						$(subMenu[n]).show();
					}
					else {
						$(subMenu[n]).up().addClassName('closed');
						$(subMenu[n]).hide();	
					}
				}
				if(tC[i].hasClassName('activePage')) checkActivePage($(tC[i]));
			}
		}
	}
	function checkActivePage(obj){
		var sPath = window.location.pathname;
		var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
				
		var allOl = obj.getElementsByTagName("a");
		for (var i=0;i<allOl.length;i++){
			if(allOl[i].href == window.location){
				allOl[i].up().addClassName('active');
				if(allOl[i].up().up().up().tagName == 'LI'){
					toggleMenuToc(allOl[i].up().up().previous())
				}
			}
		}
	}
	function toggleMenuToc(obj){
		m 	= obj.up();
		mUl = obj.next();
		
		var animate = false
		
		// Check for animation and speed
		if($(obj).up().up().className.include('animate')){
			animate = true;
		}
		
		if($(m).hasClassName('closed')){
			$(m).removeClassName('closed');
			$(m).addClassName('open');
			if(!animate) {	mUl.show()	}
		}
		else{
			$(m).removeClassName('open');
			$(m).addClassName('closed');
			if(!animate) {	mUl.hide()	}
		}
			if(animate) Effect.toggle($(mUl), 'blind',{ duration:0.5 });
	}
	
	/* ------------------------------------
	||	Menu Flyout (menu-flyout)
	------------------------------------ */	
	function initMenuFlyout(){
		var tC = getElementsByClassName("menu-flyout");	
		if(tC){
			for(var i=0; i<tC.length; i++){
				var subMenu = $(tC[i]).getElementsByTagName('UL');
				for(var n=0; n<subMenu.length; n++){
					$(subMenu[n]).up().addClassName('closed');
					$(subMenu[n]).up().setAttribute('onmouseOver','toggleMenuFlyout(this)')
					$(subMenu[n]).up().setAttribute('onmouseOut','toggleMenuFlyout(this)')
					$(subMenu[n]).style.display = 'none';
				}
			}
		}
	}
	function toggleMenuFlyout(obj){
		m 	= obj;
		mUl = $(m).getElementsByTagName('ul');
		
		if($(m).hasClassName('open')){
			$(m).removeClassName('open');
			$(m).addClassName('closed');
			$(mUl[0]).hide();
		}
		else{
			$(m).addClassName('open');
			$(m).removeClassName('closed');
			$(mUl[0]).show()
		}
	}

	
	/* ------------------------------------
	||	Tabs (tab-[top,left,bottom], open-1, event-hover)
	------------------------------------ */	
	function initTab(){
		var tC = getElementsByClassName("tab-");	
		if(tC){
			for(var i=0; i<tC.length; i++){
				var tabObj = $(tC[i]);
				var tabPanelObj = $(tabObj).down();
				var tabPanel = $(tabPanelObj).getElementsByTagName('LI');
				var contentPanel = $(tabObj).down().next();

				
				if($(tabObj).className.include('event-')){
						var start = $(tabObj).className.indexOf('event-')+6;
						var eEvent = $(tabObj).className.substr(start,5);
				}
				else 	var eEvent = 'onclick'

				// Attach beheviour to each tab-finger
				for(var n=0;n<tabPanel.length;n++){
					$(tabPanel[n]).setAttribute('onclick','toggleTab(this); return false');
					if(eEvent == 'hover') $(tabPanel[n]).setAttribute('onmouseover','toggleTab(this); return false');
				}
				
				// Check if a specific tab has to been set to open
				if($(tabObj).className.include('open-')){
						var start = $(tabObj).className.indexOf('open-')+5;
						var num = $(tabObj).className.substr(start,1) - 1;
				}
				else 	var num = 0

				toggleTab(tabPanel[num])
			}
		}
	}
	function toggleTab(obj){
		var tUrl = $(obj).down().href;
		var tArr = $(obj).up().getElementsByTagName('LI');
		var contentPanel = $(obj).up().next();
				
		// Close all open tabs
		for(var i=0;i<tArr.length;i++){
			$(tArr[i]).removeClassName('open');
		}
	
		$(obj).addClassName('open');	// Add className op to active tab
		
		new Ajax.Request(tUrl, {
			onComplete: function(req) { $(contentPanel).update(req.responseText); }
		});
	}
	
	/* ------------------------------------
	||	Carrousel (carrousel)
	------------------------------------ */	
	function initCarrousel(){
		var tC = getElementsByClassName("carrousel");	
		if(tC){
			for(var i=0; i<tC.length; i++){
				var csObj = $(tC[i]);
				var csLeft = $(csObj).down()
				var csRight = $(csObj).down().next().next()
				var csList = $(csObj).down().next().down()
				var csListWidth = 0;
				
				csListElements = csList.getElementsByTagName('LI');
				for(var n=0; n<csListElements.length;n++){
					csListWidth += $(csListElements[n]).offsetWidth;
				}
					csListWidth += 100;
					csListWidth += 'px';

				//Attach beheviour to left and right navigation
				$(csLeft).setAttribute('onclick','navCarrousel(this); return false');
				$(csRight).setAttribute('onclick','navCarrousel(this); return false');
				$(csList).setAttribute('style','margin-left:0px; width:'+csListWidth);
			}
		}
	}
	function navCarrousel(obj){
		var dir	= '';
		var csObj = $(obj).up();
		var csLeft = $(csObj).down()
		var csRight = $(csObj).down().next().next()
		var csPanel = $(csObj).down().next()
		var	csList = $(csPanel).down();
		var csListPos = parseInt(csList.style.marginLeft);
		var maxPos = csList.offsetWidth * -1;
		
		// Get direction to navigate
		if($(obj).hasClassName('carrouselLeft')) 		dir = 'rrw';
		else if ($(obj).hasClassName('carrouselRight'))	dir = 'ffw';
		else											alert('#Error - Element: Carrousel\n\nError on event carrouselLeft / carrouselRight');
		
		// Check if a specific tab has to been set to open
		if($(csObj).className.include('step-')){
				var start = $(csObj).className.indexOf('step-')+5;
				var step = $(csObj).className.substr(start,1);
		}
		else 	var step = 1
				
		var csStep = ($(csList).down().offsetWidth) * step
		
		// Animate to new direction
		if(dir == 'rrw') 		var newPos = csListPos + csStep;
		else if(dir == 'ffw') 	var newPos = csListPos - csStep;
		else					alert('#Error - Element: Carrousel\n\n variable \'dir\' not defined');

		if(newPos <= 0 && newPos > maxPos)
			$(csList).morph('margin-left:'+newPos+'px',{ duration:0.3});
	}
	
	
	/* ------------------------------------
	||	Selectable Table (selectable)
	------------------------------------ */	
	function initTable(){
		var tC = getElementsByClassName("selectable");	
		if(tC){
			for(var i=0; i<tC.length; i++){
				var rows = $(tC[i]).getElementsByTagName('TR');
				for(var n=0; n<rows.length;n++){
					$(rows[n]).setAttribute('onclick','selectable(this); return false');
				}
			}
		}
		var tC = getElementsByClassName("stripes");	
		if(tC){
			for(var i=0; i<tC.length; i++){
				var rows = $(tC[i]).getElementsByTagName('TBODY')[0].getElementsByTagName('TR');
				for(var n=1; n<rows.length;n=n+2){
					$(rows[n]).addClassName('even');
				}
			}
		}
	}
	function selectable(obj){
		var allRows = obj.up().getElementsByTagName('TR');
		
		for(var i=0; i<allRows.length; i++){
			if($(allRows[i]) != obj)
				$(allRows[i]).removeClassName('selected');
		}
		
		if($(obj).hasClassName('selected')) 	{ $(obj).removeClassName('selected');  	}
		else									{ $(obj).addClassName('selected');		}
	}
	
	/* ------------------------------------
	||	InfoPanel (infoPanel, event-mouse)
	------------------------------------ */	
	function initInfoPanel(){
		var tC = getElementsByClassName("infoPanel");	
		if(tC){
			for(var i=0; i<tC.length; i++){
				var obj = tC[i];
				obj.hide();
				var cN = obj.className.split(' ');
				for(var n=0; n<cN.length; n++){
					var found = cN[n].indexOf('parent-');
					if(found != -1){
						var pId = cN[n].split('-')[1];
						$(pId).setAttribute('onmouseover','infoPanelShow(this);');
						$(pId).setAttribute('onmouseout','infoPanelHide(this);');
					}
				}
			}
		}
	}
	function infoPanelShow(obj){
		var tC = getElementsByClassName("infoPanel");	
		if(tC){
			for(var i=0; i<tC.length; i++){
				var tCobj = tC[i];
				var cN = tCobj.className.split(' ');
				for(var n=0; n<cN.length; n++){
					var found = cN[n].indexOf('parent-');
					if(found != -1){
						var pId = cN[n].split('-')[1];
						if(pId == obj.id){
							$(tCobj).show();
						}
					}
				}
			}
		}
	}
	function infoPanelHide(obj){
		var tC = getElementsByClassName("infoPanel");	
		if(tC){
			for(var i=0; i<tC.length; i++){
				tC[i].hide();
			}
		}	
	}
	
	
	/* ------------------------------------
	||	loginBox (logIn, logOut, logShow, logHide)
	------------------------------------ */	
	
	function initAccount(){
		var account = readCookie('account');
		
		if(account=='loggedIn'){
			document.body.addClassName('loggedIn');
		}
		else{
			document.body.removeClassName('loggedOut');
		}
		
		
		
		var tC = getElementsByClassName("logIn");	
		if(tC){
			for(var i=0; i<tC.length; i++){
				$(tC[i]).setAttribute('onclick','accountToggle(\'logIn\',this);return false');
			}
		}
		var tC = getElementsByClassName("logOut");	
		if(tC){
			for(var i=0; i<tC.length; i++){
				$(tC[i]).setAttribute('onclick','accountToggle(\'logOut\',this);return false');
			}
		}
	}
	function accountToggle(atd,obj){	
		if(atd=='logIn'){
			if(obj.up().up().up().hasClassName('validate')){
				var state = validateForm(obj.up().up().up())
				if(state){
					document.body.addClassName('loggedIn');
					createCookie('account','loggedIn');
				}
			}
			else{
				document.body.addClassName('loggedIn');
				createCookie('account','loggedIn');
			}
		}
		else if(atd=='logOut'){
			document.body.removeClassName('loggedIn');
			eraseCookie('account')
		}
		else{
			alert('#Error - Element: Account\n\nError on variable: ATD is not set.');
		}
		
		var cN = obj.className.split(' ');
		for(var n=0; n<cN.length; n++){
			var found = cN[n].indexOf('ref-');
			if(found != -1){
				var ref = cN[n].split('-')[1];
				document.location.href = ref
			}
		}
	}
	
	/* ------------------------------------
	||	initForms (req)
	------------------------------------ */	
	function initForms(){
		var tC = getElementsByClassName("validate");	
		if(tC){
			for(var i=0; i<tC.length; i++){
				tC[i].setAttribute('onSubmit','return validateForm(this)')
			}
		}	
	}			
	function validateForm(obj){
		var cN = obj.className.split(' ');
		for(var n=0; n<cN.length; n++){
			var found = cN[n].indexOf('message-');
			if(found != -1){
				var mP = cN[n].split('-')[1];
			}
			else mP = 'top';
		}
		var fe = obj.getElements();
		var toReturn = false;
		var error = '';
		if(fe){
			for(var i=0; i<fe.length; i++){
				var formElement = fe[i];
				var required = false;
				
				if(fe[i].hasClassName('req')){
					required = true;
					if(fe[i].value == ''){
						fe[i].up().addClassName('required');
						if(mP == 'top') {error += '<li>'+fe[i].title;+'</li>';}
						else			{error += fe[i].title;}
						fe[i].focus();
						toReturn = false;
					}
					else{
						fe[i].up().removeClassName('required');
						toReturn = true;
					}
				}
				
				var cN = formElement.className.split(' ');
				for(var n=0; n<cN.length; n++){
					var found = cN[n].indexOf('req-');
					if(found != -1){
						var pId = cN[n].split('-')[1];
						required = true;
						if(formElement.value == ''){
							formElement.up().addClassName('required');
							
							if(mP == 'top') {error += '<li>'+fe[i].title;+'</li>';}
							else			{error = fe[i].title;}
							
							formElement.focus();
							toReturn = false;
						}
						else if(pId == 'email'){
							check = checkMail(fe[i].value)
							if(!check){
								fe[i].up().addClassName('required');
								if(mP == 'top') {error += '<li>'+fe[i].title;+'</li>';}
								else			{error = fe[i].title;}
								formElement.focus();
								toReturn = false;
							}
							else	{
								formElement.up().removeClassName('required');
								toReturn = true;
							}
						}
						else if(pId == 'phone'){
							check = checkPhonenumber(fe[i].value)
							if(!check){
								fe[i].up().addClassName('required');
								if(mP == 'top') {error += '<li>'+fe[i].title;+'</li>';}
								else			{error = fe[i].title;}
								formElement.focus();
								toReturn = false;
							}
							else	{
								formElement.up().removeClassName('required');
								toReturn = true;
							}
						}
						else{
							formElement.up().removeClassName('required');
							toReturn = true;
						}
					}
				}
				
				if(mP == 'element' && required) {
					var eE = new Element('span', { 'class': 'error', 'class': 'error' }).update(error);
					if(!toReturn) $(fe[i]).up().insert({bottom: eE})
				}
			}
		}
		if(mP == 'top') {
		
			if($('formMsg'))	$('formMsg').remove();
			var eM = '<ul>'+error+'</ul>';
			var eE = new Element('div', { 'class': 'error', 'id': 'formMsg' }).update(eM);
			$(obj).insert({top: eE})
			
			if(toReturn)	$('formMsg').remove();
		}
		return toReturn;
	}				

	
/* ------------------------------------
	Start of Dock functions
------------------------------------ */	

	/* ------------------------------------
	||	Initialize Dock
	------------------------------------ */	
	var dockHtml = '';
	var dockUrl = 'mocktype/mocktype-docs.xml';
	function initDock(){
		new Ajax.Request(dockUrl, {
			onComplete: function(req) { 
				var xmlDoc = req.responseXML;
				var notes = xmlDoc.getElementsByTagName("note");
				
				dockHtml += '<dl class="accordion animate">';
				dockHtml += '<dt onclick="toggleAccordion(this); return false" class="closed">Settings</dt>';
				dockHtml += '<dd style="display:none;">';
				dockHtml += '<form><h3>Notes</h3><ul class="dockSettings"><li><label><input type="radio" name="noteShow" onclick="dockAttachNoteImage();"> Show icon on page</li>';
				dockHtml += '<li><label><input type="radio" name="noteShow" onclick="dockRemoveNoteImage();" checked="checked"> Hide icons on page</li></ul>';
				dockHtml += '<h3>Grid</h3><ul class="dockSettings"><li><label><input type="radio" name="gridShow" onclick="showGrid();"> Show grid</li>';
				dockHtml += '<li><label><input type="radio" name="gridShow" onclick="hideGrid();" checked="checked"> Hide grid</li></ul>';
				dockHtml += '</form>';
				dockHtml += '</dd>';
				dockHtml += '<dt onclick="toggleAccordion(this); return false" class="closed">Components</dt>';
				dockHtml += '<dd style="display:none;"><ul>';
				for (var i=0; i<notes.length; i++) {
					var noteHandler = notes[i].getAttribute("selector");
					var noteTitle = notes[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
					if(notes[i].getAttribute("type")=='component') dockHtml += '<li><a href="#" onclick="dockShowInfo(\''+noteHandler+'\'); return false">'+noteTitle+'</a></li>'
				}	
				dockHtml += '</ul></dd>';
				dockHtml += '<dt onclick="toggleAccordion(this); return false" class="closed">Behaviours</dt>';
				dockHtml += '<dd style="display:none;"><ul>';
				for (var i=0; i<notes.length; i++) {
					var noteHandler = notes[i].getAttribute("selector");
					var noteTitle = notes[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
					if(notes[i].getAttribute("type")=='behaviour') dockHtml += '<li><a href="#" onclick="dockShowInfo(\''+noteHandler+'\'); return false">'+noteTitle+'</a></li>'
				}	
				dockHtml += '</ul></dd>';
				dockHtml += '<dt onclick="toggleAccordion(this); return false" class="closed">Styling / Grid</dt>';
				dockHtml += '<dd style="display:none;"><ul>';
				for (var i=0; i<notes.length; i++) {
					var noteHandler = notes[i].getAttribute("selector");
					var noteTitle = notes[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
					if(notes[i].getAttribute("type")=='style') dockHtml += '<li><a href="#" onclick="dockShowInfo(\''+noteHandler+'\'); return false">'+noteTitle+'</a></li>'
				}	
				dockHtml += '</ul></dd>';
				dockHtml += '</dl>';
				dockHtml += '<h2><a href="#" onclick="dockToggle(); return false;">Mock<em>Type</em> <span id="mtDockSpan">open Dock</span></a></h2>';
				
				var dockObj = new Element('div', { 'id': 'mtDock' }).update(dockHtml);
				$(document.body).insert(dockObj)
				
				new Draggable($('mtDock'), { scroll: window });
			 }
		});
	}
	function showGrid(){
		$('container').addClassName('showgrid')
	}
	function hideGrid(){
		$('container').removeClassName('showgrid')
	}
	function dockShowInfo(selector){
		new Ajax.Request(dockUrl, {
			onComplete: function(req) { 
				var xmlDoc = req.responseXML;
				var notes = xmlDoc.getElementsByTagName("note");
				var noteHtml = '';
				
				for (var i=0; i<notes.length; i++) {
					if(selector == notes[i].getAttribute("selector")){
						noteHtml += '<span><a href="#" onclick="dockInfoHide()">Close</a></span>';
						noteHtml += '<h2>'+notes[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+'</h2>';
						noteHtml += '<p><strong>Selector: </strong>'+notes[i].getAttribute("selector")+'</p>';
						noteHtml += '<p>'+notes[i].getElementsByTagName("description")[0].childNodes[0].nodeValue+'</p>';
						noteHtml += '<p>'+notes[i].getElementsByTagName("example")[0].childNodes[0].nodeValue+'</p>';
						noteHtml += '<p>'+notes[i].getElementsByTagName("options")[0].childNodes[0].nodeValue+'</p>';
						
						dockFocusOnElement(notes[i].getAttribute("selector"))
					}
				}
				if(!$('mtInfo')) {	
					var dockObj = new Element('div', { 'id': 'mtInfo' }).update(noteHtml);
					$(document.body).insert(dockObj)
				}
				else{
					$('mtInfo').update(noteHtml);
				}
				
				new Draggable($('mtInfo'), { scroll: window });
			 }
		});
	}
	function dockAttachNoteImage(){
		var notes = getElementsByClassName('mtNote')
		if(!notes || notes =="")
		{
			new Ajax.Request(dockUrl, {
				onComplete: function(req) { 
					var xmlDoc = req.responseXML;
					var notes = xmlDoc.getElementsByTagName("note");
					for (var i=0; i<notes.length; i++) {
						var noteHandler = notes[i].getAttribute("selector");
						var noteTitle = notes[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
						var imgHtml = '<a href="#" onclick="dockShowInfo(\''+noteHandler+'\')" onmouseover="this.up().up().addClassName(\'dockSelected\')" onmouseout="this.up().up().removeClassName(\'dockSelected\')"><img src="mocktype/dockNote.png"><em>'+noteTitle+'</em></a>'
						
						if(noteHandler.substr(0,1) == '.')	{
							var noteHandler = noteHandler.substr(1,noteHandler.length)
							var tC = getElementsByClassName(noteHandler);
							if(tC){
								for(var n=0; n<tC.length; n++){
									var dockNoteImg = new Element('span', { 'class': 'mtNote' }).update(imgHtml);
									$(tC[n]).setStyle('position:relative');
									$(tC[n]).insert(dockNoteImg)
								}
							}	
						}
						else if(noteHandler.substr(0,1) == '#'){
							var dockNoteImg = new Element('span', { 'class': 'mtNote' }).update(imgHtml);
							var noteHandler = noteHandler.substr(1,noteHandler.length)
							$(noteHandler).setStyle('position:relative')
							$(noteHandler).insert(dockNoteImg)
						}
						else {	alert('#Error - Element: Focus on element\n\nThe selector is incorrect.');	}
						
					}	
				 }
			});
		}
	}
	function dockRemoveNoteImage(){
		var tC = getElementsByClassName('mtNote');	
		if(tC){
			for(var i=0; i<tC.length; i++){
				$(tC[i]).remove();
			}
		}
	}
	function dockFocusOnElement(selector){
		var sel = getElementsByClassName('dockSelected');
		for(var i=0; i<sel.length; i++){
			sel[i].removeClassName('dockSelected');
		}
		if(selector.substr(0,1) == '.')	{
			var selector = selector.substr(1,selector.length)
			var tC = getElementsByClassName(selector);	
			if(tC){
				for(var i=0; i<tC.length; i++){
					Effect.Pulsate(tC[i], { pulses: 5, duration: 1.5 });
					tC[i].addClassName('dockSelected');
				}
			}	
		}
		else if(selector.substr(0,1) == '#'){
			var selector = selector.substr(1,selector.length)
			Effect.Pulsate($(selector), { pulses: 5, duration: 1.5 });
			$(selector).addClassName('dockSelected')
		}
		else {	alert('#Error - Element: Focus on element\n\nThe selector is incorrect.');	}
	}
	function dockToggle(){
		var acc = $('mtDock').getElementsByClassName('open');
		for(var i=0; i<acc.length; i++){
			toggleAccordion($(acc[i]))
		}
		if($('mtDock').offsetTop > -104){		
			$('mtDock').morph('top:-104px; left:20px',{ duration:0.3});
			$('mtDockSpan').update('open Dock');
			
		}
		else{
			$('mtDock').morph('top:-5px; left:20px',{ duration:0.3});
			$('mtDockSpan').update('close Dock');
		}
	}
	function dockInfoHide(){
		$('mtInfo').remove();
		var sel = getElementsByClassName('dockSelected');
		for(var i=0; i<sel.length; i++){
			sel[i].removeClassName('dockSelected');
		}
	}


/* ------------------------------------
	Start of Additional Functions
------------------------------------ */	
	function getElementsByClassName(classname, node) {
		if(!node) node = document.getElementsByTagName("body")[0];
		var a = [];
		var re = new RegExp('\\b' + classname + '\\b');
		var els = node.getElementsByTagName("*");
		for(var i=0,j=els.length; i<j; i++)
			if(re.test(els[i].className))a.push(els[i]);
		return a;
	}
	function createCookie(name,value,days) {
		if (days) {
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
	}
	function readCookie(name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	}
	function eraseCookie(name) {
		createCookie(name,"",-1);
	}
	function checkMail(str) {
		var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		if(str.match(emailRegEx)){
			return true
		}else{
			return false;
		}
	}
	function checkPhonenumber(str){
		var stripped = str.replace(/[\(\)\.\-\ ]/g, '');
		if (isNaN(parseInt(stripped))) 	return false;
		else							return true;
	}