/**
 * Plani javascript Helper
 *
 * jquery 3.1.0
 *
 * @package	Plani javascript Helper
 * @author	kim seung beom
 * @copyright	Copyright (c) 2016, Plani, Inc.
 * @link	http://plani.co.kr
 * @since	 Version 2.0
 * @filesource
 */
 $.fn.hook = function(){
	var self = $(this);

	$('[helper]', self)
		.each(function(){
			var obj = $(this),
				call = $(this).attr('helper'),
				extend_func_name = 'helper_%s'.sprintf(call);						
				
			try {
				obj.func=$.fn[extend_func_name];
				obj.func();
			}
			catch (e) {
				console.log('error function : ' + extend_func_name);
				console.log(e);
			}
		});

	$('[class^=pi-form-]', self)
		.each(function(){
			var obj = $(this),
				class_split = $(this).attr('class').split(' ');

			for( var i=0; i<class_split.length; i++ ) {
				if( class_split[i].indexOf('pi-form-') == 0 ){
					var call=class_split[i].replace('pi-form-', 'ui_').replace('-', '_'),
						extend_func_name = call;

					try {
						obj.func=$.fn[extend_func_name];
						obj.func();
					}
					catch (e) {
						console.log('undefined function : ' + extend_func_name);
					}
				}
			}
		});
}

$.fn.keyenter = function( event ){
	$(this)
		.on('keydown', function( e ){
			if( e.which == 13 ) { 
				if( typeof event == 'function' ) {
					event();
				} else if( typeof event == 'string' ) {
					$(this).trigger(event);
				}else {
					e.preventDefault();			
				}

				return false;
			}
		});

	return $(this);
}

$.fn.ui_select = function(){
	$(this)
		.each(function(){	
			var obj = $(this),
				multiple = $(this).prop('multiple'),
				width = obj.width(),
				select = $('<article class=\'pi-form-select-wrap\'><div class=\'opt-btn\' tabindex=\'0\'><span></span><i class=\'fa fa-chevron-down opt-arrow\' aria-hidden=\'true\'></i></div></article>'),
				input = $('<input />', { 'type' : 'text', 'placeholder' : __('검색') }),
				opt = $('<ul class=\'pi-form-select-options\'></ul>'),
				update = function(){
					if( multiple == true ){
						var length = $(':checked', opt).length,
							first = $(':checked:eq(0)', opt).closest('label').text();						

						$('span', select).html( length == 1 ? '<span class="block">%s</span> %s '.sprintf(first, __('선택됨')) : ( length > 1 ? '<span class="block">%s</span> %s %s %s'.sprintf(first, __('외'), length-1, __('선택됨')) : length + __('선택됨') ) );
					}else {
						$('span', select).html( $("option:selected", obj).length > 0? $("option:selected", obj).text() : $("option:eq(0)", obj).text() );
					}
				}

			obj.find('option')
				.each(function(){
					var html=multiple==true && this.value !=''? '<label><input type=checkbox ' +(this.selected == true ? 'checked' : '')+ ' value="' +this.value+ '" />' +this.text+ '</label>' : (multiple==true && this.value == '' ? '<a class="opt-all choice">[' + __('전체선택') + ']</a> <a class="opt-all cancel">[' + __('전체선택취소') + ']</a>' : this.text);
					if( this.value != '' || multiple==true ) {
						opt.append($('<li />', { 'tabindex' : 0, 'aix_value' : this.value, 'class' : multiple==true && this.value == ''  ? 'all' : '' }).html(html))
					}
				});

			select.css('min-width', width+13)
			if( obj.find('option').length > 6 ) {
				select.append(input);
				opt.css('top', 60)
			}
			select.append(opt);

			obj.hide().after(select);

			update();

			$('.opt-btn', select)
				.on('click', function(){
					$('.pi-form-select-wrap').css('z-index',  10);
					select.css('z-index',  50);
					$('input[type=text], ul', select).toggle();
				})
				.keyenter('click');

			$('li', opt)
				.on('click', function( e ){
					var val = $(this).attr('aix_value');

					if( multiple == true ){
						if( val == '' ) {
							return false;
						}
						$('option[value=' +val+ ']', obj).prop('selected', $(':checkbox', this).prop('checked'));
					}else{
						$('option[value=' +val+ ']', obj).prop('selected', true);
						$('input[type=text], ul', select).toggle();
					}
					update();
					obj.trigger('change');
				})
				.keyenter('click');

			$('.choice', opt)
				.on( 'click', function(){
					$('input[type=checkbox]', opt).prop('checked', true).closest('li').trigger('click')
					update();
				});

			$('.cancel', opt)
				.on('click', function(){
					$('input[type=checkbox]', opt).prop('checked', false).closest('li').trigger('click')
					update();
				});

			input.keyenter()
				.on( 'keyup', function(){	
						var lis = $('li', opt),
							match = 0,
							val = this.value;

						$('.opt-empty', opt).remove();

						if(val == ''){
							lis.show();
						}else{
							lis
								.each(function(){
										if( $(this).text().indexOf(val) > -1 ){
											$(this).show();
											match++;
										}else{
											$(this).hide();
										}
								});

							if( match == 0 ){
								opt.append('<li class=\'opt-empty\'>' +__('검색 결과가 없습니다')+ '</li>');
							}
						}
					});

			$.window
				.on('click', function(e){
					if( $(e.target).closest(select).length == 0 ) {
						$('input[type=text], ul', select).hide();
					}
				});
		})
}

