/**
 * View class, singelton 
 */

View = new function(){
	var _that = this;
   
    this.initStyledSelect = function(elementId){
        var select = $('select#' + elementId);
        if($('div.selectbox.' + elementId).size()){
            $('div.sb.' + elementId).remove();
        }

        select.sb({useTie: true, animDuration: 100});
       
    }
	
    //public functions
	/* 
	 * Attribute Name 			Type 	            Required 	                        Default 	 Description
	 * @param values 			array 	            Yes,unless using options attribute 	n/a 	     An array of values for dropdown
	 * @param output 			array 	            Yes,unless using options attribute 	n/a 	     An array of output for dropdown
	 * @param selected 			string/array        No                                  empty 	     The selected option element(s)
	 * @param options 			associative array 	Yes, unless using values and output n/a 	     An associative array of values and output
	 * @param selectAttributes	array				Yes, only id						n/a			 An associative array of select attributes
	 * @param callback          function            No                                  n/a          Callback function of onchange event
	 * @param refferenceElemId  string   			Yes									n/a			 Select will be inserted with refference this element
	 * @param insertionCommand  string              Yes                                 n/a          jQuery function name - append/after/before....
	 */
	this.select = function(values, outputs, selected, options, selectAttributes, callback, refferenceElemId, insertionCommand, addToExisting, optGroup){
		var optGroups  = new Object(); 
		
		//remove all elements with indentical 'id'
		if($('select#' + selectAttributes.id).size() && !addToExisting)
			$('select#' + selectAttributes.id).remove();
		
		var html = '';
		
		if(!addToExisting){
			var atributes = '';
			if(selectAttributes && selectAttributes['id']){
				$.each(selectAttributes, function(attribute, value){
					atributes += attribute + '="' + value + '" ';
				});
			}
			else{
				alert('you must specify element `id`');
				return;
			}
			
			html += '<select ' + atributes + '>';
		}

		
		if(options){
			if(optGroup){
			
				$.each(options, function(value, output){
					if(typeof optGroups[output['group']] == 'undefined'){
						optGroups[output['group']] = [];
					}
					
					optGroups[output['group']][output['value']] = value;
				});
				$.each(optGroups, function(group, output){
					html += createOptionGroup(group, false);
					for(var text in output){
						
						if(typeof output[text] != 'function')//fixes strange Chrome bug (indexOf added to array)
							html += createOption(output[text], text);
					}
					
					html += createOptionGroup(group, true);
				});
			}
			else{
				$.each(options, function(value, output){
					html += createOption(value, output);
				});
			}
		}
		else{
			if(values.length == outputs.length){
				$.each(values, function(key, value){
					html += createOption(value, outputs[key]);
				});
			}
			else{
				alert('Lenghts of values and outputs must be the same');
				return;
			}
		}
		function createOption(value, output){
			
			function isSelected(value){
				var isSelected = false;
				var ansInArray = jQuery.inArray(value, selected);
			
				if((typeof selected == 'object' 
					&& (typeof ansInArray != 'undefined' && ansInArray != -1)) 
					|| (typeof selected =='string' && selected == value)){
					isSelected = true;
				}
				return isSelected;
			}
			var selectedHtml = (isSelected(value)) ? 'selected="selected"' : '';
			return '<option value="' + $.trim(value) +'"' + selectedHtml + '>' + output + '</option>';
		}
		
		function createOptionGroup(label, closeTag){
			
			return (closeTag) ? '</optgroup>' : '<optgroup label="' + label + '">';
		}
		
		if(!addToExisting){
			html += '</select>';
		
			//insert html
			eval('$("#' + refferenceElemId + '").' + insertionCommand + '(html);');
			//attache callback function 
			if(typeof callback == 'function'){
				$('select#' + selectAttributes['id']).change(callback);
			}
            
           
		}
		else{
			addToExisting.append(html);
             
		}
		_that.initStyledSelect(selectAttributes['id']);
		return html;
	}
	
	this.getOptionFromSelectByAttribute = function(select, attribute, value){
		return select.find('option[' + attribute + '="' + value + '"]');
	}
	/* Before
	 * <ul>
	 *		<li class="selected">1</li> 
	 *		<li id="newlySelected">2</li> -> new selected element
	 *		<li >3</li> 
	 *		<li >4</li>
	 *	</ul>
	 *	after running this method setElementSelectedClass($('li#newlySelected'), className)
	 *	the resault will be
	 * <ul>
	 *		<li>1</li> 
	 *		<li id="newlySelected" class="selected">2</li> 
	 *		<li >3</li> 
	 *		<li >4</li>
	 *	</ul>
		
	 */
	this.setElementSelectedClass = function(element, className){
		/** get parent container */
		var containerElement = element.parent();
		/* find all elements with same tag as given element and with 
		 * class that equals to className and remove the className 
		 * */
		containerElement.find(element.get(0).tagName + '.' + className).removeClass(className);
		/* add the class to given element */
		element.addClass(className)
	}
    
    
}