/*

CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

// this is switched of, everything is controlled from CSS
// The only thing you need to change in this file is the following
// variables: checkboxHeight, radioHeight and selectWidth. 

// Replace the first two numbers with the height of the checkbox and
// radio button. The actual height of both the checkbox and radio
// images should be 4 times the height of these two variables. The
// selectWidth value should be the width of your select list image.

//You may need to adjust your images a bit if there is a slight
//vertical movement during the different stages of the button
//activation.

Visit http://ryanfait.com/ for more information.


	SERIOUSLY REWRITTEN by Ilya (Reist) Kochik
	BUZZfriends 
	http://buzfriends.ru
	20.11.2008

	CHANGES: support for jquery
	more semanticaly accurate code
	support for custom-styled input type="text", textarea
	support for rounded corners

*/

document.write('<style type=\'text/css\'>input.styled { display: none; } select.styled { position: relative; top: 0px; left: 0px; width: 50px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } span.select { position: relative; top: 0px; left: 0px; }</style>');






var Custom = {
  init: function() {
	var inputs = $(':checkbox.styled, :radio.styled'), span = Array(), option, label, wrapper;
    for(a = 0; a < inputs.length; a++) {
      inputs[a] = $(inputs[a]);
      span[a] = $('<span>&nbsp;</span>');
      span[a].addClass(inputs[a].attr('type'));

      if(inputs[a].attr('checked') == true) {
        span[a].addClass(inputs[a].attr('type') + '_checked');
      } else {
        span[a].removeClass(inputs[a].attr('type') + '_checked');
      }

      label = $('label[for=' + inputs[a].attr('id') + ']');
      
      inputs[a].before(span[a]);

      inputs[a].bind('change', Custom.clear);
      span[a].bind('mousedown', Custom.pushed);
      span[a].bind('mouseup', Custom.check);
      label.bind('mousedown', Custom.pushed);
      label.bind('mouseup', Custom.check);
    }
    inputs = $('select.styled');
    for(a = 0; a < inputs.length; a++) {
      inputs[a] = $(inputs[a]);
      inputs[a].wrap('<div class="select"></div>');
      inputs[a].before($('<span class="arrow">&nbsp;</span>'));
      
      option = inputs[a].children('option');
      active = $(option[0]).text();
      textnode = $('<span>' + active + '</span>');
      for(b = 0; b < option.length; b++) {
        option[b] = $(option[b]);
        if(option[b].attr('selected')) {
           textnode = option[b].text();
        }
      }
      span[a] = $('<span/>');
      span[a].addClass('select');
      span[a].id = 'select_' + inputs[a].attr('name', name);
      span[a].append (textnode);
      inputs[a].before(span[a]);
      wrapper = $('<div class="custom_text_input"></div>');
      inputs[a].after(wrapper);
      wrapper.append($('<div class="top">&nbsp;</div>'));
      wrapper.append($('<div class="bttm">&nbsp;</div>'));
      wrapper.append($('<div class="crn tl">&nbsp;</div>'));
      wrapper.append($('<div class="crn bl">&nbsp;</div>'));
      inputs[a].bind('change', Custom.choose);
    }
    inputs = $(':text.input_text,:password.input_text');
    for(a = 0; a < inputs.length; a++) {
    	inputs[a] = $(inputs[a]);
    	inputs[a].wrap('<div class="custom_text_input"></div>');
    	inputs[a].after($('<div class="top">&nbsp;</div>'));
		inputs[a].after($('<div class="bttm">&nbsp;</div>'));
		inputs[a].after($('<div class="crn tl">&nbsp;</div>'));
		inputs[a].after($('<div class="crn tr">&nbsp;</div>'));
		inputs[a].after($('<div class="crn bl">&nbsp;</div>'));
		inputs[a].after($('<div class="crn br">&nbsp;</div>'));
    }
    inputs = $('textarea.styled');
    for(a = 0; a < inputs.length; a++) {
    	inputs[a] = $(inputs[a]);
    	inputs[a].after($('<div class="top">&nbsp;</div>'));
    	inputs[a].after($('<div class="bttm">&nbsp;</div>'));
    	inputs[a].after($('<div class="crn tl">&nbsp;</div>'));
    	inputs[a].after($('<div class="crn tr">&nbsp;</div>'));
    	inputs[a].after($('<div class="crn bl">&nbsp;</div>'));
    	inputs[a].after($('<div class="crn br">&nbsp;</div>'));
    }
  },
  pushed: function(aEvent) {
    var item;
    if($(this).attr('tagName').toLowerCase() == 'label') { 
      item = $(this).children('span');
      
    } else {
      item = $(this);
    }
 
    var element = item.next();
    item.toggleClass(element.attr('type') + '_pushed');

    if (!aEvent) { var aEvent = window.event; }
    aEvent.cancelBubble = true;
    if (aEvent.stopPropagation) aEvent.stopPropagation();
  },
  check: function(aEvent) {
	var date = new Date();
    var item;

    if($(this).attr('tagName').toLowerCase() == 'label') { 
      item = $(this).children('span');
    } else {
      item = $(this);
    }

    var element = item.next();

    switch(element.attr('type')) {
      case 'checkbox':
        item.toggleClass(element.attr('type') + '_checked');
        element.val((element.attr('checked')) ? 'checked' : '');
        break;

      case 'radio':
        var group = element.attr('name');
        var inputs = $(':radio[name=' + group + ']');
        for(a = 0; a < inputs.length; a++) {
          inputs[a] = $(inputs[a]);
          inputs[a].val('');
          inputs[a].prev().removeClass(inputs[a].attr('type') + '_checked');
        }        
        item.addClass(element.attr('type') + '_checked');
        element.val('checked');
        break;
    }

    if (!aEvent) { var aEvent = window.event; }
    aEvent.cancelBubble = true;
    if (aEvent.stopPropagation) aEvent.stopPropagation();
    
    Custom.clear();
  },
  clear: function() {
    var inputs = $(':checkbox.styled, :radio.styled, select.styled');
    for(var b = 0; b < inputs.length; b++) {
      inputs[b] = $(inputs[b]);
      inputs[b].prev().removeClass(inputs[b].attr('type') + '_pushed');
    }
  },
  choose: function() {
    var value  = $(this).val();
    var option = $(this).children('option[value=' + value + ']');

    $(this).prev().text(option.text());
  }
}
//$(window).bind('load', Custom.init);