/**
 * @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);
    if (checkStyle(settings.theme)) {
        jQuery(this).addClass(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");
        });

        // 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' />");
            // label infront
            if (jQuery(this).parent().parent().prev()[0].tagName == "LABEL") {
                jQuery(this).parent().parent().prepend(jQuery(this).parent().parent().prev()[0]);
            }
            // label behind
            else if (jQuery(this).parent().parent().next()[0].tagName == "LABEL") {
                jQuery(this).parent().parent().append(jQuery(this).parent().parent().next()[0]);
            }
        });
        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(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") {
		return false;
	}
	return true;
}
