(function($){	
	$.fn.element_customization = function(options){
		var self = this;
		$(document).mousedown(checkExternalClick);
		return this.each(function(){
			$('.custom_textbox').each(TextAdd);
			$('.custom_checkbox').each(CheckAdd);
			$('.custom_radio').each(RadioAdd);
			$('.custom_select').each(function(index){ SelectAdd(this, index); });
			$(this).bind('reset',function(){var action = function(){ Reset(this); }; window.setTimeout(action, 10); });
			$('.element_hidden').css({'opacity':0.1,'z-index':1,'position':'relative'});
		});		
	};/* End the Plugin */

	var Reset = function(form){
		var sel;
		$('.select_box_wrapper select', form).each(function(){sel = (this.selectedIndex<0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function(){$('a:eq('+ sel +')', this).click();});});
		$('a.check_box, a.radio_button', form).removeClass('input_checked');
		$('input:checkbox, input:radio', form).each(function(){if(this.checked){$('a', $(this).parent()).addClass('input_checked');}});
	};
	
	// Radio Buttons

	var RadioAdd = function(){
		var $input = $(this).addClass('element_hidden').wrap('<div class="radio_wrapper" style="display:inline-block;"></div>');
		var $wrapper = $input.parent();
		var $a = $('<span class="radio_button"></span>');
		$a.css({'position':'absolute','top':0,'left':0,'display':'block','width':$wrapper.width(),'height':$wrapper.height(),'cursor':'pointer'});
		$wrapper.append($a);
		/* Click Handler */
		$a.click(function(){
				var $input = $(this).addClass('input_checked').siblings('input').attr('checked',true);
				/* uncheck all others of same name */
				$('input:radio[name="'+ $input.attr('name') +'"]').not($input).each(function(){
					$(this).attr('checked',false).siblings('.radio_button').removeClass('input_checked');
				});
				return false;
		});
		$input.click(function(){
			if(this.checked){
				var $input = $(this).siblings('.radio_button').addClass('input_checked').end();
				/* uncheck all others of same name */
				$('input:radio[name="'+ $input.attr('name') +'"]').not($input).each(function(){
					$(this).attr('checked',false).siblings('.radio_button').removeClass('input_checked');
				});
			}
		}).focus(function(){ $a.addClass('element_focus'); }).blur(function(){ $a.removeClass('element_focus'); });

		/* set the default state */
		if (this.checked){ $a.addClass('input_checked'); }
		
		
		if($(this).attr('disabled') == true)
		{
			var $input = $(this).parent().find('.radio_button').addClass('disabled');
			$('.radio_button').unbind('click');
		}
		
	};

	var CheckAdd = function(){
		var $input = $(this).addClass('element_hidden').wrap('<div class="checkbox_wrapper" style="display:inline-block;"></div>');
		var $wrapper = $input.parent().append('<span class="check_box"></span>');		
		$wrapper.find('.check_box').css({'position':'absolute','top':0,'left':0,'display':'block','width':$wrapper.width(),'height':$wrapper.height(),'cursor':'pointer'});
		/* Click Handler */
		var $a = $wrapper.find('.check_box').click(function(){
				var $a = $(this);
				var input = $a.siblings('input')[0];
				if (input.checked===true){
					input.checked = false;
					$a.removeClass('input_checked');
				}
				else {
					input.checked = true;
					$a.addClass('input_checked');
				}
				return false;
		});
		$input.click(function(){
			if(this.checked){ $a.addClass('input_checked'); 	}
			else { $a.removeClass('input_checked'); }
		}).focus(function(){ $a.addClass('element_focus'); }).blur(function(){ $a.removeClass('element_focus'); });
		
		/* set the default state */
		if (this.checked){$('.check_box', $wrapper).addClass('input_checked');}
		
		
		if($(this).attr('disabled') == true)
		{
			var $input = $(this).parent().find('.check_box').addClass('disabled');
			$('.check_box').unbind('click');
		}
		
	};
	
	//  Text Box

	var TextAdd = function(){
		$(this).wrap('<div class="input_wrapper"></div>');
		var field_padding = parseInt($(this).parent().css('padding-left'));
		$(this).parent().css({'width':$(this).width()-field_padding});
		var $input = $(this).wrap('<span class="input_inner"></span>');		
		$(this).parent().css({'padding-right':field_padding});
		$(this).css({'width':$(this).width()-(2*field_padding),'border':0,'background':'none','padding':0});
		var $wrapper = $input.parents('.input_wrapper');
		$input.focus(function(){ 
			$wrapper.addClass('input_wrapper_hover');
		}).blur(function(){
			$wrapper.removeClass('input_wrapper_hover');
		});
		if($(this).attr('disabled') == true)
		{
			var $input = $(this).addClass('disabled');
		}		
	};

	/* Hide all open selects */
	var SelectHide = function(){
			$('.select_box_wrapper ul:visible').hide();
	};

	/* Check for an external click */
	var checkExternalClick = function(event) {
		if ($(event.target).parents('.select_box_wrapper').length === 0) { SelectHide(); }
	};

	var SelectAdd = function(element, index){
		var $select = $(element);
		index = index || $select.css('zIndex')*1;
		index = (index) ? index : 0;
		/* First thing we do is Wrap it */
		$select.wrap($('<div class="input_wrapper custom_textbox" style="display:inline-block;"></div>').css({zIndex: 100-index}));
		var field_padding = parseInt($select.parent().css('padding-left'));
		var width = $select.width() + 2;
		var height = $('.custom_textbox').height();
		$select.css({'display':'none'});
		$select.addClass('element_hidden').after('<div class="input_inner"><div><span class="select_text"></span><span class="select_box_open"></span></div><ul></ul></div>');
		var $wrapper = $(element).siblings('.input_inner');
		$select.parent().css({width: width -field_padding});
		$select.parent().find('.select_text').width( width - $('.select_box_open').width() - (2 * field_padding));		
		$select.parent().find('.select_text').css({height: height +'px','line-height': height +'px','display':'block'});			
		$select.parent().find('.select_box_open').css({'margin-top': -$('.select_box_open').height()/2});
		$('.input_inner ul', $wrapper).width( width + field_padding );
		$('.input_inner ul').css({'left': - field_padding});
		$('.input_inner ul').addClass('select_options');
		SelectUpdate(element);
		$('div', $wrapper).click(function(){
			var $ul = $(this).siblings('ul');
			if ($ul.css('display')=='none'){ SelectHide(); }
			$ul.slideToggle(300);
			var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
			$ul.animate({scrollTop: offSet});
			return false;
		});
		
		if($select.attr('disabled') == true)
		{
			var $input = $('div', $wrapper).parent().addClass('disabled');
			$('div', $wrapper).unbind('click');
		}		
		
		$select.keydown(function(e){
			var selectedIndex = this.selectedIndex;
			switch(e.keyCode){
				case 40:
					if (selectedIndex < this.options.length - 1){ selectedIndex+=1; }
					break;
				case 38:
					if (selectedIndex > 0){ selectedIndex-=1; }
					break;
				default:
					return;
					break;
			}
			$('ul a', $wrapper).removeClass('selected').eq(selectedIndex).addClass('selected');
			$('span:eq(0)', $wrapper).html($('option:eq('+ selectedIndex +')', $select).attr('selected', 'selected').text());
			return false;
		}).focus(function(){ $wrapper.addClass('element_focus'); }).blur(function(){ $wrapper.removeClass('element_focus'); });
	};
	var SelectUpdate = function(element){
		var $select = $(element);
		var $wrapper = $select.siblings('.input_inner');
		var $ul = $wrapper.find('ul').find('li').remove().end().hide();
		$('option', $select).each(function(i){
			$ul.append('<li><a href="#" index="'+ i +'">'+ this.text +'</a></li>');
		});
		$ul.find('a').click(function(){
			$('a.selected', $wrapper).removeClass('selected');
			$(this).addClass('selected');
			if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
			$select[0].selectedIndex = $(this).attr('index');
			$('span:eq(0)', $wrapper).html($(this).html());
			$ul.hide();
			return false;
		});
		$('a:eq('+ $select[0].selectedIndex +')', $ul).click();
	};

	var SelectRemove = function(element){
		var zIndex = $(element).siblings('.input_inner').css('zIndex');
		$(element).css({'z-index': zIndex}).removeClass('element_hidden');
		$(element).siblings('.input_inner').remove();
	};
	$.element_customization = {
			SelectAdd : function(element, index){ 	SelectAdd(element, index); },
			SelectRemove : function(element){ SelectRemove(element); },
			SelectUpdate : function(element){ SelectUpdate(element); }
	};
	$(function(){$(document).element_customization();	});
})(jQuery);

