/*\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
/\  Name: Kiosk Demo js                                              /\
/\  Description: Provides JavaScript code to make the demo area work /\
/\  Author: Tom Belknap                                              /\
/\  Date: September 17, 2008                                         /\
/\  Requires: script.aculo.us 1.8.1 libraries                        /\
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/*/

/* kioskDemo Class definition */
function kioskDemo(page, country, foo) {
	this.demo = document.getElementById('demo_display');
	this.img_dir = '/global/mul/digital/kiosk/img/';
	this.design = 'default';
	this.style = foo;
	this.matching = 'false';
	this.img = function() { var image = this.img_dir+this.page+'/'+this.style+'/'+this.design+'.jpg'; return image }
	this.page = page;
	this.country = country;
	//this.source = function() { var source = '/global/mul/digital/kiosk/xml/'+this.page+'_'+this.country+'.xml'; return source }
	this.source = function() { var source = '/global/mul/digital/kiosk/xml/'+this.page+'.xml'; return source }
	this.fs_margin = 0;
	this.items;
}

// getImages: Object method that assigns the correct XML file to the Object Property 'items' and loads the correct images per page-load
kioskDemo.prototype.getImages = function() {
	//var source = '/global/mul/digital/kiosk/xml/'+this.page+'_'+this.country+'.xml';
	var source = '/global/mul/digital/kiosk/xml/'+this.page+'.xml';
	var style = this.style;
	HTTP.getXML(source, return_result);
	function return_result(result) {
		var items = result.getElementsByTagName('collection')[0];
		for(x = 0; x<items.childNodes.length; x++) {
			if(items.childNodes[x].tagName) {
				var images = items.childNodes[x];
				var nameTag = images.tagName.toString();
				var target = document.getElementById(nameTag);
				for(y = 0; y < images.childNodes.length; y++) {
					if(images.childNodes[y].tagName) {
						if ( (images.childNodes[y].getAttribute('for') == 'all') || !images.childNodes[y].getAttribute('for') || (images.childNodes[y].getAttribute('for') == style) ) {
							var image = document.createElement('img');
							image.src = images.childNodes[y].getAttribute('src');
							image.id = images.childNodes[y].getAttribute('name');
							image.setAttribute('class', 'k_button');
							image.style.cursor = 'pointer';
							target.appendChild(image); 
						}
					}
				}
			}
		}
	}
}

// updateImages: Object method that checks for new design images when the design_button is clicked upon.
kioskDemo.prototype.updateImages = function() {
	//var source = '/global/mul/digital/kiosk/xml/'+this.page+'_'+this.country+'.xml';
	var source = '/global/mul/digital/kiosk/xml/'+this.page+'.xml';
	var style = this.style;
	var design = this.design;
	var matching = this.matching;
	HTTP.getXML(source, return_result);
	function return_result(result) {
		var items = result.getElementsByTagName('design');
		var design_panel = document.getElementById('designs');
		var cur_images = design_panel.getElementsByTagName('IMG');
		var z = 0;
		for(var x = 0; x<items.length; x++) {
			if((items[x].getAttribute('for') == 'all') || (items[x].getAttribute('for') == style)) {
				cur_images[z].src = items[x].getAttribute('src');
				cur_images[z].id = items[x].getAttribute('name');
				z++;
			}
		}
	}
}

// changeTab: Object method that switches between the two tabs, which are held as Object properties, of the "recipe card" selection area
kioskDemo.prototype.changeTab = function(tab) {
	if(tab.getAttribute('id') == 'styles_button') {
		this.designs_panel.style.zIndex = '0';
		this.designs_button.style.background = 'url(/global/mul/digital/kiosk/img/designs_down.jpg) no-repeat';
		this.designs_button.style.paddingTop = '12px';
		this.styles_button.style.background = 'url(/global/mul/digital/kiosk/img/styles_up.jpg) no-repeat';
		this.styles_button.style.paddingTop = '7px';
	}
	else {
		this.designs_panel.style.zIndex = '10';
		this.designs_button.style.background = 'url(/global/mul/digital/kiosk/img/designs_up.jpg) no-repeat';
		this.designs_button.style.paddingTop = '7px';
		this.styles_button.style.background = 'url(/global/mul/digital/kiosk/img/styles_down.jpg) no-repeat';
		this.styles_button.style.paddingTop = '12px';
	}
}

// changeFile: Object method that changes the global Object properties 'design' and 'style' as appropriate and recalculates the resultant image and directory.
kioskDemo.prototype.changeFile = function(obj) {
	var mode = obj.parentNode.id;
	var medium = obj.id;
	cur_designs = document.getElementById('designs').getElementsByTagName('IMG');
	(mode == 'designs') ? (this.design = medium) : (this.style = medium);
	(mode == 'designs') ? (this.design = medium) : (this.design = 'default');
	document.getElementById('demo_display').getElementsByTagName('img')[0].setAttribute('src', this.img());
}



/* Utility functions */

// addEvent is a simple function that allows for simplified onX event handling
function addEvent(elm, evType, fn, useCapture) {
	elm["on"+evType]=fn;return;
}

// getUrlVars grabs variables from the GET and returns them as an associative array
function getUrlVars(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	for(var i = 0; i < hashes.length; i++){
		hash = hashes[i].split('=');
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
return vars;
}

// snagByClassName
document.getElementsByClassName = function(clsName){
    var retVal = new Array();
    var elements = document.getElementsByTagName("*");
    for(var i = 0;i < elements.length;i++){
        if(elements[i].className.indexOf(" ") >= 0){
            var classes = elements[i].className.split(" ");
            for(var j = 0;j < classes.length;j++){
                if(classes[j] == clsName)
                    retVal.push(elements[i]);
            }
        }
        else if(elements[i].className == clsName)
            retVal.push(elements[i]);
    }
    return retVal;
}

// launchKiosk runs after the window loads completely and is used to fill in all the moving parts of the Kiosk demo window
function launchKiosk() {
	k.getImages()
	setTimeout(setEvents, 200);
	var demo_container = document.getElementById('demo_container');
	var divs = demo_container.childNodes;
	for (var x = 0; x<divs.length; x++) {
		if(divs[x].tagName == 'DIV') {
			if (divs[x].getAttribute('id') == 'designs_button') {
				k.designs_button = divs[x];
				k.designs_panel = document.getElementById('designs');
			}
			if (divs[x].getAttribute('id') =='styles_button') {
				k.styles_button = divs[x];
				k.styles_panel = document.getElementById('styles');
			}
		}
	}
	if('designs_button' in k && 'styles_button' in k) {
		addEvent(k.designs_button, 'click', function() {designsButtonChange(k.designs_button)});
		addEvent(k.styles_button, 'click', function() {k.changeTab(k.styles_button)});
		k.styles_button.style.cursor = 'pointer';
		k.designs_button.style.cursor = 'pointer';
	}
}

function designsButtonChange(obj) {
	k.updateImages();
	k.changeTab(obj);
}

function setEvents() {
	var panels = document.getElementsByClassName('panel');
	for(var z = 0; z < panels.length; z++) {
		// alert(panels[z].id);
		var buttnz = panels[z].getElementsByTagName('IMG');
		for(var q = 0; q < buttnz.length; q++) {
			var f = function(el) { 
				addEvent(el, 'click', function() { k.changeFile(this); }) ;
			}(buttnz[q]);
		} 
	} 
}