$(document).on('ready', function(){
	layout_construct();
	$('table.layout_config tbody tr').hover(
		function(){
			var class_panel = $(this).closest('tr').find('input[name="panel_name"]').val();
			var panel = $('div.layout_preview_container div.panel_container.'+class_panel);

			panel.addClass('hover');
		},
		function()
		{
			$('div.layout_preview_container div.panel_container').removeClass('hover');
		}
	);

    $('table.layout_logged_config tbody tr').hover(
        function(){
            var class_panel = $(this).closest('tr').find('input[name="panel_name"]').val();
            var panel = $('div.layout_logged_preview_container div.panel_container.'+class_panel);

            panel.addClass('hover');
        },
        function()
        {
            $('div.layout_logged_preview_container div.panel_container').removeClass('hover');
        }
    );

    check_width_screen();
    $( window ).resize(function() {
        check_width_screen();
    });
});

function check_width_screen()
{
	var html_separator = '<div class="separator_layout"></div>';

	var selectors = ['layout_config', 'layout_logged_config'];

    $.each(selectors, function( index, selector ) {
    	var selector_layout = selector == 'layout_config' ? 'layout_preview_container' : 'layout_logged_preview_container';

        var table = $('table.'+selector);
        var container_table = table.closest('div.col-md-4');
        container_table.removeClass('fullwidth');

        var layout_preview = $('div.'+selector_layout);
        var layout_container = layout_preview.closest('div.col-md-8');
        layout_container.removeClass('fullwidth');

        if(table.width() > container_table.width())
        {
            container_table.addClass('fullwidth');
            layout_container.addClass('fullwidth');
        }
	});
}
function layout_construct()
{
	var layout_columns = parseInt($('select[name="poc_layout_columns"]').val());
	layout_put_columns(layout_columns, 'layout_preview_container');
	layout_insert_panels('layout_preview_container');

    var layout_columns = parseInt($('select[name="poc_layout_logged_columns"]').val());
    layout_put_columns(layout_columns, 'layout_logged_preview_container');
    layout_insert_panels('layout_logged_preview_container');
}

function layout_put_columns(num_cols, selector)
{
	var add_logged = selector == 'layout_logged_preview_container';

	$('div.'+selector+' div.column_layout').hide();
	for (var i = 1; i <= num_cols; i++) {
		var col = $('div.'+selector+' div.column_layout.col_'+i);
		var current_col_span = col.data('colspan');
		var col_span = $('select[name="poc_layout_'+(add_logged ? 'logged_' : '')+'columns_size_'+i+'"]').val();

		if(current_col_span)
			col.removeClass('col-md-'+current_col_span);

		$(col.addClass('col-md-'+col_span));
		col.data('colspan', col_span);
		col.show();
	}
    insert_column_titles(selector);
}

function layout_insert_panels(selector)
{
    var add_logged = selector == 'layout_logged_preview_container';

	var layout_preview_container = $('div.'+selector);

	//Clean panels
	layout_preview_container.find('div.column_layout').html('');

	var table = $('table.layout'+(add_logged ? '_logged':'')+'_config');

	table.find('tbody tr').each(function(){
		var config_name = $(this).find('input[name="panel_name"]').val();
		var config_title = $(this).find('input[name="panel_title"]').val();

		var status = $(this).find('input[name="poc_layout'+(add_logged ? '_logged':'')+'['+config_name+'][status]"]').is(':checked');
		if(status)
		{
			var colum = $(this).find('select[name="poc_layout'+(add_logged ? '_logged':'')+'['+config_name+'][col_position]"]').val();
			var col_span = $(this).find('select[name="poc_layout'+(add_logged ? '_logged':'')+'['+config_name+'][cols]"]').val();

			var panel = _construct_panel(config_name, config_title, col_span);
			layout_preview_container.find('div.column_layout.col_'+colum).append(panel);
		}
	});

	insert_column_titles(selector);
}

function _construct_panel(type, title, col_span)
{
	return `
		<div class="col-md-`+col_span+` panel_container `+type+`">
			<div class="panel panel-default">
				<div class="panel-heading">`+_get_panel_icon(type)+title+`</div>`+_get_panel_content(type)+`</div>
			</div>
		</div>
	`;
}