$.fn.ui_checkbox = function(){
	$(this)
		.each(function(){	
			var obj=$(this);

			obj.after('<i></i>').parent().addClass('pi-form-label-box checkbox')
		});
}

$.fn.ui_radio = function(){
	$(this).ui_checkbox();
}

$.fn.ui_switch = function(){
	$(this)
		.each(function(){	
			var obj = $(this);

			obj.after('<i class=\'xi-switch-off pi-form-switch-btn\' aria-hidden=\'true\'></i>')
				.on( 'change', function(){
					if( this.checked == true ) {
						obj.next().removeClass('xi-switch-off').addClass('xi-switch-on');
					} else {
						obj.next().removeClass('xi-switch-on').addClass('xi-switch-off');
					}
				})
				.trigger('change')
		});
}

$.fn.ui_switch_classic = function(){
	$(this)
		.each(function() {
			var obj = $(this),
				span = obj.closest('label').find('span'),
				controll = $('<ul />', {'class' : 'pi-form-switch-wrap'}).html("<span class='block' tabindex='0'></span><li class='sw on'>YES</li><li class='sw off'>NO</li><li class='txt'>" +span.text()+ "</li>"),
				block = $('.block', controll);
			
			span.remove();
			obj.after(controll)
				.on( 'change', function(){
					block.stop().animate({'left' : this.checked == true? 40 : 0}, 'fast');
				})
				.trigger('change');

			block
				.keyenter(function(){
					obj.trigger('click');
				});
		});
}

$.fn.ui_swap = function( params, callback ){
	var params = $.extend(
		{ 'Yes' : ['TEXT', "RGB16"], 'No' : ['TEXT', "RGB16"] }, params
	);

	$(this)
		.each(function(){
			var obj = $(this),
				text = obj.text().trim(),
				icons = typeof params[text] != 'undefined' ? params[text] : ['<i class=\'fa fa-question-circle-o\'></i>', '#444'];

			obj.attr('value', text)
				.css('color', icons[1])
				.html(icons[0])
				.on( 'click', function(){
					if( typeof this.href != 'undefined' ) {
						var form=$(this).closest('form');

						obj.html('<i class=\'fa fa-spinner fa-spin font20\'></i>');
						$.request( { 'url' : this.href, param : form.serialize() + '&value=' + obj.attr('value') },  function(text) {
							icons=typeof params[text] != 'undefined' ? params[text] : ['<i class=\'fa fa-question-circle-o\'></i>', '#444'];
							obj.attr('value', text).css('color', icons[1]).html(icons[0]);

							if( typeof callback == 'function' ){
								callback(obj, text);
							}
						});
					}

					return false;
				});
		});
}

