/*
	Source: classbehaviours.handlers._template.js
	ClassBehaviours is a javascript framework based on class-name parsing.
	Copyright 2011 by Maurice van Creij and published on http://www.woollymittens.nl/
	This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
*/

	// CLASSBEHAVIOURS CLASS
	// create the root classbehaviours object if it doesn't already exist
	if(typeof(classBehaviours)=='undefined') classBehaviours = {};

		// CLASSNAME BEHAVIOUR FUNCTIONS
		// create the handlers child object if it doesn't already exist
		if(typeof(classBehaviours.handlers)=='undefined') classBehaviours.handlers = {}

			// implements the functionality to this classname
			classBehaviours.handlers.dropDownSelector = {
				// properties
				name: 'dropDownSelector',
				instance: 0,
				widthOffset: 10,
				settings: new Array(),
				// methods
				start: function(node){
					// create a node specific config object
					node.id = (node.id) ? node.id : this.name + '_' + this.instance++ ;
					this.settings[node.id] = {};
					// build the selector from the select element
					if(node.nodeName.indexOf('SELECT')>-1) this.build(node);
				},
				build: function(node){
					// shortcut pointers
					var dds = classBehaviours.handlers.dropDownSelector;
					var cu = classBehaviours.utilities;
					var tnn = classBehaviours.handlers.toggleNextNode;
					var cfg = dds.settings[node.id];
					// get the select element
					var selectElement = node;
					// create a new wrapper around this element
					var selectWrapper = document.createElement('span');
					selectWrapper.style.width = selectElement.offsetWidth + 'px';
					// transfer the classname of the select element to the wrapper
					selectWrapper.className = selectElement.className;
					// incorporate the value of the select element in the class name of the wrapper
					cu.setClassParameter(selectWrapper, 'value', selectElement.value.replace(/ /g, ''));
					// insert the wrapper before the select element
					selectElement.parentNode.insertBefore(selectWrapper, selectElement);
					// move the select element into the wrapper
					selectElement = selectElement.parentNode.removeChild(selectElement, true);
					selectWrapper.appendChild(selectElement);
					// create a new SPAN element
					var newOuterSpanElement = document.createElement('span');
					var newInnerSpanElement = document.createElement('span');
					// get the text content of the SPAN element from the select element's options
					var selectOptions = selectElement.getElementsByTagName('option');
					newInnerSpanElement.innerHTML = selectOptions[selectElement.selectedIndex].firstChild.nodeValue.split(' - ')[0];
					// add the SPAN element to the root node
					newOuterSpanElement.appendChild(newInnerSpanElement);
					newOuterSpanElement.style.width = selectElement.offsetWidth + 'px';
					selectWrapper.insertBefore(newOuterSpanElement, selectElement);
					// build the dropdown list
					var newUlElement = document.createElement('ul');
					var newLiElement, newAElement;
					for(var a=0; a<selectOptions.length; a++){
						// create a new LI element
						newLiElement = document.createElement('li');
						// create a new A element
						newAElement = document.createElement('a');
						// set the target URL of the A element
						newAElement.setAttribute('href', '#');
						// set the classname of the A element
						cu.setClassParameter(newAElement, 'index', a);
						cu.setClassParameter(newAElement, 'value', selectOptions[a].value.replace(/ /g, ''));
						// set the text content of the A element
						newAElement.innerHTML = selectOptions[a].firstChild.nodeValue;
						// add the click event to the new A element
						cu.addEvent(newAElement, 'click', (
							// with a copy of the pointer
							function(aElement){
								return function(event){
									// handle the event
									dds.select(aElement);
									// cancel the click on the A element
									event.preventDefault ? event.preventDefault() : event.returnValue = false;
								}
							}(newAElement)
						));
						// add the A element to the LI
						newLiElement.appendChild(newAElement);
						// add the LI element to the UL
						newUlElement.appendChild(newLiElement);
					}
					// set the minimum size of UL element
					newUlElement.style.minWidth = (selectWrapper.offsetWidth - dds.widthOffset) + 'px';
					if(navigator.userAgent.indexOf('MSIE 6')>-1 || navigator.userAgent.indexOf('MSIE 7')>-1){
						newUlElement.style.marginLeft = '-' + selectWrapper.offsetWidth + 'px';
						newUlElement.style.marginTop = newOuterSpanElement.offsetHeight + 'px';
					}
					// add the UL element to the root node
					selectWrapper.insertBefore(newUlElement, selectElement);
					// make sure the construct still responds to the selected index of the select
					cfg.selectedIndex = selectElement.selectedIndex;
					cfg.interval = setInterval(function(){
						if(selectElement.selectedIndex != cfg.selectedIndex){
							var allOptions = selectWrapper.getElementsByTagName('A')
							// update the selection
							dds.select(allOptions[selectElement.selectedIndex]);
						}
					}, 1000);
					// activate the styling of the root node
					selectWrapper.className += ' dropdown_active';
					newOuterSpanElement.className = 'toggleNextNode family_dropdownselector';
					newUlElement.className = 'hideThisNode';
					tnn.start(newOuterSpanElement);
				},
				// events
				select: function(that){
					// shortcut pointers
					var node = (typeof(this.nodeName)=='undefined') ? that : this ;
					var dds = classBehaviours.handlers.dropDownSelector;
					var htn = classBehaviours.handlers.hideThisNode;
					var cu = classBehaviours.utilities;
					// get the root element
					var rootElement = node.parentNode.parentNode.parentNode;
					// transfer the value to the wrapper as a classname
					var spanElement = rootElement.getElementsByTagName('span')[1];
					spanElement.innerHTML = node.innerHTML.split(' - ')[0];
					cu.setClassParameter(
						rootElement,
						'value',
						cu.getClassParameter(node, 'value')
					);
					// set the selected index of the select element
					var selectElement = rootElement.getElementsByTagName('select')[0];
					selectElement.selectedIndex = parseInt(cu.getClassParameter(node, 'index', '0'));
					// trigger the onchange event the element might have
					cu.triggerEvent(selectElement, 'change');
					// trigger toggle next node for this item
					htn.start(rootElement.getElementsByTagName('ul')[0]);
					// store the new index
					var cfg = dds.settings[selectElement.id];
					cfg.selectedIndex = selectElement.selectedIndex;
				}
			}

	// JQUERY WRAPPER
	if(typeof(jQuery)!='undefined'){
		(function($){
			var methods = {
				init : function(options) {
					return this.each(function(){
						classBehaviours.handlers.dropDownSelector.start($(this).context);
					});
				}
			};
			$.fn.dropDownSelector = function(method){
				if(methods[method]) {
					return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
				}else if(typeof method === 'object' || !method){
					return methods.init.apply(this, arguments);
				}else{
					$.error('Method ' +  method + ' does not exist on jQuery.dropDownSelector');
				}
			};
		})(jQuery);

		// JQUERY EVENTS
		$(document).ready(function() {
			$(".dropDownSelector").dropDownSelector();
		});

		/* DIRECT APPLICATION
		$("#myList li").addClass('dropDownSelector foo_bar');
		$("#myList li").dropDownSelector();
		*/
	}