/**
 * 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(){
	$('[helper]', $(this)).each
	(
		function(){
			var target =$(this),
				call = $(this).attr('helper'),
				extend_func_name = 'helper_%s'.sprintf(call);						
				
			try {
				target.func=$.fn[extend_func_name];
				target.func();
			}
			catch (e){
				console.log('error function : ' + extend_func_name);
				console.log(e);
			}
		}
	);

	$('[class^=pi-form-]', $(this)).each
	(
		function(){
			var target =$(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 {
						target.func=$.fn[extend_func_name];
						target.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, __('선택됨6')) : 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');

					console.log(val);

					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(){
	var obj = $(this);

	obj.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>');
			obj.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);
			obj.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]);
			obj.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', changeMonth: true, changeYear: true, regional : 'ko', minDate : null, maxDate : null, yearRange : 'c-60:c+10' }, params
	);

	$(this).each
	(
		function(){
			var obj = $(this), 
				button = $('<button />', {'type' : 'button', 'class' : 'pi-btn pi-icon month right-import'} ); 
			
			try {
				if( obj.hasClass('hasDatepicker') == true ) {
					obj.removeClass('hasDatepicker').removeAttr('id');
				}else{
					button.insertBefore(obj).on
					(
						'click', function(){
							obj.focus();
						}
					);				
				}

				obj.datepicker(params);
				obj.addClass('right-import-input').on
				(
					'change', function(){
						if( this.value.isdate() == false && this.value !='' ){
							obj.attr('placeholder', 'Not the date format.').val('');
						}else{
							obj.attr('placeholder', '');
						}
					}
				)
			}catch(e) {
			}		
		}
	)
}

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

	$(this).each
	(
		function(){
			var obj = $(this);
			if( obj.hasClass('hasDatepicker') == true ) {
				obj.removeClass('hasDatepicker').removeAttr('id')
			}else{
				obj.after('<span class="pi-icon month pi-helper-datepicker-icon hidden2"></span>')
			}

			if( this.value.indexOf(':') > -1 ){
				obj.datetimepicker(
					params
				);
			}else {
				obj.datepicker(
					params
				);			
			}

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

		}
	)
}


$.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 : '0', max : 1000000, comma : false }, params
	);

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

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

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

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

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


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

					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;
				}				
			);
		}
	)
}

$.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();
				}
			)
		}
	)
}