/**
 * uniform, a jQuery plugin
 *
 * @author Ethan Liu
 * @version $Id: jquery.uniform.js 130 2009-08-23 12:53:36Z ethan $
 * @copyright Creativecrap.com, Ethan, 17 October, 2008
 * @package default
 **/

/**
sample:

<button id="button1">button</button>
<button id="button1" class="white">button</button>
<button id="button1" class="blue confirm">button</button>

<input type="text" class="combo" rel="placeholder" name="some_name" value="" id="some_name">

<select name="selectbox1">
	<option value=1>1111</option>
	<option value=2>2222</option>
</select>

**/


(function($) {
	var settings = {
		defaultWidget: 'white capsule',
		widget: 'white',
		confirmMessage: 'Are you sure?',
		confirmTime: 5000
	};
	
	var _this, serial = 0;
	
	$.fn.uniform = function(option) {
		$.extend(settings, option);
		if (!option || !option.widget) {
			settings.widget = settings.defaultWidget;
		}
		if (option && option.callback) {
			if ($(this).length == 1) {
				var f = $(this).attr('id').replace('-', '_');
				eval('settings.cb_' + f + ' = ' + option.callback + ';');
			};
		}
		//$(this).hide();
		_this = this;
		textbox();
		combo();
		dropdown();
		markup();
		button();
		behavior();
		//$(this).show();
	}

	$.fn.uniformMsg = function(option) {
		var _this = $(this).next('div.uniform-message-box');
		//var _this = $(this).find('.uniform-message-box');
		if (_this.length == 0) {
			var _this = $(this).parent().next('div.uniform-message-box');
		}
		if (_this.length > 0) {
			_this.html(option.msg);
			_this.removeClass('error');

			if (option.cls) {
				_this.addClass(option.cls);
			}
			
			if (option.msg) {
				_this.show();
			}
			else {
				_this.hide();
			}
		}
	}
	
	function getID() {
		serial++;
		while($("#uniform-" + serial).length > 0) {
			serial++;
		}
		return 'uniform-' + serial;
	}
	
	function behavior() {
		_this.find('input').keydown(function(e) {
			if (e.keyCode == 13) {
				if ($(this).is('.trigger')) {
					// pass through
				}
				else {
					if ($(this).nextAll('input.require:first').length > 0) {
						$(this).nextAll('input.require:first').focus();
					}
					else {
			            $(this).parents('form').submit();
					}
					return false;
				}
			};
		});
	}

	function validForm(form_id) {
		var valid = true;
		$(form_id + " :text,:password")
		.each(function() {
			var val = $.trim($(this).val());
			$(this).val(val);
			if (val == $(this).attr("rel")) {
				//$(this).val($(this).attr('rel')).removeClass('uniform-placeholder');
				$(this).val("").removeClass('uniform-placeholder');
			}
		});

		// check require fields
		$(form_id + " .require").each(function() {
			$(this).removeClass("uniform-form-invalid");
			//if ($(this).val() == "" || $(this).val() == $(this).attr("rel")) {
			if ($(this).val() == "") {
				$(this).addClass("uniform-form-invalid");
				valid = false;
			}
		});
		if (!valid) {
			$(form_id).uniform();
			return false;
		}

		// check require radio group
		$(form_id + " .require-radio-group").each(function(i, item) {
			$(this).removeClass("uniform-form-invalid");
			if ($("input[type=radio]:checked", item).length < 1) {
				$(this).addClass("uniform-form-invalid");
				valid = false;
			};
		});
		if (!valid) {
			$(form_id).uniform();
			return false;
		}

		// check require checkbox group
		$(form_id + " .require-checkbox-group").each(function(i, item) {
			$(this).removeClass("uniform-form-invalid");
			if ($("input[type=checkbox]:checked", item).length < 1) {
				$(this).addClass("uniform-form-invalid");
				valid = false;
			};
		});
		if (!valid) {
			$(form_id).uniform();
			return false;
		};
		
		$(form_id + " .email").each(function(i, item) {
			$(this).removeClass("uniform-form-invalid");
			var foo = $.trim($(item).val());
			if (foo == "" || !isEmail(foo)) {
				$(this).addClass("uniform-form-invalid");
				valid = false;
			};
		});
		if (!valid) {
			$(form_id).uniform();
		};

		$(form_id + " .numeric").each(function(i, item) {
			$(this).removeClass("uniform-form-invalid");
			var foo = $.trim($(item).val());
			if (foo == "" || !isNumeric(foo)) {
				$(this).addClass("uniform-form-invalid");
				valid = false;
			};
		});
		if (!valid) {
			$(form_id).uniform();
		};

		$(form_id + " .phone").each(function(i, item) {
			$(this).removeClass("uniform-form-invalid");
			var foo = $.trim($(item).val());
			if (foo == "" || !isPhone(foo)) {
				$(this).addClass("uniform-form-invalid");
				valid = false;
			};
		});
		if (!valid) {
			$(form_id).uniform();
		};
		
		//$("#" + form_id + " .x-form-invalid:first").focus();
		//$("#" + form_id + " .x-form-invalid:first").trigger('click');
		return valid;
	}
	
	function isEmail(mail) {
		var mail = $.trim(mail);
		return (mail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1);
	}

	function isNumeric(str) {
		var str = $.trim(str);
		return (str.search(/^[0-9]+$/) != -1);
	}

	function isPhone(str) {
		var str = $.trim(str);
		return (str.search(/^[-#+()0-9]+$/) != -1);
	}
	
	function markup() {
		_this.find(".markup").each(function() {
			$(this).markItUp(mySettings);
			// remove class to prevent re-render again
			$(this).removeClass("markup");
		});
	}
	
	function dropdown() {
		var _id = getID();
		var tpl = '<div id="%(id)s" class="uniform-dropdown-wrapper">';
		tpl += '<span class="inner"><input type="text" name="%(name)s" class="live-query" style="%(style)s" readonly></span><span class="trigger">&nbsp;</span>';
		tpl += '<div class="panel hide">';
		tpl += '<div class="options"></div>';
		tpl += '</div></div>';
		var itemtpl = '<div class="item list-item" rel="%(rel)s"><span class="name">%(name)s</span></div>';

		_this.find('select:visible').each(function() {
			if (!$(this).is('.isDropdown')) {
				var w = $(this).css('width');
				var id = $(this).attr('name') ? 'dd-' + $(this).attr('name') : getID();
				var dd = $(tpl.replace('%(id)s', _id).replace('%(name)s', 'dummy_' + $(this).attr('name')).replace('%(style)s', $(this).attr('style')));
				dd.find("span.trigger").hover(function(){ $(this).addClass("pressed"); }, function(){ $(this).removeClass("pressed"); });
				dd.find("span.trigger").click(function() {
					dd.find("div.panel").toggleClass('hide');
				});
				if (jQuery.browser.msie) {
					dd.find("div.panel").addClass('ie');
				}
				dd.find("input:text").click(function() {
					dd.find("div.panel").toggleClass('hide');
				})
				
				// go though options
				$(this).find('option').each(function() {
					var item = $(itemtpl.replace('%(rel)s', $(this).val()).replace('%(name)s', $(this).text()));
					item.bind("mouseenter mouseleave", function() {
						$(this).toggleClass("hover");
					});
					item.click(function() {
						$("div.item[rel='1']").parent('div').find('.item').removeClass('active')
						$(this).addClass('active');
						dd.find('input:text').val($(this).find('span').text());
						dd.find("div.panel").toggleClass('hide');
						$('#'+id).find('select').val($(this).attr('rel'));
						$('#'+id).find('select').trigger('change');
					});
					dd.find("div.panel div.options").append(item);
				});
				
				// initial value
				dd.find('input:text').val($(this).find('option:selected').text());

				$(this).addClass('isDropdown');
				$(this).before(dd).wrap('<div id="' + id + '" style="position:absolute;top:-9999px;"></div>');
				$("#"+_id).find('.panel').css('min-width', parseInt(w)+30);
				// bgiframe
				//$("#"+id+" .options").bgiframe();
			}
		});
	}
	
	function combo() {
		var tpl = '<div id="%(id)s" class="uniform-dropdown-wrapper combo">';
		tpl += '<span class="inner"><input type="text" id="%(id2)s" name="%(name)s" size="%(size)d" class="live-query" value=""></span><span class="trigger">&nbsp;</span>';
		tpl += '<div class="panel hide">';
		tpl += '<div class="options"><div class="item list-item"><span class="name"></span></div></div>';
		tpl += '</div></div>';
		_this.find(" input:text.combo").each(function() {
			var id = $(this).attr('id') ? $(this).attr('id') : getID();
			var combo = $(tpl.replace('%(id)s', getID()).replace('%(id2)s', id).replace('%(name)s', $(this).attr('name')).replace('%(size)d', $(this).attr('size')));
			combo.find("input:text").attr("rel", $(this).attr("rel"));
			combo.find("span.trigger").bind('mouseenter mouseleave', function(){
				$(this).toggleClass("pressed");
			});
			if (jQuery.browser.msie) {
				combo.find("div.panel").addClass('ie');
			}
			combo.find("span.trigger").click(function() {
				combo.find("div.panel").toggleClass('hide');
			});
			$(this).replaceWith(combo);
		});
		// placeholder
		textbox();
	}
	
	// inputbox with placeholder
	function textbox() {
		_this.find(":text,:password")
			.each(function() {
				$(this).addClass("input-text");
				var val = $.trim($(this).val());
				var rel = $(this).attr("rel");
				if (rel && (val == "" || val == rel)) {
					$(this).val(rel).removeClass('uniform-placeholder').addClass('uniform-placeholder');
				}
			})
			.bind("focus", function() {
				var val = $.trim($(this).val());
				var rel = $(this).attr("rel");
				if (rel && (val == "" || val == rel)) {
					$(this).val('').removeClass('uniform-placeholder');
				}

			})
			.bind("blur", function() {
				var val = $.trim($(this).val());
				var rel = $(this).attr("rel");
				if (rel && (val == "" || val == rel)) {
					$(this).val(rel).removeClass('uniform-placeholder').addClass('uniform-placeholder');
				}
			});
			
		// inline-edit-box
		_this.find('.inline-edit-box').bind('dblclick', function(e) {
			$(this).find('.edit-box').toggleClass('uniform-hide');
			e.stopPropagation();
		});
	}
	
	// handle with buttons
	function button() {
		var tpl = '<div class="button %(cls)s" id="%(id)s" rel="%(rel)s"><span class="button-inner"><span class="label">%(label)s</span></span></div>';
		_this.find("button").each(function() {
			if ($(this).is('.confirm')) {
				var cls = ($(this).is('.white')||$(this).is('.blue')||$(this).is('.capsule')) ? $(this).attr('class') : settings.widget + ' ' + $(this).attr('class');
				var id = $(this).attr('id') ? $(this).attr('id') : getID();
				var rel = $.trim($(this).attr('rel'));
				var button = $('<div class="uniform-button-wrapper"></div>').attr('id', getID());
				
				// confirm button
				var button1 = $(tpl.replace('%(cls)s', cls).replace('%(id)s', id + '_confirm').replace('%(rel)s', rel).replace('%(label)s', $(this).html()));
				button1.removeClass('confirm');
				
				// the real button
				var msg = $(this).attr('rel') ? $(this).attr('rel') : settings.confirmMessage;
				var button2 = $(tpl.replace('%(cls)s', cls).replace('%(id)s', id).replace('%(rel)s', rel).replace('%(label)s', msg)).css('display', 'none');
				button2.removeClass('confirm');

				button.append(button1, button2);
				button1.bind('click', function() {
					var t = $(this);
					t.hide();
					t.parent().find('#'+id).show();
					var timer = setTimeout(function() {
						t.parent().find('#'+id).hide();
						t.show();
					}, settings.confirmTime);
				});

				button1.bind('mouseenter mouseleave', function() {
					$(this).toggleClass("pressed");
				});
				button2.bind('mouseenter mouseleave', function() {
					$(this).toggleClass("pressed");
				});
			}
			else {
				//var cls = $(this).attr('class') ? $(this).attr('class') : settings.widget;
				var cls = ($(this).is('.white')||$(this).is('.blue')||$(this).is('.capsule')) ? $(this).attr('class') : settings.widget + ' ' + $(this).attr('class');
				var id = $(this).attr('id') ? $(this).attr('id') : getID();
				var rel = $.trim($(this).attr('rel'));
				var button = $('<div class="uniform-button-wrapper"></div>').attr('id', getID());
				var button1 = $(tpl.replace('%(cls)s', cls).replace('%(id)s', id).replace('%(rel)s', rel).replace('%(label)s', $(this).html()));

				//if ($(this).is('.submit') || id.indexOf('submit') != -1) {
				if ($(this).is('.submit') || $(this).is('.submit2')) {
					var form = $(this).parents("form");
					if (form.length == 1) {
						form.submit(sendForm);
						button1.bind('click', function() {
							form.submit();
						});
					};
					button1.removeClass('submit');
					button1.removeClass('submit2');
					button1.addClass('uniform-button-submit');
				}

				if (!$(this).is('.disable')) {
					button1.bind('mouseenter mouseleave', function() {
						$(this).toggleClass("pressed");
					});
				}

				button.append(button1);
			}
			$(this).replaceWith(button);
		});
	}
	
	// submit handler
	function sendForm() {
		var form = $(this);
		if (form.is('.normal-form')) {
			// without ajax
			return true;
		};
		form.uniformMsg({msg: ''});
		if (!validForm('#'+form.attr('id'))) {
			return false;
		}
		var bt = form.find('.uniform-button-submit');
		if (bt.is('.disable')) {
			form.uniformMsg({msg: t('Please wait...')});
			return false;
		};
		//$(".uniform-button-wrapper div").addClass('disable');
		bt.removeClass('disable').addClass('disable');
		form.uniformMsg({msg: t('Please wait...')});
		form.ajaxSubmit({type: 'post', dataType: 'json', clearForm: false, resetForm: false,
			success: function(result, status) {
				if (result.success) {
					//$(this).hide();
					form.uniformMsg({msg: result.error});
				}
				else {
					form.uniformMsg({msg: result.error, cls: 'error'});
					form.find('.uniform-button-submit').removeClass('disable');
				}
				// call form callback
				var f = eval('settings.cb_' + form.attr('id').replace('-', '_'));
				if (f) {
					f(result, status);
				}
			}
		});
		return false;
	}
})(jQuery);