/*
 * jQuery fdd2div (Form Drop Down into Div plugin
 *
 * version 1.0 (6 May 2008)
 *
 * Licensed under GPL licenses:
 *  http://www.gnu.org/licenses/gpl-3.0.html
 */

/**
 * The fdd2div() method provides a simple way of converting form drop down <select> into <div>.  
 *
 * fdd2div() takes 2 string and 2 integer argument:  $().fdd2div({css class name, open status of the menu, create html hyper links, animation speed})
 *
 *   CssClassName: It will take the css class name or it will take the class name from the <div>. 
 *            		 If you don't specify an css class, default css will be used.
 *
 *	 OpenStatus: It will be let the menu open or close. By default it will be closed. 1 for open and 0 for closed
 *
 *   GenerateHyperlinks: If you want hyperlink to act exactly as form than leave this one, otherwise it will take 1 and will use the form's>select's>option's value as a page name
 * 											 If there is no <option>'s value than it will take anything in between <option></option> as value 												
 *            	 				 So the if the url is www.mukuru.com/test.php, the new hyperlink will be www.mukuru.com/options_value.php 
 *
 *   AnimationSpeed: Use to specify the animation speed which could be either slow,normal or fast 
 *                   By default it will be normal.
 *
 *
 * @example $('#form_wrapper').fdd2div({CssClassName: "OverWrite_Default_Css_Class",OpenStatus: 1,GenerateHyperlinks: 1,AnimationSpeed: "slow"});
 * @desc Convert form drop down into div menu with css my own class (OverWrite_Default_Css_Class), menu will be open, take page name from <option> and create normal hyperlinks, animation speed show be slow 
 *
 * @example $('#form_wrapper').fdd2div();
 * @desc Convert form drop down into div menu with default css class which is (fdd2div_default), OpenStatus: 0 (closed), GenerateHyperlinks: 0 (act like form), animation speed will be normal
 *
 * @name fdd2div
 * @type jQuery
 * @param 2 String and 2 Integers Options which control the drop down menu style and status
 * @cat Plugins/fdd2div
 * @return jQuery
 * @author Aamir Afridi (aamirafridi97@hotmail.com)
 * @author Sam Clark (sam@clark.name)
 */

