/**
 * "Inside the Stacks" Widget
 */
var Stack = Class.create();

Stack.prototype = {
	initialize: function (xml_file) {
		this.titleContainer = 'stacksTitles';
		this.characterContainer = 'stacksCharacters';
		this.imgPrefix = '';
		this.mixUpButton = 'stack_mix_up';
		this.currentStack = new Array();
		this.xml = this.loadXmlFile(xml_file);
	},
	
	/**
	 * Load the external xml file, the callback is xmlReady, which
	 * sets the xml response to this.xml
	 */
	loadXmlFile: function (xml_file) {
		if (!xml_file) 
			throw("Stacks: XML file attribute is blank");
		
		xmlListener = this.xmlReady.bindAsEventListener(this);
		new Ajax.Request(xml_file, {method: 'get', onSuccess: xmlListener});
	},
	
	/**
	 * Set the xml response to 'this.xml' and call getDefaults
	 */
	xmlReady: function (transport) {		
		this.xml = transport.responseXML.getElementsByTagName('stack').item(0);
		$(this.mixUpButton).observe('click', function () {this.mixUp();}.bind(this));
		var initialStack = this.xml.getElementsByTagName('who');
		initialStack.length.times(
			function (index) {
				this.currentStack[index] = initialStack[index];
			}.bind(this)
		);
		this.getDefaults();
	},
	
	/**
	 * Get the xml items with a default tag
	 * pass the default items to this.fillStack()
	 */
	getDefaults: function () {		
		var defaults = new Array();
		var defaultTags = this.xml.getElementsByTagName('default');

		defaultTags.length.times(
			function (index) {
				defaults[index] = defaultTags.item(index).parentNode;
			}
		);
		
		this.fillStack(defaults);
	},
	
	/**
	 * Fill the stack with the first 6 elements passed
	 */
	fillStack: function (stackItems) {
		$(this.characterContainer).innerHTML = '';
		var stackSize = 6;
		stackSize.times(
			function (index) {				
				var stackItem = stackItems[index];
				var div = new Element('div', 
					{
						style: "background: url("+this.imgPrefix+this.getActiveImage(stackItem)+");"
					}
				);
				
				var a = new Element('a',
					{
						href: this.getLink(stackItem),
						alt: this.getTitle(stackItem)
					}
				);
				var img = new Element('img',
					{
						src: this.imgPrefix+this.getInactiveImage(stackItem),
						alt: this.getTitle(stackItem),
						width: '80',
						height: '80'
					}
				);
				
				a.insert(img);
				div.insert(a);
				
				div.observe('mouseover', function () {this.setTitle(this.getTitle(stackItem));}.bind(this));
				div.observe('mouseout', function () {this.setTitle("See WHO'S INSIDE THE STACKS!");}.bind(this));
				
				//$(this.characterContainer).appendChild(div);
				$(this.characterContainer).insert(div);
			}.bind(this)
		);
		
		$(this.characterContainer).appendChild(new Element('br', {style: 'clear: both;'}));
	},
	
	getNodeValue: function (stackItem, value) {
		return stackItem.getElementsByTagName(value)[0].firstChild.nodeValue;
	},
	
	getActiveImage: function (stackItem) {
		return this.getNodeValue(stackItem,'active');
	},
	
	getInactiveImage: function (stackItem) {
		return this.getNodeValue(stackItem, 'inactive');
	},
	
	getTitle: function (stackItem) {
		return this.getNodeValue(stackItem, 'title');
	},
	
	getLink: function (stackItem) {
		return this.getNodeValue(stackItem, 'link');
	},
	
	setTitle: function (title) {
		$(this.titleContainer).update(title);
	},
	
	/**
	 * Randomly pick  elements from the stack and re-fill the stack
	 */
	mixUp: function () {
		if (this.currentStack.length > 9) {
			var notShown = this.currentStack.slice(4);
			notShown.sort(function () {return 0.5 - Math.random();});
			this.currentStack = notShown.concat(this.currentStack.splice(0,4));
		} else {
			this.currentStack.sort(function () {return 0.5 - Math.random();});
		}
		this.fillStack(this.currentStack);
	}
}