/**
* @package Helix3 Framework
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2020 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
*/

jQuery(function($) {

	$(document).ready(function(){

		$(this).find('select').each(function(){
			$(this).chosen('destroy');
		});

	});//end ready

	/* ----------   Load existing template   ------------- */
	$('.form-horizontal').on('click', '.layout-del-action', function(event) {
		event.preventDefault();

		var $that = $(this),
		layoutName = $(".layoutlist select").val(),
		data = {
			action : $that.data('action'),
			layoutName : layoutName
		};

		if ( confirm("Click Ok button to delete "+layoutName+", Cancel to leave.") != true ){
			return false;
		}

		if ( data.action != 'remove' ){
			alert('You are doing somethings wrong.');
		}

		var request = {
			'option' : 'com_ajax',
			'plugin' : 'helix3',
			'data'   : data,
			'format' : 'json'
		};

		$.ajax({
			type   : 'POST',
			data   : request,
			beforeSend: function(){
				$('.layout-del-action .fa-spin').show();
			},
			success: function (response) {
				var data = $.parseJSON(response.data),
				layouts = data.layout,
				tplHtml = '';

				$('#jform_params_layoutlist').find('option').remove();
				if (layouts.length) {
					for (var i = 0; i < layouts.length; i++) {
						tplHtml += '<option value="'+ layouts[i] +'">'+ layouts[i].replace('.json','')+'</option>';
					}

					$('#jform_params_layoutlist').html(tplHtml);
				}

				$('.layout-del-action .fa-spin').fadeOut('fast');
			},
			error: function(){
				alert('Somethings wrong, Try again');
				$('.layout-del-action .fa-spin').fadeOut('fast');
			}
		});
		return false;
	});

	// Save new copy of layout
	$('.form-horizontal').on('click', '.layout-save-action', function(event) {
		$('#layout-modal').find('.sp-modal-body').empty();
		$('#layout-modal .sp-modal-title').text('Save New Layout');
		$('#layout-modal #save-settings').data('flag', 'save-layout');

		var $clone = $('.save-box').clone(true);
		$('#layout-modal').find('.sp-modal-body').append( $clone );

		$('#layout-modal').spmodal();
	});

	// load layout from file

	$(".layoutlist select").chosen().change(function(){
		var $that = $(this),
		layoutName = $that.val(),
		data = {
			action : 'load',
			layoutName : layoutName
		};

		if ( layoutName == '' || layoutName == ' ' ){
			alert('You are doing somethings wrong.');
		}

		var request = {
			'option' : 'com_ajax',
			'plugin' : 'helix3',
			'data'   : data,
			'format' : 'raw'
		};

		$.ajax({
			type   : 'POST',
			data   : request,
			dataType: "html",
			beforeSend: function(){
			},
			success: function (response) {
				$('#helix-layout-builder').empty();
				$('#helix-layout-builder').append(response).fadeIn('normal');
				jqueryUiLayout();
			}
		});
		return false;
	});

	/*********   Lyout Builder JavaScript   **********/

	jqueryUiLayout();

	function jqueryUiLayout()
	{
		$( "#helix-layout-builder" ).sortable({
			placeholder: "ui-state-highlight",
			forcePlaceholderSize: true,
			axis: 'y',
			opacity: 0.8,
			tolerance: 'pointer'

		}).disableSelection();

		$('.layoutbuilder-section').find('.row').rowSortable();
	}

	// setInputValue Callback Function
	$.fn.setInputValue = function(options){
		if (this.attr('type') == 'checkbox') {
			if (options.filed == '1') {
				this.attr('checked','checked');
			}else{
				this.removeAttr('checked');
			}
		}else if(this.hasClass('input-media')){
			if(options.filed){
				$imgParent = this.parent('.media');
				console.log($imgParent);
				$imgParent.find('img.media-preview').each(function() {
					$(this).attr('src',layoutbuilder_base+options.filed);
				});
			}
			this.val( options.filed );
		}else{
			this.val( options.filed );
		}

		if (this.data('attrname') == 'column_type'){
			if (this.val() == 'component') {
				$('.form-group.name').hide();
			}
		}
	}

	// callback function, return checkbox value
	$.fn.getInputValue = function(){
		if (this.attr('type') == 'checkbox') {
			if (this.attr("checked")) {
				return '1';
			}else{
				return '0';
			}
		}else{
			return this.val();
		}
	}

	// color picker initialize
	$.fn.initColorPicker = function(){
		this.find('.minicolors').each(function() {
			$(this).minicolors({
				control: 'hue',
				position: 'bottom',
				theme: 'bootstrap'
			});
		});
	}

	// Open Row settings Modal
	$(document).on('click', '.row-ops-set', function(event){
		event.preventDefault();

		$('.layoutbuilder-section').removeClass('row-active');
		$parent = $(this).closest('.layoutbuilder-section');
		$parent.addClass('row-active');

		$('#layout-modal').find('.sp-modal-body').empty();
		$('#layout-modal .sp-modal-title').text('Row Settings');
		$('#layout-modal #save-settings').data('flag', 'row-setting');

		var $clone = $('.row-settings').clone(true);
		$clone.find('.sppb-color').each(function(){
			$(this).addClass('minicolors');
		});

		$clone = $('#layout-modal').find('.sp-modal-body').append( $clone );

		$clone.find('.addon-input').each(function(){
			var $that = $(this),
			attrValue = $parent.data( $that.data('attrname'));
			$that.setInputValue({filed: attrValue});
		});

		$clone.initColorPicker();

		$('#layout-modal').randomIds();

		$clone.find('select').chosen({
			allow_single_deselect: true
		});

		$('#layout-modal').spmodal();
	});

	// Open Column settings Modal
	$(document).on('click','.col-ops-set',function(event) {
		event.preventDefault();

		$('.layout-column').removeClass('column-active');
		$parent = $(this).closest('.layout-column');
		$parent.addClass('column-active');

		$('#layout-modal').find('.sp-modal-body').empty();
		$('#layout-modal .sp-modal-title').text('Column Settings');
		$('#layout-modal #save-settings').data('flag', 'col-setting');

		var $clone = $('.column-settings').clone(true);
		$clone.find('.sppb-color').each(function(){
			$(this).addClass('minicolors');
		});

		$clone = $('#layout-modal').find('.sp-modal-body').append( $clone );
		var comFlug = false;
		$clone.find('.addon-input').each(function(){
			var $that = $(this),
			$attrname = $that.data('attrname'),
			attrValue = $parent.data($attrname);

			if ( $attrname == 'column_type' && attrValue == '1' ) {
				comFlug = true;
			}else if($attrname == 'name' && comFlug == true){
				$that.closest('.form-group').slideUp('fast');
			}

			$that.setInputValue({filed: attrValue});
		});

		$clone.initColorPicker();

		$clone.find('select').chosen({
			allow_single_deselect: true
		});

		$('#layout-modal').randomIds();
		$('#layout-modal').spmodal();
	});


	$('.input-column_type').change(function(event) {

		var $parent = $(this).closest('.column-settings'),
		flag = false;

		$('#helix-layout-builder').find('.layout-column').not( ".column-active" ).each(function(index, val) {
			if ($(this).data('column_type') == '1') {
				flag = true;
				return false;
			}
		});

		if (flag) {
			alert('Component Area Taken');
			$(this).prop('checked',false);
			$parent.children('.form-group.name').slideDown('400');
			return false;
		}

		if ($(this).attr("checked")) {
			$parent.children('.form-group.name').slideUp('400');
		}else{
			$parent.children('.form-group.name').slideDown('400');
		}
	});

	// Save Row Column Settings
	$(document).on('click', '#save-settings', function(event) {
		event.preventDefault();

		var flag = $(this).data('flag');

		switch(flag){
			case 'row-setting':
			$('#layout-modal').find('.addon-input').each(function(){
				var $this = $(this),
				$parent = $('.row-active'),
				$attrname = $this.data('attrname');
				$parent.removeData( $attrname );

				if ($attrname == 'name') {
					var nameVal = $this.val();

					if (nameVal  !='' || $this.val() != null) {
						$('.row-active .section-title').text($this.val());
					}else{
						$('.row-active .section-title').text('Section Header');
					}
				}

				$parent.attr('data-' + $attrname, $this.getInputValue());
			});
			break;

			case 'col-setting':
			var component = false;

			$('#layout-modal').find('.addon-input').each(function(){

				var $this = $(this),
				$parent = $('.column-active'),
				$attrname = $this.data('attrname');
				$parent.removeData( $attrname ),
				dataVal = $this.val();

				if ( $attrname == 'column_type' && $(this).attr("checked") ) {
					component = true;
					$('.column-active .col-title').text('Component');
				}else if( $attrname == 'name' && component != true ) {
					if (dataVal == '' || dataVal == undefined) {
						dataVal = 'none';
					}
					$('.column-active .col-title').text(dataVal);
				}

				$parent.attr('data-' + $attrname, $this.getInputValue());
			});
			break;

			case 'save-layout':
			var layoutName = $('#layout-modal .addon-input').val(),
			data = {
				action : 'save',
				layoutName : layoutName,
				content: JSON.stringify(getGeneratedLayout())
			};

			if (layoutName =='' || layoutName ==' ') {
				alert("Without Name Layout Can't be save");
				return false;
			}

			var request = {
				'option' : 'com_ajax',
				'plugin' : 'helix3',
				'data'   : data,
				'format' : 'json'
			};

			$.ajax({
				type   : 'POST',
				data   : request,
				beforeSend: function(){
				},
				success: function (response) {
					var data = $.parseJSON(response.data),
					layouts = data.layout,
					tplHtml = '';

					$('#jform_params_layoutlist').find('option').remove();
					if (layouts.length) {
						for (var i = 0; i < layouts.length; i++) {
							tplHtml += '<option value="'+ layouts[i] +'">'+ layouts[i].replace('.json','')+'</option>';
						}

						$('#jform_params_layoutlist').html(tplHtml);
					}
				},
				error: function(){
					alert('Somethings wrong, Try again');
				}

			});
			break;

			default:
			alert('You are doing somethings wrongs. Try again');
		}
	});

	// Column Layout Arrange
	$(document).on('click', '.column-layout', function(event) {
		event.preventDefault();

		var $that = $(this),
		colType = $that.data('type'), column;

		if ($that.hasClass('active') && colType != 'custom' ) {
			return;
		};



		if (colType == 'custom') {
			column = prompt('Enter your custom layout like 4,2,2,2,2 as total 12 grid','4,2,2,2,2');
		}

		var $parent 		= $that.closest('.column-list'),
		$gparent 		= $that.closest('.layoutbuilder-section'),
		oldLayoutData 	= $parent.find('.active').data('layout'),
		oldLayout       = ['12'],
		layoutData 		= $that.data('layout'),
		newLayout 		= ['12'];

		if (oldLayoutData !=12) {
			oldLayout = oldLayoutData.split(',');
		}

		if(layoutData != 12 ){
			newLayout = layoutData.split(',');
		}

		if ( colType == 'custom' ) {
			var error 	= true;

			if ( column != null ) {
				var colArray = column.split(',');

				var colSum = colArray.reduce(function(a, b) {
					return Number(a) + Number(b);
				});

				if ( colSum == 12 ) {
					newLayout = colArray;
					$(this).data('layout', column)
					error = false;
				}
			}

			if (error) {
				alert('Error generated. Please correct your column arragnement and try again.');
				return false;
			}
		}

		var col = [],
		colAttr = [];

		$gparent.find('.layout-column').each(function(i,val){
			col[i] = $(this).html();
			var colData = $(this).data();

			if (typeof colData == 'object') {
				colAttr[i] = $(this).data();
			}else{
				colAttr[i] = '';
			}
		});

		$parent.find('.active').removeClass('active');
		$that.addClass('active');

		var new_item = '';

		for(var i=0; i < newLayout.length; i++)
		{
			var dataAttr = '';
			if (typeof colAttr[i] == 'object') {
				$.each(colAttr[i],function(index,value){
					dataAttr += ' data-'+index+'="'+value+'"';
				});
			}

			new_item +='<div class="layout-column col-sm-'+ newLayout[i].trim() +'" '+dataAttr+'>';
			if (col[i]) {
				new_item += col[i];
			}else{
				new_item += '<div class="column"> <h6 class="col-title pull-left">None</h6> <a class="col-ops-set pull-right" href="#" ><i class="fa fa-gears"></i></a></div>';
			}
			new_item +='</div>';
		}

		$old_column = $gparent.find('.layout-column');
		$gparent.find('.row.ui-sortable').append( new_item );

		$old_column.remove();
		jqueryUiLayout();
	});

	// add row
	$(document).on('click','.add-row',function(event){
		event.preventDefault();

		var $parent = $(this).closest('.layoutbuilder-section'),
		$rowClone = $('#layoutbuilder-section').clone(true);

		$rowClone.addClass('layoutbuilder-section').removeAttr('id');
		$($rowClone).insertAfter($parent);

		jqueryUiLayout();
	});

	// Remove Row
	$(document).on('click', '.remove-row', function(event){
		event.preventDefault();

		if ( confirm("Click Ok button to delete Row, Cancel to leave.") == true )
		{
			$(this).closest('.layoutbuilder-section').slideUp(500, function(){
				$(this).remove();
			});
		}
	});

	// Remove Media
	$(document).on('click','.remove-media',function(){
		var $that = $(this),
		$imgParent = $that.parent('.media');

		$imgParent.find('img.media-preview').each(function() {
			$(this).attr('src','');
			$(this).closest('.image-preview').css('display', 'none');
		});
	});

	// Generate Layout JSON

	function getGeneratedLayout(){
		var item = [];
		$('#helix-layout-builder').find('.layoutbuilder-section').each(function(index){
			var $row 		= $(this),
			rowIndex 	= index,
			rowObj 		= $row.data();
			delete rowObj.sortableItem;

			var activeLayout 	= $row.find('.column-layout.active'),
			layoutArray 	= activeLayout.data('layout'),
			layout = 12;

			if( layoutArray != 12){
				layout = layoutArray.split(',').join('');
			}

			item[rowIndex] = {
				'type'  	: 'row',
				'layout'	: layout,
				'settings' 	: rowObj,
				'attr'		: []
			};

			// Find Column Elements
			$row.find('.layout-column').each(function(index) {

				var $column 	= $(this),
				colIndex 	= index,
				className 	= $column.attr('class'),
				colObj 		= $column.data();
				delete colObj.sortableItem;

				item[rowIndex].attr[colIndex] = {
					'type' 				: 'sp_col',
					'className' 		: className,
					'settings' 			: colObj
				};

			});
		});

		return item;
	}

	//On Submit
	document.adminForm.onsubmit = function(event){

		//Webfonts
		$('.webfont').each(function(){
			var $that = $(this),
			webfont = {
				'fontFamily' : $that.find('.list-font-families').val(),
				'fontWeight' : $that.find('.list-font-weight').val(),
				'fontSubset' : $that.find('.list-font-subset').val(),
				'fontSize'	: $that.find('.webfont-size').val()
			}

			$that.find('.input-webfont').val( JSON.stringify(webfont) )

		});

		//Generate Layout
		$('#jform_params_layout').val( JSON.stringify(getGeneratedLayout()) );
	}

});