$(document).ready(function() {
    //
    //Form styling
    //
    

       
    $("select").each(function() {
      var input = $(this);
      var parent = $(this).parent();
      var id = $(this).attr("id");
      var selectedOption = input.find("option[selected='selected']").text();
      var options = "";
            
      input.children("option").each(function() {
        var option = $(this);
        options = options + '<li param="' + option.val() + '">' + option.text() + '</li>';
      });
      
      var inputHTML = $('<div class="tmp">').append( input.clone() ).html();
      
      input.replaceWith('<div class="select radius-5"><span class="center"><span class="selector">' + selectedOption + '</span>' + inputHTML + '</span><ul class="options radius-5-bl radius-5-br">' + options + '</ul></div>');
      parent.find("ul.options li").first().addClass("selected");
    });
    

    $("input[type='checkbox']").each(function() {
      var input = $(this);
      input.addClass("checkbox");
      input.hide();
      var parent = $(this).parent();
      var id = $(this).attr("id");
      var classes = $(this).attr("class");
      var label = parent.find("label[for=" + id + "]");
      var checked = "";
      var green = "";
      if(input.attr("checked") == true) {
      	green = " green";
      	checked = " checked";
      }
      
      var inputHTML = $('<div class="tmp">').append( input.clone() ).html();
      
      input.replaceWith('<div class="' + classes + '"><span class="checkbox'+ checked +'"></span>' + inputHTML + '<label for="' + id + '" class="checkbox' + green +'">' + label.text() + '</label></div>');
      label.remove();
    });
    
    $("input[type='radio']").each(function() {
      var input = $(this);
      input.addClass("radio");
      input.hide();
      var parent = $(this).parent();
      var id = $(this).attr("id");
      var classes = $(this).attr("class");
      var label = parent.find("label[for=" + id + "]");
      var checked = "";
      if(input.attr("checked") == true) checked = " checked";
      
      var inputHTML = $('<div class="tmp">').append( input.clone() ).html();
      
      input.replaceWith('<div class="' + classes + '"><span class="radio'+ checked +'"></span>' + inputHTML + '<label for="' + id + '" class="radio">' + label.text() + '</label></div>');
      label.remove();
    });
    
    $("input.button, button").each(function() {
      var input = $(this);
      if(!input.hasClass("rendered")) {
        var text = input.val();
        if(text.length == 0) {
          text = input.html();
          input.html(" ");
        }
        else input.val(" ");
        
        var classes=" " + input.attr("class");
        classes = classes.replace('button','');
        classes = classes + ' rendered';
        
        input.attr("class",classes);
        
        var inputHTML = $('<div class="tmp">').append( input.clone() ).html();
        
        input.replaceWith('<div class="button' + classes + '"><span class="left"></span><span class="center">' + inputHTML + text + '</span><span class="right"></span></div>');
      }
    });
    
    $("a.button").each(function() {
      var link = $(this);
      if(!link.hasClass("rendered")) {
        var text = link.text();
        link.html(" ");
        
        var classes=" " + link.attr("class");
        classes = classes.replace('button','rendered');
        
        link.attr("class",classes);
        
        var linkHTML = $('<div class="tmp">').append( link.clone() ).html();
        
        link.replaceWith('<div class="button' + classes + '"><span class="left"></span><span class="center">' + linkHTML + text + '</span><span class="right"></span></div>');
      }
    });
    
    
    //
    //Styled form elements actions
    //
    
    $("div.checkbox span.checkbox").live("click", function() {
      var that = $(this);
      var parent = that.parent();
      
      if(that.hasClass("checked")) {
        that.removeClass("checked");
        parent.find("label").removeClass("green");
        parent.find("input").attr("checked",false);
      }
      else {
        that.addClass("checked");
        parent.find("label").addClass("green");
        parent.find("input").attr("checked",true);
      }
      
    });
    
    $("div.checkbox label.checkbox").live("click", function() {
      var parent = $(this).parent();
      var that = parent.find("span.checkbox");
      
      if(that.hasClass("checked")) {
        that.removeClass("checked");
        parent.find("label").removeClass("green");
        parent.find("input").attr("checked",false);
      }
      else {
        that.addClass("checked");
        parent.find("label").addClass("green");
        parent.find("input").attr("checked",true);
      }
      
    });
    
    $("div.radio span.radio").live("click", function() {
      var that = $(this).parent().find("input.radio");
      var name = that.attr("name");
      var parent = that.parents("form");
      var radioSet = parent.find("input.radio[name='" + name + "']");
      
      radioSet.each(function(){
        $(this).attr("checked",false);
        $(this).parent().find("label").removeClass("green");
        $(this).parent().find("span.radio").removeClass("checked");
      });
      
      that.attr("checked",true);
      that.parent().find("label").addClass("green");
      that.parent().find("span.radio").addClass("checked");
      
    });
    
    $("div.radio label.radio").live("click", function() {
      var that = $(this).parent().find("input.radio");
      var name = that.attr("name");
      var parent = that.parents("form");
      var radioSet = parent.find("input.radio[name='" + name + "']");
      
      radioSet.each(function(){
        $(this).attr("checked",false);
        $(this).parent().find("label").removeClass("green");
        $(this).parent().find("span.radio").removeClass("checked");
      });
      
      that.attr("checked",true);
      that.parent().find("label").addClass("green");
      that.parent().find("span.radio").addClass("checked");

    });
    
    $("div.select .selector").click(function() {
      var parent = $(this).parents("div.select");
      var label = parent.find("label");
      var selector = parent.find(".selector");
      var select = parent.find(".options");
      
      if(select.hasClass("visible")) select.animate({opacity: 'hide', height: 'hide'}, "slow",function() { $(this).removeClass("visible"); });
      else select.animate({opacity: 'show', height: 'show'}, "slow",function() { $(this).addClass("visible"); });
      
    });
    
    $("div.select .options li").click(function() {
      var that = $(this);
      var parent = $(this).parents("div.select");
      var selector = parent.find(".selector");
      var select = parent.find(".options");
      var value = that.attr("param");

      selector.text(that.text());
      select.find("li.selected").removeClass("selected");
      that.addClass("selected");
      parent.find("option:selected").attr("selected","");
      parent.find("option[value=" + value + "]").attr("selected","selected");
      select.animate({opacity: 'hide', height: 'hide'}, "slow",function() { $(this).removeClass("visible"); });
      
    });
    
    $("div.file").click(function() {
      var parent = $(this);
      var input = parent.find("input");
      input.focus();
    });
    
    $("div.file input").mouseover(function() {
      var parent = $(this).parents("div.file");
      parent.find(".choose-file").addClass("hover");
    });
    
    $("div.file input").mouseout(function() {
      var parent = $(this).parents("div.file");
      parent.find(".choose-file").removeClass("hover");
    });
    
    $("div.file input").change(function() {
      var parent = $(this).parents("div.file");
      var input = parent.find("input");
      parent.find(".filename").text(input.val());
    });
});