$.fn.helper_datepicker = function( params ) {
	var params =$.extend(
		{ dateFormat : 'yy-mm-dd', timeFormat: null, changeMonth: true, changeYear: true, regional : 'ko', minDate : null, maxDate : null, yearRange : 'c-60:c+10', skin : 'basic' }, params
	);

	$(this)
		.each(function() {
			var obj = $(this),
				obj_params = $.extend(params, obj.data());

			if( obj.hasClass('hasDatepicker') == true ) {
				obj.removeClass('hasDatepicker').removeAttr('id');
			} else {
				if( obj_params.skin == 'basic' ) {
					obj.addClass('right-import-input');

					$('<button />', {'type' : 'button', 'class' : 'pi-btn pi-icon month right-import'} )
						.insertBefore(obj)
						.on('click', function(){
							obj.focus();
						});						
				} else {
					obj.after('<span class="pi-icon month pi-helper-datepicker-icon hidden2"></span>')				
				}
			}

			if( obj_params.timeFormat != null ) {
				obj.datetimepicker(obj_params);
			}else {
				obj.datepicker(obj_params);
			}

			obj
				.on( 'blur', function(){
					if( this.value.isdate() == false && this.value !='' ){
						obj.attr('placeholder', 'Not the date format.').val('');
					}else{
						// obj.attr('placeholder', '');
						obj.attr('placeholder', obj.attr('placeholder'));
					}
				});
		});
}

$.fn.helper_datepicker_classic = function( params ) {
	$(this).helper_datepicker(
		{'skin' : 'classic'}
	);
}


$.fn.helper_colorpicker = function(){
	if( $('#colorpicker').length == 0 ){
		color_layer = $('<span />', { 'class' : 'pi-helper-colorpicker', 'id' : 'colorpicker' }).appendTo('body');
	}else{
		color_layer = $('#colorpicker');
	}

	$(this)
		.each(function(){	
			var obj = $(this);

			obj.addClass('pi-helper-colorpicker-input cursor-hand')
				.attr('readonly', true)
				.css({'background-color' : obj.val()})
				.on( 'click', function(){
					var offset = obj.offset(), 
						width=obj.innerWidth(), 
						height=obj.outerHeight(),
						colorpicker=$.farbtastic('#colorpicker');

					colorpicker.linkTo(obj[0]);
					colorpicker.linkTo(function(color){
						var font_color=colorpicker.hsl[2]>0.5 ? '#000000' : '#ffffff';
						obj.val(color).css({'background-color' : color, 'color' : font_color});
					});

					$('.sl-marker', color_layer).one
					(
						'mouseup', function(){
							color_layer.fadeOut();
						}
					);

					color_layer.css({'left' :(offset.left+width+20), 'top' : (offset.top-80)}).fadeIn();
				});
		});
}

$.fn.helper_tooltip = function( params ){
	var params =$.extend(
		{ color : '', message : '', open : false, form_element : false }, params
	);

	$(this)
		.each(function(){
			var obj = $(this),
				message = params.message || obj.attr('title'),
				tip_layer = this.tip_layer || $('<span />', { 'class' : 'pi-helper-tooltip %s'.sprintf(params.color) }).html('<div class="triangle"></div><div class="message"></div>').appendTo('body')

				this.tip_layer = tip_layer;

				obj.addClass('cursor-hand')
					.on('mouseenter focus focus_event',  function(e) {
						var offset = obj.offset(), 
							width = obj.innerWidth(), 
							height = obj.outerHeight();

						if( typeof obj.data('tooltip-title') == 'undefined' ) {
							obj.data('tooltip-title', message);
							obj.removeAttr('title');
						}

						if( obj.data('tooltip-title') != '' ) {
							var left=offset.left;
							var top=offset.top;	

							$('.message', tip_layer).html(obj.data('tooltip-title'));
							tip_layer.css({'left' : left - (tip_layer.width() / 2) + (width / 2), 'top' : top+( (tip_layer.height() + 10)*-1 ) }).fadeIn();
						}
					})
					.on('mouseleave blur', function(e) {
						tip_layer.stop().hide();
					});

				if( params.form_element == true ) {
					obj.off('mouseenter mouseleave');
				}

				if( params.open == true ) {
					obj.trigger('focus_event');
				}
		});
}

