/*
Layout 0

Une seule colonne

on peut modifier la marge de gauche et droite et largeurs min et max


*/
if (typeof(LK) == 'undefined'){
	LK = {}
}
(function(){
	LK.layout_ = function(params){
		var this_ = this
		this.params = {
			marge_gauche:0,
			largeur:'100%',
			min_width_contenu_std:600,
			max_width_contenu_std:1024

		}
		this.contenu = $('#contenu_std')
		this.no = 0
		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(){
	}
	
	

	layout.init = function(params){
		$.extend(this.params, params)

		this.contenu.css({
			minWidth:Number(this.params.min_width_contenu_std),
			maxWidth:Number(this.params.max_width_contenu_std),
			//overflow:'auto',
			marginLeft:Number(this.params.marge_gauche),
			width:this.params.largeur
	})
		
		
		this.win_adjust()
	}

	layout.adjust = function(){
		var this_ = this, validation
		validation = new LK.validation_group()
		this.original_params = $.extend({}, this.params)

		var buttons = {}
		buttons[LK.msg__.annuler] = function() {

			this_.init(this_.original_params)
			$(this).dialog('close')
		}
		buttons[LK.msg__.sauvegarder] = function(){
			if (!validation.validate()){
				return
			}
			var vals = {}, a, err
			$('input', this).each(function(){
				var fld
				vals[fld = $(this).customdata('fld')] = a = Number($(this).val())
				if (isNaN(a)){
					if (fld == 'largeur'){
						vals.largeur = $(this).val()
					} else{
						$(this).addClass('err_input')
					}
				}
			})
			if (err){
				alert(LK.msg__.non_numerique)
				return
			}
			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:410,

				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_contenu).append($('<input>', {'data-fld':'largeur', 'data-valid':'css_dim', type:'text', size:3, maxlength:5}))).append($('<a>', {'data-fld':'largeur', 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(100,1280)', type:'text', size:3, 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(100,1280)', type:'text', size:3, 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:3, maxlength:3}))).append($('<a>', {'data-fld':'marge_gauche', href:'#'}).text(LK.msg__.ajuster)))
			.click(function(ev){
				var $obj = $(ev.target)
				if ($obj.is('a.info')){
					LK.show_info({msg:LK.msg__.info_offset, pos:{my:'center', at:'center', of:$obj}})
				} else if ($obj.is('a[data-fld]')){
					this_.ajuster_sur_ecran($obj.customdata('fld'))
				}
			})
			.find('input[data-fld]').each(function(){
				validation.add($(this))
			})
		} else{
			$('#layout_adjustment').dialog('option', 'buttons', buttons)
		}
		var dial = $('#layout_adjustment')
		dial.find('input').each(function(){
			$(this).val(this_.params[$(this).customdata('fld')])
		})

		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.hold = function(mode){
		if (mode == undefined){
			mode = true
		}
		this.on_hold = mode
	}

	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 'min_width_contenu_std':
				$('#contenu_std').css('min-width', 100)
				openfnct = function(){
					$('#contenu_std').resizable({
						handles:'e'
					})
					this_.contenu
						.css({top:0, left:0})
						.find('div.ui-resizable-handle').css({backgroundColor:'red', width:10,padding:0})
				}
				closefnct = function(){
					this_.contenu.resizable('destroy')
					this_.contenu.width('auto')
					$('#layout_adjustment').dialog('open')
				}
				break

			case 'max_width_contenu_std':
				
				$('#contenu_std').css('max-width', 1200)
				openfnct = function(){
					$('#contenu_std').resizable({
						handles:'e'
					})
					this_.contenu
						.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').width('auto')
					$('#layout_adjustment').dialog('open')
				}
				break
			case 'marge_gauche':
				openfnct = function(){
					dial.append(curseur = $('<div>', {className:'curseur'}).slider({
						max:500,
						value:this_.params.marge_gauche,
						slide:function(ev, ui){
							this_.params.marge_gauche = ui.value
							this_.init()

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

				}
				break
			case 'largeur':
				openfnct = function(){
					this_.contenu.resizable({
						
					})
					this_.contenu
						.css({top:0, left:0})
						.find('div.ui-resizable-handle').css({backgroundColor:'red', width:10,padding:0})
				}
				closefnct = function(){
					this_.contenu.resizable('destroy')
					
				}
				break

		}
		var buttons = {};
		buttons[LK.msg__.fermer] = function() {
			this_.restore_params()
			this_.init()
			$(this).dialog('close')
		}
		buttons[LK.msg__.sauvegarder] = function(){
			var a, b
			switch(fld){
				case 'min_width_contenu_std':
				case 'max_width_contenu_std':
					a = $('#contenu_std').width()
					break
				case 'marge_gauche':
					a = curseur.slider('value')
					break
				case 'largeur':
					this_.choisir_fixe_pourcent()
					$(this).dialog('close')
					return
			}
			this_.params[fld] = a
			$('#layout_adjustment').find('input[data-fld=' + fld + ']').val(a)
			this_.init()
			$(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('')
			.append(LK.msg__.info[fld])

		dial.dialog('open')

	}
	
	layout.choisir_fixe_pourcent = function(){
		var buttons = {}, a, this_ = this
		buttons[LK.msg__.annuler] = function() {

			$(this).dialog('close')
		}
		buttons[LK.msg__.sauvegarder] = function(){
			var a
			if ((a = $('input:checked', this)).length != 1){
				alert(LK.msg__.faire_choix)
				return
			}

			this_.params.largeur = a.val()
			$('#layout_adjustment').find('input[data-fld=largeur]').val(a.val())
			$(this).dialog('close')
		}
		if($('#choix_fixe_pourcent').length == 0){
			$('<div id="choix_fixe_pourcent"></div>').dialog({
				title:LK.msg__.choix_format,
				autoOpen:false,
				buttons:buttons,
				zIndex:100,
				close:function(){
					$('#layout_adjustment').dialog('open')
				}
			})
			.dialogShadow('ombre ui-corner-all')
			.disableSelection()
			.closeOn('change_mode')
		} else{
			$('#choix_fixe_pourcent').dialog('option', 'buttons', buttons)
		}
		var dial = $('#choix_fixe_pourcent')
		dial.html('')
			.append($('<p>').text(LK.msg__.choisir_format))
			.append($('<div>', {css:{textAlign:'center'}})
				.append($('<label>', {css:{margin:'0 15px'}}).text(a=this.contenu.width() + 'px').append($('<input>', {type:'radio', name:'choix_format'}).val(a)))
				.append($('<label>').text(a=LK.my_round(100*this.contenu.width()/($(window).width() - $('#menu_left').width()), 1) + '%').append($('<input>', {type:'radio', name:'choix_format'}).val(a)))
			)

		dial.dialog('open')

	}
})()