(function($){
	$.fn.fdd2div = function(options)
	{
		var BaseCssClassName="fdd2div";
		var t;

		/*FOLLOWING ARE THE DEFAULT OPTIONS FOR THE MENU.
			IT CONTAINS DEFAULT CSS NAME, THE MENU OPEN STATUS 1=OPEN AND 0=CLOSE, GENERATE HYPERLINKS INSTEAD OF FORM POST OR GET METHOD*/
		var defaults =
		{ 
			CssClassName: "default",
			OpenStatus: "0",
			AnimationSpeed: "normal",
			DefaultValue: "",
			DefaultText: "",
			BindedInput: ""
		}
		
		//OVERWRITE DEFAULTS WITH USER OPTIONS IF ANY
		var options = $.extend(defaults, options);
		
		//IF THERE IS ANY CLASS TAG IN THE DIV THAN TAKE OTHER WISE TAKE ONE FROM DEFAULT OR USER PROVIDED CLASS NAME
		if($(this).attr('class')!=null) 
			MainCssClassName = BaseCssClassName + '-' + $(this).attr('class');
		else
		{
			MainCssClassName = BaseCssClassName + '-' + defaults.CssClassName;
			//IF THERE IS NO CLASS PROVIDED, THAN ASSIGN DEFAULT CLASS TO THE DIV
			$(this).attr("class", MainCssClassName);
		}
		
		//UNIQUE ID WE USE TO CONTROLL EACH DROP DOWN SEPARATELY
		var unique_id = $(this).attr("id");
		
			var DivSelect = $(document).find('div[id="' + $(this).attr('id') + '"]');
			
			DivSelect.each(function(n,i) {
				var FormSelect = $(DivSelect).find('select');
						
				//FIND THE SELECT NAME AND OPTION TAG
				var SelectName = $(FormSelect).attr('name');
				var SelectOptions = $(FormSelect).find('option');
				
				if(defaults.BindedInput == '') {
					var BindedInput = SelectName + '-select';
				} else {
					var BindedInput = defaults.BindedInput;
				}
	
				var main_option;
				var child_options="";
				//NOW START CONVERTING EACH SELECT'S OPTION INTO LINKS
				SelectOptions.each(function(n,i) {
					//NOW SEARCH FOR OPTION VALUE ATTRIBUTE, IF WE FIND ANY, TAKE IT OTHERWISE TAKE ANYTHING IN B/W THE OPTION TAGE
					var OptionValue="";
					var OptionText="";
					
					if($(i).attr('value')!="") {
						OptionValue=$(i).attr('value');
						OptionText=$(i).text();
					} else {
						OptionValue=i.firstChild.nodeValue;
						OptionText=i.firstChild.nodeValu;
					}
	
					if(n==0) {
						//TAKE THE FIRST OPTION FROM DROP DOWN AND CREATE A MAIN LINK
						main_option="<a class=\""+MainCssClassName+"-main-link collapsed\" href='#'>"+OptionText+"</a>\n";
					} else {
						child_options+="<li><a href='#' class='option' title='" + OptionValue + "'>"+OptionText+"</a></li>\n";
					}
				});
		
				var menu;
				//THIS IS THE MAIN POINT WHERE WE ASSIGN ALL THE DATA INTO MARKUPS AND INNERHTML BACK TO THE DIV
				menu = main_option + "<ul class=\""+MainCssClassName+"-ul-list\">"+child_options+"</ul>";
				$(DivSelect).html(menu);
		
				var child_options = $(this).children('ul');//CREATING UNIQUE VARIABLE
				var main_option = $(this).children('a.' + MainCssClassName+'-main-link');////CREATING UNIQUE VARIABLE
				
				if(defaults.OpenStatus==0) {
					$(child_options).hide();
				} else {
					//THE MENU WILL BE OPEN IF IT IS NOT ZERO (0)
					$(main_option).attr("class", MainCssClassName+"-main-link expanded");
				}
				
				if(defaults.DefaultValue!='') {
					$(BindedInput).val(defaults.DefaultValue);
				}
				
				if(defaults.DefaultText!='') {
					$(main_option).html(defaults.DefaultText);
				}
	
				//if($(this).children('ul.' + MainCssClassName + "-ul-list").width() <= $(this).children('a.' + MainCssClassName + "-main-link").width()) {
				//	$(this).children('a.' + MainCssClassName + "-main-link").width($(this).children('ul.' + MainCssClassName + "-ul-list").width());	 
				//} else {
				//	$(this).children('ul.' + MainCssClassName + "-ul-list").width($(this).children('a.' + MainCssClassName + "-main-link").width());	 
				//}
				
				$(this).children('ul.' + MainCssClassName + '-ul-list').children('li').children('a.option').click(function(i){
					i.preventDefault();
					$(this).parent().parent().parent().children('a.' + MainCssClassName + '-main-link').html($(this).html());
					$('#' + BindedInput).val($(this).attr('title'));
					$(main_option).attr("class", MainCssClassName+"-main-link collapsed");
					$(child_options).slideUp('slow');
				});
				
				$(this).children('ul.' + MainCssClassName + '-ul-list').mouseout(function() {
					t = setInterval(function() {
						$(main_option).attr("class", MainCssClassName+"-main-link collapsed");
						$(child_options).slideUp("slow");
					}, 1000);   
				});
				
				$(this).children('ul.' + MainCssClassName + '-ul-list').mouseover(function() {
					clearInterval(t);
				});
	
				//BY CLICKING MAIN LINK TOGGLE THE ARROW UP AND DOWN AND ANIMATE THE PANEL WITH LINKS	 
				$(main_option).click(function(e){
					e.preventDefault();
					if($(this).attr("class") == MainCssClassName+"-main-link collapsed") {
						$(this).attr("class", MainCssClassName+"-main-link expanded");
					} else {
						$(this).attr("class", MainCssClassName+"-main-link collapsed");
					}
	
					//USING JQUERY ANIMATION
					$(child_options).slideToggle(defaults.AnimationSpeed);
					return true;
				});
			});
	}
})
(jQuery);