/**
 * CFCustomSelect.js
 * @author: Hiroshi Tazawa
 * @company: canvasgroup.com.au
 * @copyright: finite
 * @version: 1.0
 */


(function($){
	
	
	$.fn.customSelect = function(params) {
		
		// Variables
		var currentSelect = $(this);
		var currentId     = 0;
		
		// Parameters
		var defaultParams = {
			'ulClassName'          : 'cfCustomUl',
			'ulOpenClassName'      : 'cfCustionOpenUl',
			'liSelectedClassName'  : 'cfSelected',
			'liFirstListClassName' : 'cfFirstList',
			'zIndex'              : 1
		};
		$.extend(defaultParams, params);
		var selectedOptionIndex = 0;
		
		//------------------------------------
		// The setting of select and options
		//------------------------------------
		currentSelect.css('display', 'none');
		var options       = currentSelect.find('option');
		var optionsTotal  = options.length;
		
		// Generate the DOM of <ul>.
		var ul = $(document.createElement('ul'));
		ul.addClass(defaultParams.ulClassName);
		ul.css('z-index', defaultParams.zIndex);
		
		//Add the event to <ul>
		var capturedLi;
		var isClicked = false;
		ul.hover(
			function(){
				/*
				$(this).parent().css('z-index', 50);
				ul.addClass(defaultParams.ulOpenClassName);
				var lists      = ul.find('li');
				var listsTotal = lists.length;
				for(var i = 0; i < listsTotal; i ++) {
					if(i != 0 && !window.attachEvent) {
						lists.eq(i).css('opacity', 0);
					}
					if(lists.eq(i).hasClass(defaultParams.liFirstListClassName)) {
						capturedLi = lists.eq(i).removeClass(defaultParams.liFirstListClassName);
					}
				}
				lists.eq(0).addClass(defaultParams.liFirstListClassName);
				if(!window.attachEvent) {
					lists.delay(100).animate({opacity: 1}, 750, 'easeInOutQuint', function(){
						$(this).css('filter', 'none');
					});
				}
				isClicked = true;
				*/
			}, 
			function(){
				$(this).parent().css('z-index', 5);
				ul.removeClass(defaultParams.ulOpenClassName);
				
				if(capturedLi) {
					capturedLi.addClass(defaultParams.liFirstListClassName);
				}
				
				isClicked = false;
			}
		);
		
		ul.bind('click', function(){
			if(isClicked) {
				$(this).parent().css('z-index', 5);
				ul.removeClass(defaultParams.ulOpenClassName);
				capturedLi.addClass(defaultParams.liFirstListClassName);
				isClicked = false;
			} else {
				$(this).parent().css('z-index', 50);
				ul.addClass(defaultParams.ulOpenClassName);
				var lists      = ul.find('li');
				var listsTotal = lists.length;
				for(var i = 0; i < listsTotal; i ++) {
					if(i != 0 && !window.attachEvent) {
						lists.eq(i).css('opacity', 0);
					}
					if(lists.eq(i).hasClass(defaultParams.liFirstListClassName)) {
						capturedLi = lists.eq(i).removeClass(defaultParams.liFirstListClassName);
					}
				}
				lists.eq(0).addClass(defaultParams.liFirstListClassName);
				if(!window.attachEvent) {
					lists.delay(10).animate({opacity: 1}, 10, 'easeInOutQuint', function(){
						$(this).css('filter', 'none');
					});
				}
				isClicked = true;
			}
		});


		// Check the currently selected option and store the current selected option index.
		for(var i = 0; i < optionsTotal; i ++) {
			if(options.eq(i).is(':selected')) {
				selectedOptionIndex = i;
				break;
			} else {
				continue;
			}
		}
		
		// Generate the DOMs of <li> and add them to the DOM of <ul>.
		for(var i = 0; i < optionsTotal; i ++) {
			var currentOption = options.eq(i);
			var currentText   = currentOption.text();

			var domLi = document.createElement('li');
			var li = $(document.createElement('li'));// Generate <li>
			li.attr('myId', currentOption.get(0).index);
			
				
			if(i == selectedOptionIndex) {
				li.addClass(defaultParams.liFirstListClassName);
				li.addClass(defaultParams.liSelectedClassName);// Added the specfic class name to the selected list.
			}
			li.append(currentText);
			ul.append(li);
			
			// Add the event to <li>
			/*
			if (window.attachEvent) {
				// To do - windows events 
			} else {
				li.click(function(){
					setOptionsValue($(this).attr('myId'));
					listClickedHandler($(this).get(0));
				});
			}
			*/
			li.click(function(){
				var id = parseInt($(this).attr('myId'));
				setOptionsValue($(this).attr('myId'));
				listClickedHandler($(this).get(0));
				if(id != currentId) {
					currentSelect.trigger('SELECTED', id);
					currentId = id;
				}
			});
		}
		currentSelect.parent().append(ul);
		
		
		function listClickedHandler(obj)
		{
			if(ul.hasClass(defaultParams.ulOpenClassName))
				ul.removeClass(defaultParams.ulOpenClassName);
			
			var lists      = ul.find('li');
			var listsTotal = lists.length;
			for(var i = 0; i < listsTotal; i ++) {
				var currentList    = lists.eq(i);
				var currentListDom = lists.get(i);
				if(currentListDom == obj) {
					currentList.addClass(defaultParams.liSelectedClassName);
					currentList.addClass(defaultParams.liFirstListClassName);
				} else {
					currentList.removeClass(defaultParams.liSelectedClassName);
					currentList.removeClass(defaultParams.liFirstListClassName);
				}
			}
		}
		
		function setOptionsValue(index) {
			options.eq(index).attr('selected', 'selected');
		}
		
		
	}
	
	
})(jQuery);