function _get_panel_content(type)
{
	var contents = [];

	contents['identification'] = `
		<div class="panel-body text-center">
			<div class="row buttons_identification">
				<div class="col-xs-4 col-sm-4 col-md-4">
					<button type="button" class="btn btn-default button_login" data-remodal-target="modal_login">Login</button>
				</div>
				<div class="col-xs-4 col-sm-4 col-md-4">
					<button type="button" class="btn btn-default button_register" data-remodal-target="modal_register">Register</button>
				</div>
				<div class="col-xs-4 col-sm-4 col-md-4">
					<button type="button" class="btn btn-default button_guest">Guest</button>
				</div>
			</div>
		</div>`;
	contents['addresses'] = `
		<div class="panel-body">
			<div class="row show_on_guest" style="">
				<div class="col-md-6">
					<div class="checkbox">
						<label>
							<input name="shipping_address" type="checkbox" checked="checked"> Lorem ipsum dolor
						</label>
					</div>
				</div>
				<div class="col-md-6 addresses_buttons">
					<div class="col-md-12 same_address_container">
						<button type="button" class="btn btn-default billing_delivery_address with_icon" data-remodal-target="modal_billing_address">Delivery &amp; Billing</button>
					</div>
				</div>
			</div>
		</div>`;
	contents['shipping'] = `
		<div class="panel-body">
			<div class="shipping_method">
				<strong class="title">Shipping method 1</strong>
				<div class="radio-input radio">
					<label>
						<input name="shipping_method" checked="checked" type="radio"> 
						<span class="text">Shipping method 1</span><span class="price">$5.00</span>
					</label>
				</div>
			</div>
			<div class="shipping_method">
				<strong class="title">Shipping method 2</strong>
				<div class="radio-input radio">
					<label>
						<input name="shipping_method" checked="checked" type="radio"> 
						<span class="text">Shipping method 2</span><span class="price">$10.00</span>
					</label>
				</div>
			</div>
		</div>`;
	contents['payment'] = `
		<div class="panel-body">
			<div class="payment_method payment_method_1">
				<div class="radio-input radio">
					<label for="payment_method_1"><input name="payment_method" value="payment_method_1" id="payment_method_1" checked="checked" type="radio"><strong class="title">Payment method 1</strong></label>
				</div>
			</div>
			<div class="payment_method payment_method_2">
				<div class="radio-input radio">
					<label for="payment_method_2"><input name="payment_method" value="payment_method_2" id="payment_method_2" checked="checked" type="radio"><strong class="title">Payment method 2</strong></label>
				</div>
			</div>
		</div>
	`;
	contents['cart'] = `
		<div class="panel-body">
			<table class="table table-striped products_info_cart stacktable large-only">
				<thead>
					<tr>
						<th>Image</th>
						<th>Name</th>
						<th>Quantity</th>
						<th>Price</th>
						<th>Total</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="text-center"><a href="javascript:{}"><img src="http://devmanextensions.com/opencart_demos/poc/image/cache/catalog/demo/iphone_1-47x47.jpg" alt="iPhone" title="iPhone" class="img-thumbnail"></a></td>
						<td class="text-left product_name"><a href="javascript:{}">iPhone</a></td>
						<td class="text-right quantity_td">5</td>
						<td class="text-right">$101.00</td>
						<td class="text-right">$505.00</td>
					</tr>
					<tr>
						<td class="text-center"><a href="javascript:{}"><img src="http://devmanextensions.com/opencart_demos/poc/image/cache/catalog/demo/macbook_1-47x47.jpg" alt="MacBook" title="MacBook" class="img-thumbnail"></a></td>
						<td class="text-left product_name"><a href="javascript:{}">MacBook</a></td>
						<td class="text-right quantity_td">2</td>
						<td class="text-right">$500.00</td>
						<td class="text-right">$1,000.00</td>
					</tr>
				</tbody>
			</table>
			<table class="table table-bordered">
				<tbody>
					<tr>
						<td class="text-right"><strong>Sub-Total</strong></td>
						<td class="text-right total">$1,505.00</td>
					</tr>
					<tr>
						<td class="text-right"><strong>Flat Shipping Rate</strong></td>
						<td class="text-right total">$5.00</td>
					</tr>
					<tr>
						<td class="text-right"><strong>Total</strong></td>
						<td class="text-right total">$1,510.00</td>
					</tr>
				</tbody>
			</table>
		</div>
	`;
	contents['confirm'] = `
		<div class="panel-body">
			<div class="order_comment">
				<label>Order comments</label>
				<textarea name="comment" class="form-control"></textarea>
			</div>

			<div class="checkbox confirm_terms">
				<label class="control-label"><input data-validationrule="not_empty" name="confirm_terms" type="checkbox"> Lorem ipsum dolor <a href="javascript:{}" data-remodal-target="modal_terms">consectetur</a></label>
			</div>
			<div style="clear:both;"></div>

			<a href="javascript:{}" class="btn btn-default confirm_order_button">Confirm Order</a>
		</div>
		`;

	return contents[type];
}

function _get_panel_icon(type)
{
	var icons = [];
	icons['identification'] = '<i class="fa fa-user"></i>';
	icons['addresses'] = '<i class="fa fa-map-marker"></i>';
	icons['shipping'] = '<i class="fa fa-truck"></i>';
	icons['payment'] = '<i class="fa fa-credit-card"></i>';
	icons['cart'] = '<i class="fa fa-shopping-cart"></i>';
	icons['confirm'] = '<i class="fa fa-thumbs-up"></i>';

	return icons[type];
}

function insert_column_titles(selector)
{
	var count = 1;
	$('div.'+selector+' div.column_layout').each(function(){
		$(this).prepend('<center><h2>Column '+count+'</h2></center>');
		count++;
	});
}