/**
 * @author lucien.immink
 * @version 0.1 (work in progress)
 * DO NOT EDIT THIS FILE
 */

jQuery.fn.fancyForm = function(settings) {
    /// <summary>Converts Form Elements within the matched items to "pimp" the elements</summary>
	// settings
	settings = jQuery.extend({
		theme: 'fancy',
		debug: true,
		pulldownItems: 10,
		lazyPulldown: false
	}, settings);
	var thisForm = jQuery(this);
	
	jQuery(this).addClass(settings.theme);
	if (checkStyle(settings.theme)) {
		// checkboxes
		jQuery(this).find("input[type=checkbox]").each(function(){
			jQuery(this).addClass("remove");
			jQuery(this).before("<div class='checkbox'/>");
			// find current active checkboxes
			if (jQuery(this).attr("checked") == true) {
				jQuery(this).prev().attr("class", "checkboxactive active");
				jQuery(this).next().attr("class", "active");
			}
		});
		// add clicks to the new divs
		jQuery(this).find(".checkbox").click(function(){
			jQuery(this).toggleClass("active");
			if (jQuery(this).hasClass("active")) {
				jQuery(this).attr("class", "checkboxactive active");
			}
			else {
				jQuery(this).attr("class", "checkbox");
			}
			// update the real button
			var newState = !jQuery(this).next().attr("checked");
			jQuery(this).next().attr("checked", newState);
			jQuery(this).next().next().toggleClass("active");
		});
		// add updates from the label
		jQuery(this).find("input[type=checkbox]").next().click(function(){
			jQuery(this).toggleClass("active");
			jQuery(this).prev().prev().toggleClass("active");
			if (jQuery(this).prev().prev().hasClass("active")) {
				jQuery(this).prev().prev().attr("class", "checkboxactive active");
			}
			else {
				jQuery(this).prev().prev().attr("class", "checkbox");
			}
		});
		
		// radiobuttons
		jQuery(this).find("input[type=radio]").each(function(){
			jQuery(this).addClass("remove");
			jQuery(this).before("<div class='radio'/>");
			if (jQuery(this).attr("checked") == true) {
				jQuery(this).prev().addClass("radioactive active");
				jQuery(this).next().addClass("active");
			}
		});
		// add clicks to the new divs
		jQuery(this).find(".radio").click(function(){
			var state = jQuery(this).next().attr("checked");
			if (!state) {
				// remove all active states from the group
				removeActive(jQuery(this).next().attr("name"));
				// make this one active
				jQuery(this).addClass("radioactive active");
				jQuery(this).next().attr("checked", !state);
				jQuery(this).next().next().addClass("active");
			}
		});
		// add updates from the labal
		jQuery(this).find("input[type=radio]").next().click(function(){
			removeActive(jQuery(this).prev().attr("name"));
			jQuery(this).addClass("active");
			jQuery(this).prev().prev().addClass("radioactive active");
		});
		
		// pulldown
		jQuery(this).find("select").each(function(i){
			if (!jQuery(this).attr("multiple")) {
				var widthClass = jQuery(this).attr("class");
				jQuery(this).addClass("remove");
				jQuery(this).before("<div class='select " + widthClass + "'><div class='left'/><div class='right'><a class='selectButton'></div><div class='center'></div>");
				// check if one of the items is selected, if not it's the first to show
				jQuery(this).prev().find(".center").text(jQuery(this).find("option[selected]").text());
				// create a div with all the options of this select
				var lazy = settings.lazyPulldown ? '' : widthClass;
				var optionsDiv = "<div class='optionsDiv " + lazy + "' id='options" + i + "'>";
				var items = 0;
				jQuery(this).find("option").each(function(i){
					optionsDiv += "<a rel='" + jQuery(this).attr("value") + "'>" + jQuery(this).text() + "</a>";
					items++;
				});
				optionsDiv += "</div>";
				thisForm.append(optionsDiv);
				// set the class back if the optionswidth is too small
				if (settings.lazyPulldown && thisForm.find("#options"+i).width() < Number(widthClass.substr(widthClass.indexOf("_")+1)) + 20) thisForm.find("#options"+i).addClass(widthClass);
				if (settings.lazyPulldown && !jQuery.browser.msie) {
				    jQuery(this).prev().find(".center").css("overflow", "hidden");
				    jQuery(this).prev().find(".center").css("width", Number(widthClass.substr(widthClass.indexOf("_")+1)));
				}
				if (items > settings.pulldownItems) {
					jQuery(".optionsDiv").css("overflow", "auto");
					var pulldownHeight = 0;
					jQuery(".optionsDiv a").each(function(i){
						if (i == 0) 
							pulldownHeight = Number(jQuery(this).css("lineHeight").substr(0, jQuery(this).css("lineHeight").indexOf("px")));
					});
					pulldownHeight = Number(pulldownHeight + 4) * settings.pulldownItems;
					jQuery(".optionsDiv").css("height", pulldownHeight);
				}
				// clicking pulldown will open the options
				if (!jQuery.browser.msie) {
					jQuery(this).prev().find("a.selectButton").click(function(){
						jQuery("#options" + i).css("top", jQuery(this).offset().top + 22);
						jQuery("#options" + i).css("left", jQuery(this).offset().left);
						jQuery("#options" + i).toggle();
						jQuery("#options" + i).bind("mouseleave", function(){
							jQuery(this).hide();
						});
					});
				}
				else {
					jQuery(this).prev().parent().find("a.selectButton").css("opacity", 0);
					jQuery(this).prev().parent().find("a.selectButton").click(function(){
						jQuery("#options" + i).css("top", jQuery(this).offset().top + 22);
						jQuery("#options" + i).css("left", jQuery(this).offset().left);
						jQuery("#options" + i).toggle();
						jQuery("#options" + i).bind("mouseleave", function(){
							jQuery(this).hide();
						});
					});
					jQuery(this).prev().parent().click(function() {
					    jQuery("#options" + i).css("top", jQuery(this).find("a.selectButton").offset().top + 22);
						jQuery("#options" + i).css("left", jQuery(this).find("a.selectButton").offset().left);
						jQuery("#options" + i).toggle();
						jQuery("#options" + i).bind("mouseleave", function(){
							jQuery(this).hide();
						});
					});
				}
				// selecting an option will update the selection
				jQuery(".optionsDiv a").click(function(){
					var value = jQuery(this).attr("rel");
					var text = jQuery(this).text();
					// console.log("selected " + jQuery(this).attr("class"));
					var updatedSelect = jQuery(this).parents("div.optionsDiv").attr("id");
					updatedSelect = updatedSelect.substr(7);
					thisForm.find("select").each(function(i){
						if (i == updatedSelect) {
							jQuery(this).prev().find(".center").text(text);
							var t=jQuery(this).find("option[value=" + value + "]").attr("selected", true);
						}
					});
					jQuery(this).parents("div.optionsDiv").hide();
				});
				// ie hack
				jQuery(".optionsDiv a").bind("mouseenter mouseleave", function(e){
					if (e.type == "mouseenter") {
						jQuery(this).addClass("hover");
					}
					else {
						jQuery(this).removeClass("hover");
					}
				});
			}
		});
		
		// multi selector
		jQuery(this).find("select").each(function(i){
			if (jQuery(this).attr("multiple")) {
				// roughly the same as a textarea
				var lastActive = null;
				jQuery(this).wrap("<div class='multiple "+jQuery(this).attr("class")+"'></div>");
				jQuery(this).before("<div class='top'><div class='tl'/></div>");
				jQuery(this).wrap("<div class='center'></div>");
				jQuery(this).before("<div class='center_l' />");
				jQuery(this).before("<div class='center_c' />");
				// create a new div for the options
				jQuery(this).find("option").each(function() {
					jQuery(this).parents(".center").find(".center_c").html(jQuery(this).parents(".center").find(".center_c").html() + "<div class='"+jQuery(this).attr("value")+" option'>" + jQuery(this).html() + "</div>");
				});
				jQuery(this).addClass("remove");
				jQuery(this).parent().after("<div class='bottom'><div class='bl' /></div>");
				
				jQuery(this).parent().parent().bind("mouseenter mouseleave", function(){
					jQuery(this).toggleClass("active");
				});
				// load defaults from the select
				jQuery(this).find("option[selected]").each(function() {
					jQuery(this).parents(".center").find(".center_c ."+jQuery(this).attr("value")).addClass("activated");
				});
				// add a click listener on the newly created options divs
				jQuery(this).parents(".center").find(".center_c > div").click(function(e) {
				    if (e.shiftKey) {
				        if (lastActive == null) {
				            lastActive = jQuery(this).parents(".center_c").find(".activated")[0];
				        }
				        var clicked = jQuery(this).removeClass("option").removeClass("activated").attr("class");
				        jQuery(this).addClass("option");
				        jQuery(this).toggleClass("activated");
				        // check for last active element
				        var last = jQuery(lastActive).removeClass("option").removeClass("activated").attr("class");
				        jQuery(lastActive).addClass("option").addClass("activated");
				        var lastIndex = 0;
				        var clickedIndex = 0;
				        jQuery(this).parents(".center").find(".center_c > div").each(function(i) {
				            if (jQuery(this).hasClass(last)) lastIndex = i;
				            if (jQuery(this).hasClass(clicked)) clickedIndex = i;
				            jQuery(this).removeClass("activated");
				        });
				        if (lastIndex - clickedIndex > 0) {
				            jQuery(this).parents(".center").find(".center_c > div").each(function(i) {
				              // clicked index first
				              if (clickedIndex <= i && i <= lastIndex) {
				                jQuery(this).addClass("activated");
				              }
				            });
				        } else {
				            jQuery(this).parents(".center").find(".center_c > div").each(function(i) {
                               // last index first
                               if (lastIndex <= i && i <= clickedIndex) {
				                jQuery(this).addClass("activated");
				              }				            
				            });
				        }
				        jQuery(this).blur();
				    } else if (e.metaKey) {
					    var wasActive = false;
					    if (jQuery(this).hasClass("activated")) wasActive = true;
					    var clicked = jQuery(this).removeClass("option").removeClass("activated").attr("class");
					    jQuery(this).addClass("option");
					    if (wasActive) jQuery(this).addClass("activated");
					    jQuery(this).toggleClass("activated");
					} else {
					    // remove old actives
					    jQuery(this).parents(".center").find(".option").removeClass("activated");
					    var clicked = jQuery(this).removeClass("option").attr("class");
					    jQuery(this).addClass("option");
					    jQuery(this).toggleClass("activated");
					}
					// tell the multiple that the option has been altered
				    jQuery(this).parents(".center").find("select option").each(function() {
					    if (jQuery(this).attr("value") == clicked) {
						    if (jQuery(this).attr("selected")) {
							    jQuery(this).attr("selected", false);
						    } else {
							    jQuery(this).attr("selected", true);
						    }
					    }
				    });
					lastActive = jQuery(this);
				});
				// set the height
				// center = total - top - bottom (total is either default or set in CSS
				var centerHeight = jQuery(this).height() - jQuery(this).parents(".multiple").find(".bottom").height() - jQuery(this).parents(".multiple").find(".top").height();
				jQuery(this).parents(".multiple").find(".center_c").css("height", centerHeight );
				jQuery(this).parents(".multiple").find(".center_l").css("height", centerHeight );
			}
		});
		// text/password
		jQuery(this).find("input[type=text], input[type=password]").each(function(){
		    jQuery(this).wrap("<div class='textfield'></div>");
			jQuery(this).before("<div class='cornerLeft' />");
			jQuery(this).wrap("<div class='textCenter'></div>");
			jQuery(this).parent().after("<div class='cornerRight' />");
			
		});
		jQuery(this).find("input[type=text], input[type=password]").bind("mouseenter mouseleave", function(e){
			if (e.type == "mouseenter") {
				jQuery(this).parent().prev().attr("class", "cornerLeftactive");
				jQuery(this).parent().attr("class", "textCenteractive");
				jQuery(this).parent().next().attr("class", "cornerRightactive");
			}
			else {
				jQuery(this).parent().prev().attr("class", "cornerLeft");
				jQuery(this).parent().attr("class", "textCenter");
				jQuery(this).parent().next().attr("class", "cornerRight");
			}
		});
		
		// textarea's
		jQuery(this).find("textarea").each(function(){
			// surround the textarea with a div
			jQuery(this).wrap("<div class='textarea'></div>");
			jQuery(this).before("<div class='top'><div class='tl'/></div>");
			jQuery(this).wrap("<div class='center'></div>");
			jQuery(this).before("<div class='center_l' />");
			jQuery(this).parent().after("<div class='bottom'><div class='bl' /></div>");
			jQuery(this).parent().parent().bind("mouseenter mouseleave", function(){
				jQuery(this).toggleClass("active");
			});
			var centerHeight = jQuery(this).height() - jQuery(this).parents(".textarea").find(".bottom").height() - jQuery(this).parents(".textarea").find(".top").height() + 25;
			jQuery(this).parents(".textarea").find(".center_l").css("height", centerHeight );
			// ie haxx
			if (jQuery.browser.msie) {
				jQuery(this).parents(".textarea").find(".center_l").css("height", centerHeight - 3 );
				jQuery(this).parents(".textarea").find(".top").css("width", jQuery(this).width() + 25);
				jQuery(this).parents(".textarea").find(".bottom").css("width", jQuery(this).width() + 25);
			}
		});
		// button's
		jQuery(this).find("input[type=button], input[type=submit], input[type=reset]").each(function() {
			jQuery(this).before("<div class='buttonLeft'>&nbsp;</div>");
			jQuery(this).wrap("<div class='button'></div>");
			jQuery(this).parent().after("<div class='buttonRight'>&nbsp;</div>");
		});
		jQuery(this).find("input[type=button], input[type=submit], input[type=reset]").bind("mouseenter mouseleave", function(e){
			if (e.type == "mouseenter") {
				jQuery(this).parent().prev().attr("class", "buttonLeftActive");
				jQuery(this).parent().attr("class", "buttonActive");
				jQuery(this).parent().next().attr("class", "buttonRightActive");
			}
			else {
				jQuery(this).parent().prev().attr("class", "buttonLeft");
				jQuery(this).parent().attr("class", "button");
				jQuery(this).parent().next().attr("class", "buttonRight");
			}
		});
		// file
		jQuery(this).find("input[type=file]").each(function() {
			jQuery(this).addClass("hide");
			jQuery(this).css("opacity", 0);
			jQuery(this).after("<div class='file moveThis'><div class='fileLeft'>&nbsp;</div><div class='fileCenter'><input class='fileInput' type='text' /></div><div class='fileRight'>&nbsp;</div></div>");
			jQuery(this).change(function() {
				jQuery(this).next().find("input").attr("value", jQuery(this).attr("value"));
			})
		});
		jQuery(this).find(".moveThis").each(function() {
			// offsets are different in Firefox and IE
		if (jQuery.browser.msie && jQuery.browser.version < 8) {
				jQuery(this).css("margin", "0 0 0 -245px");
			} else {
				jQuery(this).css("margin", "-22px 0 0");
			}
		});
	} else {
		if (settings.debug) {
			// theme not found; give our developer some feedback
			jQuery(this).before("<div class='noTheme'>No styles found for this theme, using default</div>");
		}
		
	}
	// return the element
	return jQuery(this);
}
function removeActive(name) {
	jQuery(document).find("input[name="+name+"]").each(function() {
		jQuery(this).attr("checked", false);
		jQuery(this).prev().attr("class","radio");
		jQuery(this).next().removeClass("active");
	});
}
function checkStyle(theme) {
    if (jQuery("." + theme).css("backgroundImage") == "none" || jQuery("." + theme).css("backgroundImage") == undefined) {
		return false;
	}
	return true;
}