/*
Layout 2

Colonne de gauche de largeur variable
Colonne de droite de largeur fixe

Somme des deux largeurs contrainte par largeur de #contenu_std
Hauteur des deux colonnes = hauteur d'écran disponible;
défilement indépendent de chaque colonne.


Configurables:
max-width de #contenu_std
min-width de #contenu_std
width de #layout-p2 (colonne droite) en pixels

*/
if (typeof(LK) == 'undefined'){
	LK = {}
}
(function(){
	LK.layout_ = function(params){
		var this_ = this
		this.on_hold = false
		this.params = {
			width_droite:200,
			min_width_contenu_std:600,
			max_width_contenu_std:1024,
			padding_droit_col_gauche:0,
			marge_gauche:0,
			marge_droite:0
		}
		this.gauche = $('#layout1-p1')
		this.droite = $('#layout1-p2')
		this.gauche_droite = $('#layout1-p1,#layout1-p2')
		this.no = 2
		this.init(params)

		$(window).bind('resize focus', function(){
			this_.win_adjust()
			if (this_.timeout){
				clearTimeout(this_.timeout)
			}
			this_.timeout = setTimeout(function(){this_.timeout = null, this_.win_adjust()}, 100)
		})




	}
	var layout = LK.layout_.prototype
	layout.win_adjust = function(){
		var a
		if (this.on_hold) return
		if ($('#contenu_std').is(':visible')){
			this.droite.width(this.params.width_droite)
			var margin_offset = this.gauche.outerWidth(true) - this.gauche.outerWidth()
			this.gauche.fillWidth({offset:-20 - margin_offset, autres:'#layout1-p2'})

			var top = this.gauche.offset().top
			this.droite.css('top', 0)

			$('#layout1-p1,#layout1-p2').each(function(){
				$(this).height(a = $(window).height() - top - $(this).outerHeight() + $(this).height()-10)
			})
			//LK.alert('droite = ' + this.params.width_droite + '; gauche = ' + $('#layout1-p1').width() + '; hauteur = ' + (a) + '; top = ' + top + '; margin L = ' + this.gauche.css('margin-left') + '; margin R = ' + this.gauche.css('margin-right'))
		}
	}
	layout.init = function(params){
		if (typeof(params) != 'object'){
			params = {}
		}
		$.extend(this.params, params)
		$('#contenu_std').css({
			minWidth:Number(this.params.min_width_contenu_std),
			maxWidth:Number(this.params.max_width_contenu_std),
			overflow:'hidden'
		})
		this.gauche_droite.css({
			overflow:'auto',
			'float':'left'
		})
		this.gauche.css({
			marginLeft:Number(this.params.marge_gauche),
			marginRight:Number(this.params.marge_droite),
			paddingRight:Number(this.params.padding_droit_col_gauche)
		})
	
		this.win_adjust()
	}
	layout.save_layout = function(){
		$.getJSON('./PHP/layouts.php', {
			op:'save_config'
		}, function(data){
			if (data.result){
				LK.alert('OK')
			}
			LK.alert_msg(data)
		})
	}
	layout.hold = function(mode){
		if (mode == undefined){
			mode = true
		}
		this.on_hold = mode
	}
	layout.adjust = function(){
		var this_ = this, validation = new LK.validation_group()
		this.original_params = $.extend({}, this.params)

		var buttons = {}
		buttons[LK.msg__.fermer] = function() {
			$(this).dialog('close')
		}
		buttons[LK.msg__.sauvegarder] = function(){
			validation.validate()
			var vals = {}, err = false
			$('input', this).each(function(){
				var a
				vals[$(this).customdata('fld')] = a = Number($(this).val())
				if (isNaN(a)){
					alert('Valeur non numérique')
					err = true
					return false
				}

			})
			if (vals.min_width_contenu_std >= vals.max_width_contenu_std){
				alert(LK.msg__.min_superieur_a_max)
				return
			}
			$.post('./PHP/layouts.php', {
				op:'save_format',
				id_layout:this_.no,
				id_document:LK.id_document,
				format:LK.json_encode(vals)
			}, function(data){
				if (data.result){
					$.extend(this_.params, vals)
					this_.init()
					dial.dialog('close')
				}
				LK.alert_msg(data)
			}, 'json')
		}

		if($('#layout_adjustment').length == 0){
			$('<div id="layout_adjustment"></div>').dialog({
				title:LK.msg__.ajustement_layout,
				width:380,
				autoOpen:false,
				buttons:buttons,
				zIndex:100
			})
			.dialogShadow('ombre ui-corner-all')
			.disableSelection()
			.closeOn('change_mode')
			.append($('<div>', {css:{display:'block', margin:'10px 0'}}).append($('<label>').text(LK.msg__.largeur_droite).append($('<input>', {'data-fld':'width_droite', 'data-valid':'num_interval(5,1200)', size:3, maxlength:4}))).append($('<a>', {'data-fld':'width_droite',href:'#'}).text(LK.msg__.ajuster)))
			.append($('<div>', {css:{display:'block', margin:'10px 0'}}).append($('<label>').text(LK.msg__.largeur_totale_min).append($('<input>', {'data-fld':'min_width_contenu_std', 'data-valid':'num_interval(600,1200)', size:2, maxlength:4}))).append($('<a>', {'data-fld':'min_width_contenu_std', href:'#'}).text(LK.msg__.ajuster)))
			.append($('<div>', {css:{display:'block', margin:'10px 0'}}).append($('<label>').text(LK.msg__.largeur_totale_max).append($('<input>', {'data-fld':'max_width_contenu_std', 'data-valid':'num_interval(600,1200)', size:2, maxlength:4}))).append($('<a>', {'data-fld':'max_width_contenu_std', href:'#'}).text(LK.msg__.ajuster)))
			.append($('<div>', {css:{display:'block', margin:'10px 0'}}).append($('<label>').text(LK.msg__.marge_gauche).append($('<input>', {'data-fld':'marge_gauche', 'data-valid':'num_interval(0,200)', type:'text', size:2, maxlength:3}))).append($('<a>', {'data-fld':'marge_gauche', href:'#'}).text(LK.msg__.ajuster)))
			.append($('<div>', {css:{display:'block', margin:'10px 0'}}).append($('<label>').text(LK.msg__.marge_droite).append($('<input>', {'data-fld':'marge_droite', 'data-valid':'num_interval(0,200)', type:'text', size:2, maxlength:3}))).append($('<a>', {'data-fld':'marge_droite', href:'#'}).text(LK.msg__.ajuster)))
			.append($('<div>', {css:{display:'block', margin:'10px 0'}}).append($('<label>').text(LK.msg__.padding_droit_col_gauche).append($('<input>', {'data-fld':'padding_droit_col_gauche', 'data-valid':'num_interval(0,200)', type:'text', size:3, maxlength:3}))).append($('<a>', {'data-fld':'padding_droit_col_gauche', href:'#'}).text(LK.msg__.ajuster)))
			.click(function(ev){
				var $obj = $(ev.target)
				if ($obj.is('a[data-fld]')){
					this_.ajuster_sur_ecran($obj.customdata('fld'))
				}
				
			})
		} else{
			$('#layout_adjustment').dialog('option', 'buttons', buttons)
		}
		var dial = $('#layout_adjustment')
		dial.find('input').each(function(){
			$(this).val(this_.params[$(this).customdata('fld')])
			validation.add($(this))
		})

		dial.dialog('open')

	}
	layout.store_params = function(){
		this.stored_params = $.extend({}, this.params)
	}
	layout.restore_params = function(){
		var this_ = this
		this.params = $.extend({}, this.stored_params)
		this.init()
		setTimeout(function(){this_.win_adjust()}, 100)
	}
	
	
	layout.ajuster_sur_ecran = function(fld){
		var this_ = this, openfnct, closefnct, largeur_originale, curseur
		this.hold(false)
		this.store_params()
		
		$('#layout_adjustment').dialog('close')
		switch (fld){
			case 'width_droite':
				largeur_originale = this.droite.width()
				openfnct = function(){
					this_.gauche.resizable({
				
						handles:'e',
						resize:function(ev, ui){
							this_.params.width_droite = largeur_originale - ui.size.width + ui.originalSize.width
							this_.init()
						},
						stop: function(ev, ui){
							largeur_originale = this_.droite.width()
						}
					})
					this_.gauche.find('div.ui-resizable-handle').css({backgroundColor:'red', width:10})
				
					this_.init()
					
				}
				closefnct = function(){
					this_.gauche.resizable('destroy')
					$('#layout_adjustment').dialog('open')
					this_.init()
				}
				break

			case 'min_width_contenu_std':
				largeur_originale = $('#contenu_std').width()
				var min_width_originale = $('#contenu_std').css('min-width')
				$('#contenu_std').css('min-width', 100)
				openfnct = function(){
					$('#contenu_std').resizable({
						handles:'e',
						resize:function(ev, ui){
							this_.win_adjust()
						}
					})
					$('#contenu_std')
						.css({top:0, left:0})
						.find('div.ui-resizable-handle').css({backgroundColor:'red', width:10,padding:0})
				}
				closefnct = function(){
					$('#contenu_std').resizable('destroy')
					$('#contenu_std').css('min-width', min_width_originale).width('auto')
					this_.init()
					$('#layout_adjustment').dialog('open')
				}
				break

			case 'max_width_contenu_std':
				
				largeur_originale = $('#contenu_std').width()
				var max_width_originale = $('#contenu_std').css('max-width')
				$('#contenu_std').css('max-width', 1200)
				openfnct = function(){
					$('#contenu_std').resizable({
						handles:'e',
						resize:function(ev, ui){
							this_.win_adjust()
						}
					})
					$('#contenu_std')
						.css({top:0, left:0})
						.find('div.ui-resizable-handle').css({backgroundColor:'red', width:10,padding:0})
				}
				closefnct = function(){
					$('#contenu_std').resizable('destroy')
					$('#contenu_std').css('max-width', max_width_originale).width('auto')
					this_.init()
					$('#layout_adjustment').dialog('open')
				}
				break
			case 'marge_gauche':
				openfnct = function(){
					dial.append(curseur = $('<div>', {className:'curseur'}).slider({
						max:200,
						value:this_.params.marge_gauche,
						slide:function(ev, ui){
							this_.params.marge_gauche = ui.value
							this_.init()

						}
					}))
				}
				closefnct = function(){
					this_.init()
					$('#layout_adjustment').dialog('open')

				}
				break
			case 'padding_droit_col_gauche':
				openfnct = function(){
					dial.append(curseur = $('<div>', {className:'curseur'}).slider({
						max:200,
						value:this_.params.padding_droit_col_gauche,
						slide:function(ev, ui){
							this_.params.padding_droit_col_gauche = ui.value
							this_.init()

						}
					}))
				}
				closefnct = function(){
					this_.init()
					$('#layout_adjustment').dialog('open')

				}
				break
			case 'marge_droite':
				openfnct = function(){
					dial.append(curseur = $('<div>', {className:'curseur'}).slider({
						max:200,
						value:this_.params.marge_droite,
						slide:function(ev, ui){
							this_.params.marge_droite = ui.value
							this_.init()
						}
					}))
				}
				closefnct = function(){
					this_.init()
					$('#layout_adjustment').dialog('open')
				}
				break

		}
		var buttons = {};
		buttons[LK.msg__.fermer] = function() {
			this_.restore_params()
			this_.init()
			$(this).dialog('close')
		}
		buttons[LK.msg__.sauvegarder] = function(){
			var a
			switch(fld){
				case 'width_droite':
					a = this_.droite.width()
					break
				case 'min_width_contenu_std':
				case 'max_width_contenu_std':
					a = $('#contenu_std').width()
					break
				case 'marge_droite':
				case 'marge_gauche':
				case 'padding_droit_col_gauche':
					a = curseur.slider('value')
			}
			$('#layout_adjustment').find('input[data-fld=' + fld + ']').val(a)
			this_.params[fld] = a
			$(this).dialog('close')
		}

		if($('#window_drag').length == 0){
			$('<div id="window_drag"></div>').dialog({
				title:LK.msg__.ajustement,

				autoOpen:false,
				buttons:buttons,
				zIndex:9999,
				open: openfnct,
				close:closefnct
			})
			.dialogShadow('ombre ui-corner-all')
			.disableSelection()
			.closeOn('change_mode')
			
		} else{
			$('#window_drag').dialog('option', 'buttons', buttons)
				.dialog('option', 'open', openfnct)
				.dialog('option', 'close', closefnct)
		}
		var dial = $('#window_drag')
		.html(LK.msg__.info[fld] || LK.msg__.info.defaut)

		dial.dialog('open')

	}

})()