/**
 * Class : JSL.dom
 * Handles all the DOM functions.
 * Arguments: The argument can be the ID of an element, a DOM node reference or a CSS query.
 * Example:
 * 		JSL.dom("element-id")
 * 		JSL.dom(document.getElementById("element-id"))
 * 		JSL.dom("span a.external-links")
 */
(function() {
	function _dom_init(arguments) {
		var selected_elements = [];
		for(var i=0, args_length = arguments.length; i<args_length; i++) {
			var arg = arguments[i];
			var new_eles;
			
			if(typeof arg == "string") { //The arg is a selector
				this.selector[i] = arg;
				new_eles = this._select(arg);
			
			} else { //The argument is a DOM Node
				new_eles = arg;
			}
			selected_elements = selected_elements.concat(new_eles);
		}
		var elements_count = selected_elements.length;
		this.nodes = JSL.array(selected_elements);

		//If is the user gave us a specific dom node, we must return just that - with our additions
		if(arguments.length == 1 && elements_count == 1) {
			var arg_type = this._getType(arguments[0]);
			if(arg_type == 'node' || arg_type == 'id') {
				var ele = selected_elements[0]; //If an ID was specified, it must be available thru the get as a single element.
				if(!ele) return false; //Invaid element
				
				for(var i in this) {
					if(ele[i]) { //If the function already exists, back it up first.
						ele["_" + i] = ele[i];
					}
					ele[i] = this[i];
				}
				
				if(typeof ele.length == "undefined") ele.length = 1;
				ele.single = selected_elements[0];

				return ele; //Returns the Element - with all our additions
			}
		} else if(arguments.length == 1 && elements_count == 0) { // If the element with the given id does not exist,
			var arg_type = this._getType(arguments[0]);
			if(arg_type == 'node' || arg_type == 'id') {
				var return_vaule = {"return_null":true};
				return return_vaule;
			}
		}
		
		//Get all the array function in the 'this' element itself - stuff like map(), each
		for(var i in this.nodes) {
			this[i] = this.nodes[i];
		}
		if(typeof this.length == "undefined") this.length = this.getSize();
		
		return this;
	}
	
	_dom_init.prototype = {
		"selector":[],
		"nodes":[],
		"single":false,
		"valid_tags":["a","abbr","acronym","address","applet","area","b","base","basefont","bdo",
						"big","blockquote","body","br","button","caption","center","cite","code",
						"col","colgroup","dd","del","dir","div","dfn","dl","dt","em","fieldset",
						"font","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","hr",
						"html","i","iframe","img","input","ins","isindex","kbd","label","legend",
						"li","link","map","menu","meta","noframes","noscript","object","ol","optgroup",
						"option","p","param","pre","q","s","samp","script","select","small","span",
						"strike","strong","style","sub","sup","table","tbody","td","textarea","tfoot",
						"th","thead","title","tr","tt","u","ul","var"],
		
		///////////////////////////////// Styles /////////////////////////
		/**
		 * Adds the given class to the currently selected items
		 * Argument: class_name - The class that must be added to the selected elements
		 * Example:
		 *	JSL.dom("a").addClass("external");
		 */
		"addClass": function(class_name) {
			var self = this;
			this.nodes.each(function(ele) {
				self._class._add(ele,class_name);
			});
			return this;
		},
		/**
		 * Removes the said class from all the element the selected list
		 * Argument: class_name - The class that must be removed from all the selected elements
		 * Example: JSL.dom("span.active").removeClass("active");
		 */
		"removeClass": function(class_name) {
			var self = this;
			this.nodes.each(function(ele) {
				self._class._remove(ele,class_name);
			});
			return this;
		},
		/**
		 * Returns true if the class given as the argument is present for the current element.
		 * Argument: class_name - The class name that be checked for in the current element
		 * Return: This function returns true if the class is there in this element and else if the class is not found.
		 * Example: if(JSL.dom("main-link").hasClass("active")) { //...
		 */
		"hasClass": function(class_name) {
			return this._class._has(this.single,class_name);
		},
		
		/**
		 * Get the X,Y coordinates of the given element.
		 * Taken from http://txt.binnyva.com/2007/06/find-elements-position-using-javascript/
		 * Return: An associative array in this format - <code>{"left":leftx,"x":leftx,"top":topy,"y":topy}</code>
		 * Example: var position = JSL.dom("element-id").getPosition();
		 */
		"getPosition": function() {
			var ele = this.nodes.array[0]; //You can have the position for only 1 element.
			var leftx = topy = 0;
			if (ele.offsetParent) {
				leftx = ele.offsetLeft;
				topy = ele.offsetTop;
				while (ele = ele.offsetParent) {
					leftx += ele.offsetLeft;
					topy += ele.offsetTop;
				}
			}

			return {"left":leftx,"x":leftx,"top":topy,"y":topy};
		},
		
		/**
		 * Get the specified style of the active element.
		 * Inspired by http://www.quirksmode.org/dom/getstyles.html
		 * Argument: property - The name of the property that must be fetched.
		 * Example: JSL.dom("element-id").getStyle("width");
		 */
		"getStyle": function(property) {
			var ele = this.nodes.array[0];
			if (ele.currentStyle) {
				var alt_property_name = property.replace(/\-(\w)/g,function(m,c){return c.toUpperCase();});//background-color becomes backgroundColor
				var value = ele.currentStyle[property]||ele.currentStyle[alt_property_name];
			
			} else if (window.getComputedStyle) {
				property = property.replace(/([A-Z])/g,"-$1").toLowerCase();//backgroundColor becomes background-color

				var value = document.defaultView.getComputedStyle(ele,null).getPropertyValue(property);
			}
			
			//Some properties are special cases
			if(property == "opacity" && ele.filter) value = (parseFloat( ele.filter.match(/opacity\=([^)]*)/)[1] ) / 100);
			else if(property == "width" && isNaN(value)) value = ele.clientWidth || ele.offsetWidth;
			else if(property == "height" && isNaN(value)) value = ele.clientHeight || ele.offsetHeight;
			
			//Remove the 'px' from the end of values
			if(typeof value == "string" && value.match(/^\d+px$/)) {
				value = Number(value.replace(/px/, ""));
			}
			
			return value;
		},
		
		/**
		 * Set the style of the element.
		 * Example:
		 *	JSL.dom("element").setStyle("position", "absolute");
		 *		OR
		 *	JSL.dom("element").setStyle({
		 *				"position":"absolute",
		 *				"top":"50px",
		 *				"left":"100px"
		 *			});
		 */
		"setStyle": function(property, value) {
			var all_styles = {};
			if(typeof property === "string") all_styles[property] = value;
			else all_styles = property;
			
			this.nodes.each(function(ele) {
				JSL.array(all_styles).each(function(value, property, all, ele) {
					property = property.replace(/\-(\w)/g,function(m,c){return c.toUpperCase();});//background-color becomes backgroundColor
					
					//Append a 'px' at the end of all numbers.
					if(value && value.constructor == Number) {
						var non_px = JSL.array(['zIndex','fontWeight','opacity','zoom','lineHeight']); //...except for these ones
						if( non_px.indexOf(property) == -1  && value.toString().indexOf("px") == -1 ) value += 'px';
					}
					
					if(property == "opacity") {
						ele.style.opacity = value;
						ele.style.filter = 'alpha(opacity='+value+')';	//IE
					} else {
						ele.style[property] = value;
					}
				},ele);
			});
			return this;
		},
		
		/**
		 * Shows all currently selected elements.
		 * Arguments:
		 *		display[OPTIONAL] - could be 'visible', 'inline' or 'block'. If you chose 'visible', the function changes the 'visibility' property instead of the 'display' property. Defaults to 'block'. 
		 * Example:
		 *	JSL.dom("example").show()
		 *	JSL.dom("example").show("visible")
		 */
		"show" : function(display) {
			this.nodes.each(function(ele) {
				if(display === "visible") ele.style.visibility = "visible";
				else if(display === "inline") ele.style.display = "inline";
				else ele.style.display = "block";
			});
			return this;
		},
		
		/**
		 * Hides all the currently selected elements
 		 * Arguments:
		 *		display[OPTIONAL] - could be 'hidden', 'none'. If you chose 'hidden', the function changes the 'visibility' property instead of the 'display' property. Defaults to 'none'. 
		 * Example:
		 *	JSL.dom("example").hide()
		 */
		"hide" : function(display) {
			this.nodes.each(function(ele) {
				if(display === "hidden") ele.style.visibility = "hidden";
				else ele.style.display = "none";
			});
			return this;
		},
		
		/**
		 * Toggles the selected elements between hidden and displayed state. It the element is shown, 
		 *		one toggle call will make it hidden - and if its hidden, a toggle call will show it.
		 * Example:
		 *	JSL.dom("example").toggle()
		 */
		"toggle": function() {
			this.nodes.each(function(ele) {
				if(ele.style.display != "block" ) ele.style.display = "block";
				else ele.style.display = "none";
			});
			// :TODO: Write tests
			return this;
		},
		///Alias of toggle - I often confuse the two. [IGNORE]
		"toogle":function(){this.toggle.apply(this, arguments);return this;},
		
		///////////////////////////////// Events /////////////////////////
		
		/**
		 * Attach an event to a function.
		 * Arguments: event - The event to watch for.
		 * 			  function - The function that shoulb be called on that event.
		 * Example:
		 *	JSL.dom(window).on("unload", goodbye_func);
		 */
		"on" : function(event, func) {
			this.nodes.each(function(ele) {
				JSL.event().add(ele, event, func);
			});
			return this;
		},
		
		/**
		 * Attach the click event to the specified function for all the selected elements
		 * Argument: func - The function that should be called on the 'onclick' event.
		 * Example:
		 *	JSL.dom("a.delete-links").click(confirm_delete);
		 */
		"click":function(func){return this.on("click", func);},
		
		/**
		 * Attach the load event to the specified function. Usually its only used with the window element
		 * Argument: func - The function that should be called on document 'onload' event.
		 * Example:
		 *	JSL.dom(window).load(init);
		 */
		"load":function(func){return this.on("load", func);},
		
		
		//////////////// The Privates //////////////////
		
		/// CSS Selectors - Taken from http://www.openjs.com/scripts/dom/css_selector/css_selector.js
		"_select" : function(all_selectors) {
			//Find what the selector is...
			var type = this._getType(all_selectors);
			if(type === "id") { //Superfast processing for IDs
				var ele = document.getElementById(all_selectors.replace("#",""));

				//To make sure we get the non existant elements
				if(ele) return [ele];
				else return [];
			}

			var selected = new Array();
			if(!document.getElementsByTagName) return selected; //It must be a very old browser
			
			all_selectors = all_selectors.replace(/\s*([^\w\.\#])\s*/g,"$1");//Remove the 'beautification' spaces
			var selectors = all_selectors.split(",");
			
			var getElementsByTagName = function(context, tag) { ///[IGNORE]
				if (tag == '*') return (context.all) ? context.all : context.getElementsByTagName("*"); // For IE.
				return context.getElementsByTagName(tag);
			}
			
			// Grab all of the tagName elements within current context
			var getElements = function(context,tag) { ///[IGNORE]
				if (!tag) tag = '*';

				// Get elements matching tag, filter them for class selector
				var found = [];
				for (var i=0,len=context.length; con=context[i],i<len; i++) {
					var eles = getElementsByTagName(con, tag);
					
					for(var j=0,leng=eles.length;j<leng; j++) {
						//Add it to the array.
						found.push(eles[j]);
					}
				}
				return found;
			}
		
			COMMA:
			for(var i=0,len1=selectors.length; selector=selectors[i],i<len1; i++) {
				var context = [document];
				var inheriters = selector.split(" ");
		
				SPACE:
				for(var j=0,len2=inheriters.length; element=inheriters[j],j<len2;j++) {
					//This part is to make sure that it is not part of a CSS3 Selector
					var left_bracket = element.indexOf("[");
					var right_bracket = element.indexOf("]");
					var pos = element.indexOf("#");//ID
					if(pos+1 && !(pos>left_bracket && pos<right_bracket)) {
						var parts = element.split("#");
						var tag = parts[0];
						var id = parts[1];
						var ele = document.getElementById(id);
						if(!ele || (tag && ele.nodeName.toLowerCase() != tag)) { //Specified element not found
							continue COMMA;
						}
						context = [ele];
						continue SPACE;
					}
					
					pos = element.indexOf(">");//Child selectors
					if(pos+1 && !(pos>left_bracket && pos<right_bracket)) {
						var parts = element.split(">");
						var tag = parts[0];
						var child = parts[1];
		
						var found = getElements(context, tag); //Get the tags in the current context.
						context = [];
						for (var l=0,len=found.length; fnd=found[l],l<len; l++) { // Go thru each tag
							var children = getElementsByTagName(fnd, child); //And find all element that match child tags
							for (var m=0,leng=children.length; fond=children[m], m<leng; m++) { // Go thru each
								if(fond.parentNode == fnd) context.push(fond); // Ifs its a direct child(1st generation) add it to our selected list.
							}
						}
						
						continue SPACE;
					}
					
					pos = element.indexOf("+");//sibling selector
					if(pos+1 && !(pos>left_bracket && pos<right_bracket)) {
						var parts = element.split("+");
						var tag = parts[0];
						var sibling_tag = parts[1];
		
						var found	= getElements(context, tag); //Get the tags in the current context.
						
						context = [];
						for (var l=0,len=found.length; ele_main=found[l],l<len; l++) { // Go thru each tag
							var sibling = ele_main.nextSibling;
							while(sibling) {
								if(sibling.nodeType == 1) { //Its a tag - not a text fragment.
									if(sibling.tagName == sibling_tag.toUpperCase()) {
										p(ele_main, sibling);
										context.push(sibling);
									}
									else break;
								}
								sibling = sibling.nextSibling;
							}
						}
						
						continue SPACE;
					}
		
					pos = element.indexOf(".");//Class
					if(pos+1 && !(pos>left_bracket && pos<right_bracket)) {
						var parts = element.split('.');
						var tag = parts[0];
						var class_name = parts[1];
		
						var found = getElements(context,tag);
						context = new Array;
						for (var l=0,len=found.length; fnd=found[l],l<len; l++) {
							if(fnd.className && fnd.className.match(new RegExp("(^|\\s)"+class_name+"(\\s|$)"))) context.push(fnd);
						}
						continue SPACE;
					}
		
					if(element.indexOf('[')+1) {//If the char '[' appears, that means it needs CSS 3 parsing
						// Code to deal with attribute selectors
						if (element.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?['"]?([^\]'"]*)['"]?\]$/)) {
							var tag = RegExp.$1;
							var attr = RegExp.$2;
							var operator = RegExp.$3;
							var value = RegExp.$4;
						}
						var found = getElements(context,tag);

						context = [];
						for (var l=0,len=found.length; fnd=found[l],l<len; l++) {
							if(attr === "class") var attr_value = fnd.className; //IE will not allow getAttribute("class")
							else var attr_value = fnd.getAttribute(attr);

							if(attr_value) {
								// The if conditions are for elements that DO NOT match the selector. If it matches it goes to the very bottom where its pushed into the context.
								if(operator=='=' && attr_value != value) continue;
								else if(operator=='~' && !attr_value.match(new RegExp('(^|\\s)'+value+'(\\s|$)'))) continue;
								else if(operator=='|' && !attr_value.match(new RegExp('^'+value+'-?'))) continue;
								else if(operator=='^' && attr_value.indexOf(value)!=0) continue;
								else if(operator=='$' && attr_value.lastIndexOf(value)!=(attr_value.length-value.length)) continue;
								else if(operator=='*' && !(attr_value.indexOf(value)+1)) continue;
								else if(!attr_value) continue;
								context.push(fnd);
							}
						}
		
						continue SPACE;
					}
		
					//Tag selectors - no class or id specified.
					var found = getElements(context,element);
					context = found;
				}
				for (var o=0,len=context.length;o<len; o++) selected.push(context[o]);
			}
			
			// Remove duplicate elements in the result.
			var final_result = []; //Make a New array - the non duplicates will be put into this.
			SELECTED_ELEMENT:
			for(var i=0, len=selected.length; i<len; i++) {
				for(var j=0, leng=final_result.length; j<leng; j++) {
					if(selected[i] == final_result[j]) continue SELECTED_ELEMENT; //Yup - its a duplicate
				}
				final_result.push(selected[i]); //Got a non duplicate element.
			}
			
			return final_result;
		},

		/**
		 * Returns the base element
		 * Example: JSL.dom("element-id").get() // returns document.getElementById("element-id");
		 */
		"get": function() {
			if(this.single) return this.single;
			else return this.nodes.get();
		},

		/// Class manipulations - taken from http://www.openjs.com/scripts/dom/class_manipulation.php
		"_class": {
			"_add":function(ele,cls) {
				if (!this._has(ele,cls)) ele.className += " "+cls;
			},
			"_has":function(ele, cls) {
				return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
			},
			"_remove":function(ele,cls) {
				if (this._has(ele,cls)) {
					var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
					ele.className=ele.className.replace(reg,' ');
				}
			}
		},
		
		/// Takes a string and tries to guess wether it is a 'css selector' or a 'tag' or an 'id'. Returns the result.
		"_getType":function(str) {
			if(typeof str == "string") {
				if(str.indexOf("#") > 0 || str.indexOf(".")+1 || str.indexOf(" ")+1 || str.indexOf(",")+1 || str.indexOf("[")+1 || str.indexOf("*")+1
					 || str.indexOf("+")+1 || str.indexOf(">")+1) return "css"; //A CSS Selector
				else if(JSL.array(this.valid_tags).indexOf(str)+1) return "tag"; //Its a tag.
				else return "id"; //An id, perhabs?
			} else {
				return "node";
			}
		}
	}

	window.JSL["dom"] = function() {
		var return_vaule = new _dom_init(arguments);
		if(return_vaule.return_null) return null;
		return return_vaule;
	}
})();

/* :TODO:
 *
 */