$.fn.helper_number = function( params ){
	var params =$.extend(
		{ min : -1000000, max : 1000000, comma : false }, params
	);

	$(this)
		.each(function(){
			var obj = $(this);

			obj.css('ime-mode', 'disabled')
				.on('keydown', function(e){
					var keycode=e.keyCode;
					if( e.ctrlKey == true && keycode == 86 )
						return true;

					if( new String('/8/9/16/35/36/37/39/46/109/189/110/190').split('/'+keycode.toString()+'/').length == 2 )
						return true;

					if( keycode >= 48 && keycode <= 57 )
						return true;

					if( keycode >= 96 && keycode <= 105 )
						return true;

					return false;
				})
				.on('keyup', function(){
					var num_val = this.value.split(',').join('');
						val = parseInt(num_val);

					if( this.value != '-' ) {
						if( isNaN(num_val) == true ){
							num_val = 0;
						}

						if( val < params.min )
							num_val = params.min;

						if( val > params.max )
							num_val = params.max;

						if( params.comma == true )
							num_val = num_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
					}

					this.value = num_val;
				})
				.on('focusout', function() {
					if( this.value == '-' || this.value == '' ){
						this.value = 0;
					}
				});
		}
	)
}

$.fn.helper_number_comma = function( params ) {
	var params =$.extend(
		{ max : 10000000000, comma : true }, params
	);

	$(this).helper_number(params);
}

$.fn.helper_clone = function( params ) {
	var params =$.extend(
		{ }, params
	);

	$(this)
		.each(function(){
			var obj = $(this),
				lis = $('li', obj)

			obj.addClass('pi-helper-clone')
				.sortable({
					forcePlaceholderSize	: true,
					placeholder	: 'placeholder',
					items : 'li',
					opacity: .8,
					//revert: 250,
					tabSize: 25,
					axis: 'y',
					start	 : function (e, ui) {
						$(ui.helper).addClass('draging');
					},
					stop	: function (e, ui) {	
						$('.draging').removeClass('draging');
					}
				});

			lis.append('<a href="#" class="plus prefix-input"><i class="fa fa-plus"></i></a><a href="#" class="minus prefix-input"><i class="fa fa-minus"></i></a>');
			obj
				.delegate('.plus', 'click', function(){
					var li = $(this).closest('li'),
						copy = li.clone();

					copy.attr('class', '').find('input[type=text], input[type=hidden], textarea, select').attr('readonly', false).val('');
					copy.hook();
					li.after(copy.hide().fadeIn());

					return false;
				})
				.delegate('.minus', 'click', function(){
					var li = $(this).closest('li');

					if( confirm(__('삭제 하시겠습니까?')) == true ){
						li.fadeOut(function(){
							$(this).remove();
						});
					}

					return false;
				});
		});
}

$.fn.helper_disabled = function( params ){
	var params =$.extend(
		{ target : null }, params
	);	

	$(this)
		.each(function(){
			var obj = $(this), 
				prev = params.target || ( obj.parent().get(0).tagName == 'LABEL' ?  obj.parent().prev() : obj.prev() );

			obj
				.on('click', function(){
					prev.prop('disabled', !this.checked).focus();
				});
		});
}	
	

$.fn.helper_ajax = function( params ){
	var params =$.extend(
		{  url : null, 
		   callback : function(target, data) {
				var container=target.next().hasClass('pi-helper-ajax-result') == true ? target.next() : $('<span />', {'class' : 'pi-helper-ajax-result'}).insertAfter(target);
				container.html(data);
		   } 
		}, 
		params
	);

	$(this)
		.each(function(){
			var obj = $(this), 
				url = params.url || obj.attr('helper-url'),
				form = obj.closest('form');

			obj
				.on('keyup', function(){
					$.request( { 'url' : url, param : form.serialize() }, function(data) {
						params.callback(obj, data);
					});
				});
		});
}
	
$.fn.helper_submit = function(){
	$(this)
		.each(function(){
			var obj = $(this), 
				form = obj.closest('form');

			obj
				.on('change', function(){
					form.submit();
				})
		})
}