(function ($) { // wrapper function to allow safe usage of $ for jQuery
$.widget('ui.form', {
	_init: function () {
		var object = this;
		var form = this.element;
		var inputs = form.find('input, select ,textarea');
	 
		form.addClass('ui-widget');
		
		$.each(inputs, function () {
			// skip hidden and image inputs
			if ( $(this).is('input[type="hidden"]') || $(this).is('input[type="image"]')) {
				return;
			}  
		
			$(this).addClass('ui-state-default');
			if (!$(this).parent().hasClass('ui-form-element-holder')) {
				$(this).wrap('<div class="ui-form-element-holder" />');
			}
		
			if ($(this).is(':reset ,:submit')) object.buttons(this);
			else if ($(this).is(':checkbox')) object.checkboxes(this);
			else if ($(this).is('input[type="text"]') || $(this).is('textarea') || $(this).is('input[type="password"]')) object.textelements(this);
			else if ($(this).is(':radio')) object.radio(this);
			else if ($(this).is('select')) object.selector(this);
			
			if ($(this).hasClass('date')) {
				$(this).datepicker();
			}
		});
		
		$('.hover').hover(function () {
			$(this).addClass('ui-state-hover');
		}, function () {
			$(this).removeClass('ui-state-hover');
		});
	},
	
	textelements: function (element) {
		$(element).bind({
			focusin: function () {
				$(this).toggleClass('ui-state-focus');
			},
			focusout: function () {
				$(this).toggleClass('ui-state-focus');
			}
		});
	},
	
	buttons: function (element) {
		if ($(element).is(':submit')) {
			$(element).addClass('ui-priority-primary hover');
		} else if ($(element).is(':reset')) 
			$(element).addClass('ui-priority-secondary ui-corner-all hover');
			
		$(element).bind('mousedown mouseup', function () {
			$(this).toggleClass('ui-state-active');
		});
	},
	
	checkboxes: function (element) {
		if ($(element).hasClass('ui-helper-hidden')) {return;} // already initialized
		
		$(element).addClass('ui-helper-hidden').after('<span />');
		
		var className = 'ui-form-checkbox-unchecked';
		if ($(element).is(':checked')) {
			className = 'ui-form-checkbox-checked';
		}
		
		var parentElement = $(element).next();
		parentElement.addClass('ui-form-control ' + className);
		parentElement.click(function (event) {
			if (!$(element).attr('disabled')){
				$(this).toggleClass('ui-form-checkbox-checked ui-form-checkbox-unchecked');
				$(element).click();
			}
		});
		
	},
	
	radio: function (element) {
		
		if ($(element).hasClass('ui-helper-hidden')) {return;} // already initialized
		
		$(element).addClass('ui-helper-hidden').after('<span />');
		
		var className = 'ui-form-radio-off';
		if ($(element).is(':checked')) {
			className = 'ui-form-radio-on';
		}
		var object = this;
		var parentElement = $(element).next();
		parentElement
			.addClass('ui-form-control ' + className)
			.click(function (event) {
				object.toggleRadio(element);
			});
		
		var elementHolder = $(element).parent();
		$('label[for="'+$(element).attr("id")+'"]').click(function(){
			object.toggleRadio(element);		
		});
	},
	toggleRadio: function (element){
		var parentElement = $(element).next();
		var radioName = $(element).attr('name');
		$('input[name="' + radioName + '"]').next().removeClass('ui-form-radio-on').addClass('ui-form-radio-off');
		$('input[name="' + radioName + '"]').removeAttr("checked");
		$(parentElement).addClass('ui-form-radio-on').removeClass('ui-form-radio-off');
		$(element).prop("checked","checked").trigger("click");
	},
	
	selector: function (element) {
		var object = this;
		
		var parentElement = $(element).parent();
		parentElement.css({
			'display': 'block',
			'position': 'relative',
			'float': 'left'
		});
		
		// get element dimenssions
		var dims = $(element).getHiddenDimensions();

		$(element).addClass('ui-helper-hidden hide');
		parentElement.find('.ui-form-dropdown-border').remove();
		parentElement.append('<div class="ui-form-dropdown-border"><div class="ui-form-dropdown" /></div>');

		var holder = parentElement.find('div.ui-form-dropdown');
		holder
			.css({
				'width' : dims.width
			})
			.addClass('clearfix')
			.append('<span class="ui-form-dropdown-caption clearfix" />') // caption
			.append('<span class="ui-form-control ui-form-dropdown-arrow" />') // arrow
			.append('<div class="ui-form-dropdown-options" />');	// options holder
		
		// setup the arrow
		var arrow = holder.find('span.ui-form-dropdown-arrow');
		arrow.css({
			'float' : 'right',
			'display' : 'inline-block'
		});
		
		// setup the caption
		var caption = holder.find('span.ui-form-dropdown-caption');
		caption
			.css({
				'float' : 'left',
				'display' : 'block',
				'width' : ( dims.width - $(arrow).width() - 1) + 'px'
			})
			.text($(element).find('option:selected').text());
		
		// if the select is disabled we don't need to go down
		if ($(element).is(':disabled')) {
			parentElement.addClass('ui-state-disabled ui-form-dropdown-container');
			return;
		}
		
		// setup the options
		var optionsHolder = holder.find('div.ui-form-dropdown-options');
		optionsHolder
			.css({
				'position' : 'absolute',
				'left' : '0',
				'width' : dims.width + 2,
				'backgroundColor': '#fff',
				'zIndex' : 999 
			})
			.addClass('ui-helper-hidden')
			.append('<ul />');
		
		var options = optionsHolder.find('ul:first');
		
		// add options
		$(element).find('option').each( function () {
			var classes = 'hover';
			if ($(this).is(':disabled')) {
				classes += ' ui-state-disabled';
			} else if ($(this).is(':selected')) {
				classes += ' ui-state-selected';
			}
			options.append('<li class="' + classes + '">' + $(this).text() + '</li>');
		});
		
		// limit all dropdowns to 7 options before a scroll appears
		var maxVisibleSelectOptions = 7;
		var liDimensions = options.find('li:first').getHiddenDimensions();
		optionsHolder.css('maxHeight', (liDimensions.height * maxVisibleSelectOptions) + 'px');

		// handle click events
		options.find("li:not(.ui-state-disabled)").click(function (event) {
			
			parentElement.find('.ui-state-selected').removeClass('ui-state-selected');
			$(this).addClass('ui-state-selected');
			
			caption.text($(this).text());
			//custom code to handle value of options field when it is modified with custom string like (Low Stock, Sold out and etc.)
			var text = $(this).text();
			if (text.indexOf(" - " + app.resources["LOW_STOCK"])!= -1 )
				text = text.substr(0,text.indexOf(" - " + app.resources["LOW_STOCK"]));
			if (text.indexOf(" - " + app.resources["SOLD_OUT"])!= -1 )
				text = text.substr(0,text.indexOf(" - " + app.resources["SOLD_OUT"]));
			
			$(element).val(text);
			$(element).find("option:eq("+$(this).index()+")").prop("selected","selected");
			optionsHolder.slideToggle('fast', function(){
				$(element).trigger('change');
			});
			object.closeSelect();
			event.stopPropagation();
			event.preventDefault();
		});
		
		// open the select
		$(parentElement).find('span').click(function (event) {
			$('div.ui-form-dropdown-options').not($(parentElement.find('div.ui-form-dropdown-options'))).hide();
			$('span.ui-form-dropdown-arrow').removeClass('ui-state-active');
			$(arrow).addClass('ui-state-active');
			
			optionsHolder.css({'top' : $(holder).parent().height()+'px'});
			optionsHolder.slideToggle('fast', function(){
				optionsHolder.jScrollPane({
					showArrows: true,
					verticalDragMinHeight: 49,
					verticalDragMaxHeight: 49,
					contentWidth: 10
				});
				parentElement.find('div').css('float', 'none');
				if (!optionsHolder.is(':visible')) {
					$(arrow).removeClass('ui-state-active');
				}
				if ($.browser.msie && $.browser.version < 8){
					optionsHolder.css({'width' : dims.width+2});
					$('.ui-form-dropdown-options .jspContainer').css({'width': dims.width+2});
					var ulElement = optionsHolder.find('ul');
					ulElement.css({'width': optionsHolder.width()});
					if (ulElement.data('visitFlag') && typeof optionsHolder.find('div.jspCap')[0] != 'undefined')
						ulElement.css({'position': 'relative', 'left':'-4px'});
					ulElement.data('visitFlag',true);
				}
			});
			event.stopPropagation();
			event.preventDefault();
		});
				
		// what happens in the box, status in the box
		$('.ui-form-dropdown').click(function(event){
			event.stopPropagation();
		});
		$(document).click(function(){
			object.closeSelect();
		});
		
		// handle keybord
		parentElement.find('li, span')
		.mouseenter(function(event){
			jQuery(document).bind("keydown", function(event) {
				var keyCode = event.keyCode;	
				var elem = parentElement.find('li.ui-state-selected');
				
				//move to next
				if(keyCode==39 || keyCode==40) {
					var nextElement = elem.nextAll('li:not(.ui-state-disabled)').first();
					if (nextElement.length == 1) {
						elem.removeClass('ui-state-selected');
						nextElement.addClass('ui-state-selected');
					}
					event.preventDefault(); event.stopPropagation();
				};
				
				//move to previous
				if(keyCode==37 || keyCode==38) {
					var prevElement = elem.prevAll('li:not(.ui-state-disabled)').first();
					if (prevElement.length == 1) {
						elem.removeClass('ui-state-selected');
						prevElement.addClass('ui-state-selected');
					}
					event.preventDefault(); event.stopPropagation();
				};
				
				if (keyCode == 13) {
					elem.trigger('click');
				}
			});
		})
		.mouseout(function(event){
			jQuery(document).unbind("keydown");
		});
	},
	
	closeSelect: function(element) {
		$('div.ui-form-dropdown-options').hide();
		$('span.ui-form-dropdown-arrow').removeClass('ui-state-active');
	}
});
}(jQuery));
$(function(){
	var formsToMakePretty = $('form.jNice');
	if(formsToMakePretty.length > 0) {
		formsToMakePretty.form();
	}
});

jQuery("document").ready(function(){
	jQuery('input[type=image], input[type=submit], button, a').live("mousedown", function(){jQuery(this).attr("hideFocus", "true").css({"border" : "none", "outline" : "none"})});
});