$(document).ready(function() {
  $('.custom_file').each(function(){
    var styles = $(this).attr('style');
	
    var file_width = $(this).width();
	//alert(file_width);
	
    $(this).css({'margin': '0','padding':'0','position':'absolute','top':0,'left':'0','opacity':0.01,'z-index':1});
    $(this).wrap('<div class="input_wrapper" style="position:relative;"></div>');
	var field_padding = parseInt($(this).parent().css('padding-left'));
	$(this).parent().css('width',file_width-field_padding);
    $(this).parent().append($('<span class="input_inner" />').append($('<input type="text" class="custom_textbox" value="Select File..." style="background:none; border:none; padding:0" />').attr('id',$(this).attr('id')+'_custom')).append($('<span class="file_select_button"></span>')));
	var browse_button_width = parseInt($(this).parent().find('.file_select_button').css('width'));
	$(this).parent().find('.custom_textbox').css('width',file_width-(2*field_padding+browse_button_width));
	$(this).parent().find('.file_select_button').css('margin-top', -$(this).parent().find('.file_select_button').height()/2);
	
	//alert($('.styled_file img').width());
	
	$('.file_wrapper').css({'width':file_width});
	$('.styled_file input').css({'width':(file_width-$('.styled_file .select_button').width())-10});
	$('.styled_file .select_button').css({'margin-top':-($('.styled_file .select_button').height()/2)});
	
	
		
		
		if($(this).attr('disabled') == true)
		{
			var $input = $(this).parent().addClass('disabled');
		}
 
    $(this).bind('change', function() {
      $('#'+$(this).attr('id')+'_custom').val($(this).val());;
    });
    $(this).bind('mouseout', function() {
      $('#'+$(this).attr('id')+'_custom').val($(this).val('Select File...'));;
    });
  });
  
  
  $('.custom_textarea').each(function(){
    $(this).wrap('<div class="textarea_wrapper"></div>');										  
    var styles = $(this).attr('style');
	var ta_pad =  parseInt($('.textarea_wrapper').css('padding-left'));
	if(styles = '')
	{
		$('.textarea_wrapper').attr('style',styles);
	}
	else
	{		
		$('.textarea_wrapper').css({'width':$(this).width()-(2*ta_pad)});
		$(this).css({'width':$(this).width()-(2*ta_pad)});
	}
	$('.textarea_wrapper').append('<span class="textarea_left_top text_area_corner"></span>');
	$('.textarea_wrapper').append('<span class="textarea_left_bottom text_area_corner"></span>');
	$('.textarea_wrapper').append('<span class="textarea_right_top text_area_corner"></span>');
	$('.textarea_wrapper').append('<span class="textarea_right_bottom text_area_corner"></span>');
	$('.textarea_wrapper').append('<span class="textarea_top"></span>');
	$('.textarea_wrapper').append('<span class="textarea_bottom"></span>');
	$('.textarea_wrapper').append('<span class="text_area_vertical_border left_text_area_border"></span>');
	$('.textarea_wrapper').append('<span class="text_area_vertical_border right_text_area_border"></span>');
	$('.textarea_wrapper .textarea_right_top').css({'width':($('.textarea_wrapper').outerWidth()-5)});
	$('.textarea_wrapper .textarea_right_bottom').css({'width':($('.textarea_wrapper').outerWidth()-5)});
	
	$('.textarea_wrapper .left_text_area_border, .textarea_wrapper .right_text_area_border').css({'height':($('.textarea_wrapper').outerHeight()-$('.text_area_corner').height()*2), 'top':$('.text_area_corner').height(), 'width':$('.text_area_corner').width()});
		
		
		if($(this).attr('disabled') == true)
		{
			var $input = $(this).addClass('disabled');
		}
  });
});