//ver 3.1

var UniteLayersRev = new function(){
	
	var initTop = 100;
	var initLeft = 100;
	var initSpeed = 300;
	
	var initTopVideo = 20;
	var initLeftVideo = 20;
	var g_startTime = 500;
	var g_stepTime = 300;
	var g_slideTime;
	
	var initText = "Caption Text";
	
	//init system vars
	var t = this;
	var containerID = "#divLayers";
	var container;	
	var arrLayers = {};
	var id_counter = 0;
	var initLayers = null;
	var selectedLayerSerial = -1;
	var urlCssCaptions = null;
	var initArrCaptionClasses = [];
	var sortMode = "time";				//can be "depth" or "time"
	var g_codemirrorCss = null;

	
	/**
	 * set init layers object (from db)
	 */
	t.setInitLayersJson = function(jsonLayers){
		initLayers = jQuery.parseJSON(jsonLayers);
	}
	
	/**
	 * set init captions classes array (from the captions.css)
	 */
	t.setInitCaptionClasses = function(jsonClasses){
		initArrCaptionClasses = jQuery.parseJSON(jsonClasses);
	}
	
	/**
	 * set captions url for refreshing when needed
	 */
	t.setCssCaptionsUrl = function(url){
		urlCssCaptions = url;
	}
	
	/**
	 * close css dialog
	 */
	t.closeCssDialog = function(){
		jQuery("#dialog_edit_css").dialog("close");
	}
	
	
	/**
	 * insert button by class and text
	 */
	t.insertButton = function(buttonClass,buttonText){
		if(selectedLayerSerial == -1)
			return(false);
		
		var html = "<a href='javascript:alert(\"click\");' class='tp-button "+buttonClass+" small'>"+buttonText+"</a>";
		
		jQuery("#layer_caption").val("");
		jQuery("#layer_text").val(html);
		updateLayerFromFields();
		
		jQuery("#dialog_insert_button").dialog("close");
	}
	
	
//======================================================
//	Init Functions
//======================================================
	
	/**
	 * init the layout
	 */
	t.init = function(slideTime){
		
		if(jQuery().draggable == undefined || jQuery().autocomplete == undefined){
			jQuery("#jqueryui_error_message").show();			
		}
			
		
		g_slideTime = Number(slideTime);
		
		container = jQuery(containerID);
		
		//add all layers from init
		if(initLayers){
			var len = initLayers.length;
			if(len){
				for(var i=0;i<len;i++)
					addLayer(initLayers[i],true);
			}else{
				for(key in initLayers)
					addLayer(initLayers[key],true);
			}
		}
				
		//disable the properties box
		disableFormFields();
		
		//init elements
		initMainEvents();
		initSortbox();
		initButtons();
		initEditCSSDialog();
		initHtmlFields();
		initAlignTable();
	}
	
	
	/**
	 * init the align table
	 */
	var initAlignTable = function(){
		jQuery("#align_table a").click(function(){			
			var obj = jQuery(this);
			if(jQuery("#align_table").hasClass("table_disabled"))
				return(false);
			if(obj.hasClass("selected"))
				return(false);
			
			var alignHor = obj.data("hor");
			var alignVert = obj.data("vert");
			jQuery("#align_table a").removeClass("selected");
			obj.addClass("selected");
			
			jQuery("#layer_align_hor").val(alignHor);
			jQuery("#layer_align_vert").val(alignVert);
			
			var objLayerXText = jQuery("#layer_left_text");
			var objLayerYText = jQuery("#layer_top_text");
			
			switch(alignHor){
				case "left":
					objLayerXText.html(objLayerXText.data("textnormal")).css("width","auto");
					jQuery("#layer_left").val("10");
				break;
				case "right":
					objLayerXText.html(objLayerXText.data("textoffset")).css("width","42px");
					jQuery("#layer_left").val("10");
				break;
				case "center":
					objLayerXText.html(objLayerXText.data("textoffset")).css("width","42px");
					jQuery("#layer_left").val("0");
				break;
			}
			
			switch(alignVert){
				case "top":
					objLayerYText.html(objLayerYText.data("textnormal")).css("width","auto");
					jQuery("#layer_top").val("10");
				break;
				case "bottom":
					objLayerYText.html(objLayerYText.data("textoffset")).css("width","42px");
					jQuery("#layer_top").val("10");
				break;					
				case "middle":
					objLayerYText.html(objLayerYText.data("textoffset")).css("width","42px");
					jQuery("#layer_top").val("0");
				break;
			}
			
			updateLayerFromFields();
			
		});
		
	}
	
	
	/**
	 * init general events
	 */
	var initMainEvents = function(){
		
		//unselect layers on container click
		container.click(unselectLayers);
	}
	
	
	/**
	 * init events (update) for html properties change.
	 */
	var initHtmlFields = function(){
		
		//show / hide slide link offset
		jQuery("#layer_slide_link").change(function(){
			showHideOffsetRow();
		});
		
		//set layers autocompolete
		jQuery( "#layer_caption" ).autocomplete({
			source: initArrCaptionClasses,
			minLength:0,
			close:updateLayerFromFields
		});	
		
		//open the list on right button
		jQuery( "#layer_captions_down" ).click(function(event){
			event.stopPropagation();
			
			//if opened - close autocomplete
			if(jQuery('#layer_caption').data("is_open") == true)
				jQuery( "#layer_caption" ).autocomplete("close");
			else   //else open autocomplete
			if(jQuery(this).hasClass("ui-state-active"))
				jQuery( "#layer_caption" ).autocomplete( "search", "" );
		});
		
		//handle autocomplete close
		jQuery('#layer_caption').bind('autocompleteopen', function() {
			jQuery(this).data('is_open',true);
		});		

		jQuery('#layer_caption').bind('autocompleteclose', function() {
			jQuery(this).data('is_open',false);
		});	
		
		jQuery("body").click(function(){
			jQuery( "#layer_caption" ).autocomplete("close");
		});
		
		
		//set events:
		jQuery("#form_layers select").change(updateLayerFromFields);
		jQuery("#layer_text").keyup(updateLayerFromFields);
		var pressEnterFields = "#form_layers input, #form_layers textarea";
		jQuery(pressEnterFields).blur(updateLayerFromFields);
		jQuery(pressEnterFields).keypress(function(event){
			if(event.keyCode == 13)
				updateLayerFromFields();
		});
		
		//end time validation
		jQuery("#layer_endtime").blur(validateCurrentLayerTimes).keypress(function(event){
			if(event.keyCode == 13)
				validateCurrentLayerTimes();
		});
	}
			
	
	/**
	 * init buttons actions
	 */
	var initButtons = function(){
		
		//set event buttons actions:
		jQuery("#button_add_layer").click(function(){
			addLayerText();
		});
		
		jQuery("#button_add_layer_image").click(function(){
			UniteAdminRev.openAddImageDialog("Select Layer Image",function(urlImage){
				addLayerImage(urlImage);
			});
		});
		
		//add youtube actions:
		jQuery("#button_add_layer_video").click(function(){
			UniteAdminRev.openVideoDialog(function(videoData){
				addLayerVideo(videoData);
			});
		});
		
		//edit video actions
		jQuery("#button_edit_video").click(function(){
			var objCurrentLayer = getCurrentLayer();						
			var objVideoData = objCurrentLayer.video_data;
			
			//open video dialog
			UniteAdminRev.openVideoDialog(function(videoData){
				//update video layer
				var objLayer = getVideoObjLayer(videoData);
				updateCurrentLayer(objLayer);
				updateHtmlLayersFromObject(selectedLayerSerial);
				updateLayerFormFields(selectedLayerSerial);
				redrawLayerHtml(selectedLayerSerial);
			},
			objVideoData);
			
		});
		
		//change image source actions
		jQuery("#button_change_image_source").click(function(){
			UniteAdminRev.openAddImageDialog("Select Layer Image",function(urlImage){
				var objData = {};
				objData.image_url = urlImage;
				updateCurrentLayer(objData);
				redrawLayerHtml(selectedLayerSerial);
			});
		});
		
		//delete layer actions:
		jQuery("#button_delete_layer").click(function(){
			if(jQuery(this).hasClass("button-disabled"))
				return(false);
			
			//delete selected layer
			deleteCurrentLayer();
		});

		//delete layer actions:
		jQuery("#button_duplicate_layer").click(function(){
			if(jQuery(this).hasClass("button-disabled"))
				return(false);
			
			//delete selected layer
			duplicateCurrentLayer();
		});
		
		//delete all layers actions:
		jQuery("#button_delete_all").click(function(){
			if(confirm("Do you really want to delete all the layers?") == false)
				return(true);
			
			if(jQuery(this).hasClass("button-disabled"))
				return(false);
			
			deleteAllLayers();
		});
		
		//insert button link - open the dialog
		jQuery("#linkInsertButton").click(function(){			
			if(jQuery(this).hasClass("disabled"))
				return(false);
			
			var buttons = {"Cancel":function(){jQuery("#dialog_insert_button").dialog("close")}}
			jQuery("#dialog_insert_button").dialog({buttons:buttons,minWidth:500,modal:true});
			
		});
		

	}	
	
	
//======================================================
//		Init Function End
//======================================================

	/**
	 * show / hide offset row accorging the slide link value
	 */
	var showHideOffsetRow = function(){
		var value = jQuery("#layer_slide_link").val();
		var offsetRow = jQuery("#layer_scrolloffset_row");
		
		if(value == "scroll_under")
			offsetRow.show();
		else
			offsetRow.hide();
	}
	
	
	/**
	 * do various form validations
	 */
	var doCurrentLayerValidations = function(){
		if(selectedLayerSerial == -1)
			return(false);
		
		validateCurrentLayerTimes();
	}
	
	
	/**
	 * validate times (start and end times) of the current layer
	 */
	var validateCurrentLayerTimes = function(){
		var currentLayer = getCurrentLayer();
		if(!currentLayer)
			return(false);
		
		var startTime = currentLayer.time;
		var endTime = jQuery("#layer_endtime").val();
		endTime = jQuery.trim(endTime);
		
		if(!endTime || endTime == ""){
			unmarkFieldError("#layer_endtime");
			return(false);
		}
		
		startTime = Number(startTime);
		endTime = Number(endTime);
		
		if(startTime >= endTime)
			markFieldError("#layer_endtime","Must be greater then start time ("+startTime+")");
		else
			unmarkFieldError("#layer_endtime");
	}
	
	/**
	 * mark some field as error field and give it a error title
	 */
	var markFieldError = function(field_selector,errorTitle){
		jQuery(field_selector).addClass("field_error");
		if(errorTitle)
			jQuery(field_selector).prop("title",errorTitle);
	}
	
	
	/**
	 * unmark field error class and title
	 */
	var unmarkFieldError = function(field_selector){
		jQuery(field_selector).removeClass("field_error");
		jQuery(field_selector).prop("title","");
	}
	
	
	/**
	 * get the first style from the styles list (from autocomplete)
	 */
	var getFirstStyle = function(){
		var arrClasses = jQuery( "#layer_caption" ).autocomplete("option","source");
		var firstStyle = "";
				
		if(arrClasses.length == 0)
			return("");
				
		var firstStyle = arrClasses[0];
		
		return(firstStyle);
	}
	

	/**
	 * clear layer html fields, and disable buttons
	 */
	var disableFormFields = function(){
		
		//clear html form
		jQuery("#form_layers")[0].reset();
		jQuery("#form_layers input, #form_layers select, #form_layers textarea").attr("disabled", "disabled").addClass("setting-disabled");
		
		jQuery("#button_delete_layer").addClass("button-disabled");
		jQuery("#button_duplicate_layer").addClass("button-disabled");
		
		jQuery("#form_layers label, #form_layers .setting_text, #form_layers .setting_unit").addClass("text-disabled");
		
		jQuery("#layer_captions_down").removeClass("ui-state-active").addClass("ui-state-default");
		
		jQuery("#linkInsertButton").addClass("disabled");
		
		jQuery("#align_table").addClass("table_disabled");
	}
	
	/**
	 * enable buttons and form fields.
	 */
	var enableFormFields = function(){
		jQuery("#form_layers input, #form_layers select, #form_layers textarea").removeAttr("disabled").removeClass("setting-disabled");
		
		jQuery("#button_delete_layer").removeClass("button-disabled");
		jQuery("#button_duplicate_layer").removeClass("button-disabled");
		
		jQuery("#form_layers label, #form_layers .setting_text, #form_layers .setting_unit").removeClass("text-disabled");
		
		jQuery("#layer_captions_down").removeClass("ui-state-default").addClass("ui-state-active");
		
		jQuery("#linkInsertButton").removeClass("disabled");
		
		jQuery("#align_table").removeClass("table_disabled"); 
	}
	
	/**
	 * set code mirror editor
	 */
	t.setCodeMirrorEditor = function(){
		g_codemirrorCss = CodeMirror.fromTextArea(document.getElementById("textarea_edit"), {});
	}
	
	/**
	 * init dialog actions
	 */
	var initEditCSSDialog = function(){
		jQuery("#button_edit_css").click(function(){
			
			UniteAdminRev.ajaxRequest("get_captions_css","",function(response){
				
				//update textarea with css:
				var cssData = response.data;
				
				if(g_codemirrorCss != null)
					g_codemirrorCss.setValue(cssData);
				else{
					jQuery("#textarea_edit").val(cssData);
					setTimeout('UniteLayersRev.setCodeMirrorEditor()',500);
				}
								
				//open captions edit dialog	
				var buttons = {	
						
				//---- update button action:
						
				"Update":function(){
					
						UniteAdminRev.setErrorMessageID("dialog_error_message");						
						var data;
						if(g_codemirrorCss != null)
							data = g_codemirrorCss.getValue();
						else
							data = jQuery("#textarea_edit").val();
						
						UniteAdminRev.ajaxRequest("update_captions_css",data,function(response){
							jQuery("#dialog_success_message").show().html(response.message);
							setTimeout("UniteLayersRev.closeCssDialog()",500);
							
							if(urlCssCaptions)
								UniteAdminRev.loadCssFile(urlCssCaptions,"rs-plugin-captions-css");
							
							//update html select (got as "data" from response)
							updateCaptionsInput(response.arrCaptions);
						});
				},
				
				//---- restore original button action:
				
				"Restore Original":function(){
					UniteAdminRev.setErrorMessageID("dialog_error_message");
					UniteAdminRev.ajaxRequest("restore_captions_css","",function(response){						
						jQuery("#dialog_success_message").show().html("css content restored, please press update");
						
						if(g_codemirrorCss != null)
							g_codemirrorCss.setValue(response.data);
						else
							jQuery("#textarea_edit").val(response.data);
						
						setTimeout("jQuery('#dialog_success_message').hide()",1000);
					});					
				},
						
						//----- cancel button action:
				"Cancel":function(){t.closeCssDialog()}
				};
				
				//lock scrollbars
				jQuery('body').css({'overflow':'hidden'});
				
				//hide dialog error message
				jQuery("#dialog_error_message").hide();
				jQuery("#dialog_success_message").hide();
				
				//open the dialog
				jQuery("#dialog_edit_css").dialog({
					buttons:buttons,
					minWidth:800,
					modal:true,
					close: function(event, ui){
						//return scrollbars
						jQuery('body').css({'overflow':'auto'});
			        }
				});
				
			});	//main ajax request
			
		});	//edit css button click	
	}
	
	
	/**
	 * update z-index of the layers by order value
	 */
	var updateZIndexByOrder = function(){
		for(var key in arrLayers){
			var layer = arrLayers[key];
			if(layer.order !== undefined){
				var zindex = layer.order+1;
				jQuery("#slide_layer_"+key).css("z-index",zindex);
			}
		};		
	}
	
	
	/**
	 * update the select html, set selected option, and update events.
	 */
	var updateCaptionsInput = function(arrCaptions){
		
		jQuery("#layer_caption").autocomplete("option","source",arrCaptions);
		
	}
	
	
	/**
	 * get layers array
	 */
	t.getLayers = function(){
		if(selectedLayerSerial != -1)
			updateLayerFromFields();
		
		return(arrLayers);
	}
	
	
	/**
	 * refresh layer events
	 */
	var refreshEvents = function(serial){
		
		//update layer events.
		var layer = getHtmlLayerFromSerial(serial);		
		layer.draggable({
					drag: onLayerDrag,	//set ondrag event
					grid: [1,1]	//set the grid to 1 pixel
				});

		
		layer.click(function(event){
			setLayerSelected(serial);
			event.stopPropagation();
		});
				
	}

	
	/**
	 * get layer serial from id
	 */
	var getSerialFromID = function(layerID){
		var layerSerial = layerID.replace("slide_layer_","");
		return(layerSerial);
	}
	
	/**
	 * get serial from sortID
	 */
	var getSerialFromSortID = function(sortID){
		var layerSerial = sortID.replace("layer_sort_","");
		return(layerSerial);
	}
	
	/**
	 * get html layer from serial
	 */
	var getHtmlLayerFromSerial = function(serial){
		var htmlLayer = jQuery("#slide_layer_"+serial);
		if(htmlLayer.length == 0)
			UniteAdminRev.showErrorMessage("Html Layer with serial: "+serial+" not found!");
		
		return(htmlLayer);
	}
	
	/**
	 * get sort field element from serial
	 */
	var getHtmlSortItemFromSerial = function(serial){
		var htmlSortItem = jQuery("#layer_sort_"+serial);
		if(htmlSortItem.length == 0){
			UniteAdminRev.showErrorMessage("Html sort field with serial: "+serial+" not found!");
			return(false);
		}
		
		return(htmlSortItem);
	}
	
	/**
	 * get layer object by id
	 */
	var getLayer = function(serial){
		var layer = arrLayers[serial];
		if(!layer)
			UniteAdminRev.showErrorMessage("getLayer error, Layer with serial:"+serial+"not found");
		
		//modify some data
		layer.speed = Number(layer.speed);
		layer.endspeed = Number(layer.endspeed);
		
		return layer;
	}
	
	/**
	 * get current layer object
	 */
	var getCurrentLayer = function(){
		if(selectedLayerSerial == -1){
			UniteAdminRev.showErrorMessage("Selected layer not set");
			return(null);
		}
		
		return getLayer(selectedLayerSerial);
	}
	
	
	/**
	 * set layer object to array
	 */
	var setLayer = function(layerID,layer){
		if(!arrLayers[layerID]){
			UniteAdminRev.showErrorMessage("setLayer error, Layer with ID:"+layerID+"not found");
			return(false);
		}
		arrLayers[layerID] = layer;
	}
	
	
	/**
	 * make layer html, with params from the object
	 */
	var makeLayerHtml = function(serial,objLayer){
		var type = "text";
		if(objLayer.type)
			type = objLayer.type;
		
		var zIndex = Number(objLayer.order)+1;
		
		var style = "z-index:"+zIndex+";position:absolute;";
		var html = '<div id="slide_layer_' + serial + '" style="' + style + '" class="slide_layer tp-caption '+objLayer.style+'" >';		
		
		//add layer specific html
		switch(type){
			case "image":
				html += '<img src="'+objLayer.image_url+'" alt="'+objLayer.text+'"></img>';
			break;
			default:
			case "text":
				html += objLayer.text;	
			break;
			case "video":
				
				var styleVideo = "width:"+objLayer.video_width+"px;height:"+objLayer.video_height+"px;";
				
				switch(objLayer.video_type){
					case "youtube":						
					case "vimeo":
						styleVideo += ";background-image:url("+objLayer.video_image_url+");";
					break;
					case "html5":
						if(objLayer.video_image_url !== undefined && objLayer.video_image_url != "")
							styleVideo += ";background-image:url("+objLayer.video_image_url+");";
					break;
				}
				
				html += "<div class='slide_layer_video' style='"+styleVideo+"'><div class='video-layer-inner video-icon-"+objLayer.video_type+"'>"
				html += "<div class='layer-video-title'>" + objLayer.video_title + "</div>";
				html += "</div></div>";
			break;
		}
		
		//add cross icon:
		html += "<div class='icon_cross'></div>";
		
		html += '</div>';
		return(html);
	}
	
	
	/**
	 * update layer by data object
	 */
	var updateLayer = function(serial,objData){
		var layer = getLayer(serial);
		if(!layer)
			return(false);
		
		for(key in objData){
			layer[key] = objData[key];
		}
		
		setLayer(serial,layer);
	}
	
	
	/**
	 * update current layer
	 */
	var updateCurrentLayer = function(objData){
		if(!arrLayers[selectedLayerSerial]){
			UniteAdminRev.showErrorMessage("error! the layer with serial: "+selectedLayerSerial+" don't exists");
			return(false);
		}
		
		updateLayer(selectedLayerSerial,objData);
	}
	
	
	/**
	 * add image layer
	 */
	var addLayerImage = function(urlImage){
		
		objLayer = {
			style : "",
			text : "Image " + (id_counter+1),
			type : "image",
			image_url : urlImage
		};
				
		addLayer(objLayer);
	}
	
	
	/**
	 * get video layer object from video data
	 */
	var getVideoObjLayer = function(videoData){
		
		var objLayer = {
				type:"video",
				style : "",
				video_type: videoData.video_type,
				video_width:videoData.width,
				video_height:videoData.height,
				video_data:videoData
			};
		
		if(objLayer.video_type == "youtube" || objLayer.videoType == "vimeo"){
			objLayer.video_id = videoData.id;
			objLayer.video_title = videoData.title;
			objLayer.video_image_url = videoData.thumb_medium.url;
			objLayer.video_args = videoData.args;
		}
		
		//set sortbox text
		switch(objLayer.video_type){			
			case "youtube":
				objLayer.text = "Youtube: " + videoData.title;
			break;
			case "vimeo":
				objLayer.text = "Vimeo: " + videoData.title;
			break;
			case "html5":
				objLayer.text = "Html5 Video";
				objLayer.video_title = objLayer.text;
				objLayer.video_image_url = "";
				
				if(videoData.urlPoster != "")
					objLayer.video_image_url = videoData.urlPoster;
					
			break;
		}
			
		return(objLayer);
	}
	
	
	/**
	 * add video layer
	 */
	var addLayerVideo = function(videoData){
		var objLayer = getVideoObjLayer(videoData);
		addLayer(objLayer);
	}
	
	
	/**
	 * add text layer
	 */
	var addLayerText = function(){
		
		var objLayer = {
				text:initText + (id_counter+1),
				type:"text"
		};
		
		addLayer(objLayer);
	}
	
	
	/**
	 * add layer
	 */
	var addLayer = function(objLayer,isInit){
		
		if(!isInit)
			var isInit = false;
		
		//set init fields (if not set):
		if(objLayer.order == undefined)
			objLayer.order = (id_counter);
		objLayer.order = Number(objLayer.order);
		
		//set init position
		if(objLayer.type == "video"){
			if(objLayer.left == undefined)			
				objLayer.left = initLeftVideo;
			
			if(objLayer.top == undefined)			
				objLayer.top = initTopVideo;
			
			objLayer = checkUpdateFullwidthVideo(objLayer);
			
		}else{
			if(objLayer.left == undefined)
				objLayer.left = initLeft;
			
			if(objLayer.top == undefined)			
				objLayer.top = initTop;	
		}
		
		//set animation:
		if(objLayer.animation == undefined)			
			objLayer.animation = jQuery("#layer_animation").val();
		
		//set easing:
		if(objLayer.easing == undefined)
			objLayer.easing = jQuery("#layer_easing").val();
		
		//set speed:
		if(objLayer.speed == undefined)			
			objLayer.speed = initSpeed;

		if(objLayer.align_hor == undefined)			
			objLayer.align_hor = "left";
		
		if(objLayer.align_vert == undefined)
			objLayer.align_vert = "top";
		
		//set animation:		
		if(objLayer.hiddenunder == undefined)			
			objLayer.hiddenunder = "";	

		if(objLayer.resizeme == undefined)			
			objLayer.resizeme = "";		
		
		//set image link
		if(objLayer.link == undefined)
			objLayer.link = "";
		
		//set image link open in
		if(objLayer.link_open_in == undefined)
			objLayer.link_open_in = "same";

		//set slide link:
		if(objLayer.link_slide == undefined)
			objLayer.link_slide = "nothing";
		
		//set scroll under offset
		if(objLayer.scrollunder_offset == undefined)
			objLayer.scrollunder_offset = "";				
		
		
		//set style, if empty, add first style from the list
		if(objLayer.style == undefined)
			objLayer.style = jQuery("#layer_caption").val();
		
		objLayer.style = jQuery.trim(objLayer.style);
		if(isInit == false && objLayer.type == "text" && (!objLayer.style || objLayer.style == "") ){
			objLayer.style = getFirstStyle();
		}
		
		//add time
		if(objLayer.time == undefined)			
			objLayer.time = getNextTime();
		
		objLayer.time = Number(objLayer.time);	//casting
		
		//end time:
		if(objLayer.endtime == undefined)
			objLayer.endtime = "";

		if(objLayer.endspeed == undefined)
			objLayer.endspeed = initSpeed;
		
		//set end animation:
		if(objLayer.endanimation == undefined)			
			objLayer.endanimation = jQuery("#layer_endanimation").val();
		
		//set end easing:
		if(objLayer.endeasing == undefined)
			objLayer.endeasing = jQuery("#layer_endeasing").val();
		
		//set corners
		if(objLayer.corner_left == undefined)			
			objLayer.corner_left = "nothing";
		
		if(objLayer.corner_right == undefined)			
			objLayer.corner_right = "nothing";
		
		//round position
		objLayer.top = Math.round(objLayer.top);
		objLayer.left = Math.round(objLayer.left);
		
		objLayer.serial = id_counter;
		
		arrLayers[id_counter] = objLayer;
		
		//add html
		var htmlLayer = makeLayerHtml(id_counter,objLayer);
		container.append(htmlLayer);
		
		var objHtmlLayer = getHtmlLayerFromSerial(id_counter);
		
		//update layer position
		updateHtmlLayerPosition(objHtmlLayer,objLayer.top,objLayer.left,objLayer.align_hor,objLayer.align_vert);
		
		//update corners
		updateHtmlLayerCorners(objHtmlLayer,objLayer);
		
		//update cross position
		updateCrossIconPosition(objHtmlLayer,objLayer);
		
		//add layer to sortbox
		addToSortbox(id_counter,objLayer);
		
		//refresh draggables
		refreshEvents(id_counter);
		id_counter++;
		
		//enable "delete all" button, not event, but anyway :)
		jQuery("#button_delete_all").removeClass("button-disabled");
		
		//select the layer
		if(isInit == false){
			setLayerSelected(objLayer.serial);
			jQuery("#layer_text").focus();
		}
				
	}
	
	
	
	/**
	 * 
	 * delete layer from layers object
	 */
	var deleteLayerFromObject = function(serial){
		
		var arrLayersNew = {};
		var flagFound = false;
		for (key in arrLayers){
			if(key != serial)
				arrLayersNew[key] = arrLayers[key];
			else
				flagFound = true;
		}
		
		if(flagFound == false)
			UniteAdminRev.showErrorMessage("Can't delete layer, serial: "+serial+" not found");
		
		arrLayers = arrLayersNew;
	}
	
	/**
	 * delete the layer from html.
	 */
	var deleteLayerFromHtml = function(serial){
		var htmlLayer = getHtmlLayerFromSerial(serial);
		htmlLayer.remove();
	}
		
	
	/**
	 * delete all representation of some layer
	 */
	var deleteLayer = function(serial){
		deleteLayerFromObject(serial);
		deleteLayerFromHtml(serial);
		deleteLayerFromSortbox(serial);
	}
	
	/**
	 * 
	 * call "deleteLayer" function with selected serial
	 */
	var deleteCurrentLayer = function(){
		if(selectedLayerSerial == -1)
			return(false);
		
		deleteLayer(selectedLayerSerial);
		
		//set unselected
		selectedLayerSerial = -1;
		
		//clear form and disable buttons
		disableFormFields();
	}

	
	/**
	 * duplicate layer, set it a little aside of the layer position
	 */
	var duplicateLayer = function(serial){
		var obj = arrLayers[serial];		
		var obj2 = jQuery.extend(true, {}, obj);	//duplicate object
		obj2.left += 5;
		obj2.top += 5;
		obj2.order = undefined;
		obj2.time = undefined;
		
		addLayer(obj2);
		redrawSortbox();
	}
	
	
	/**
	 * call "duplicateLayer" function with selected serial 
	 */
	var duplicateCurrentLayer = function(){
		if(selectedLayerSerial == -1)
			return(false);
		
		duplicateLayer(selectedLayerSerial);
	}
	
	
	/**
	 * delete all layers
	 */
	var deleteAllLayers = function(){

		arrLayers = {};
		container.html("");
		emptySortbox();
		selectedLayerSerial = -1;
		
		disableFormFields();
		jQuery("#button_delete_all").addClass("button-disabled");		
	}
	
	/**
	 * update the corners
	 */
	var updateHtmlLayerCorners = function(htmlLayer,objLayer){
		
		var ncch = htmlLayer.outerHeight();
		var bgcol = htmlLayer.css('backgroundColor');
		
		switch(objLayer.corner_left){
			case "curved":
				htmlLayer.append("<div class='frontcorner'></div>");				
			break;
			case "reverced":
				htmlLayer.append("<div class='frontcornertop'></div>");
			break;
		}
		
		switch(objLayer.corner_right){
			case "curved":
				htmlLayer.append("<div class='backcorner'></div>");				
			break;
			case "reverced":
				htmlLayer.append("<div class='backcornertop'></div>");
			break;
		}
		
			
		htmlLayer.find(".frontcorner").css({
            'borderWidth':ncch+"px",
            'left':(0-ncch)+'px',
            'borderRight':'0px solid transparent',
            'borderTopColor':bgcol
		});
		
		htmlLayer.find(".frontcornertop").css({
            'borderWidth':ncch+"px",
            'left':(0-ncch)+'px',
            'borderRight':'0px solid transparent',
            'borderBottomColor':bgcol
		});
		
		htmlLayer.find('.backcorner').css({
            'borderWidth':ncch+"px",
            'right':(0-ncch)+'px',
            'borderLeft':'0px solid transparent',
            'borderBottomColor':bgcol
        });		
        
		htmlLayer.find('.backcornertop').css({
             'borderWidth':ncch+"px",
             'right':(0-ncch)+'px',
             'borderLeft':'0px solid transparent',
             'borderTopColor':bgcol
         });
		 
	}
	
	/**
	 * update the position of html cross
	 */
	var updateCrossIconPosition = function(objHtmlLayer,objLayer){
		
		var htmlCross = objHtmlLayer.find(".icon_cross");
		var crossWidth = htmlCross.width();
		var crossHeight = htmlCross.height();
		var totalWidth = objHtmlLayer.outerWidth();
		var totalHeight = objHtmlLayer.outerHeight();
		var crossHalfW = Math.round(crossWidth / 2);
		var crossHalfH = Math.round(crossHeight / 2);
		
		var posx = 0;
		var posy = 0;
		switch(objLayer.align_hor){
			case "left":
				posx = - crossHalfW;
			break;
			case "center":
				posx = (totalWidth - crossWidth) / 2;
			break;
			case "right":
				posx = totalWidth - crossHalfW;
			break;
		}

		switch(objLayer.align_vert){
			case "top":
				posy = - crossHalfH;
			break;
			case "middle":
				posy = (totalHeight - crossHeight) / 2;
			break;
			case "bottom":
				posy = totalHeight - crossHalfH;
			break;
		}
		
		htmlCross.css({"left":posx+"px","top":posy+"px"});
	}
	
	
	/**
	 * update html layer position
	 */
	var updateHtmlLayerPosition = function(htmlLayer,top,left,align_hor,align_vert){
		
		//update positions by align
		var width = htmlLayer.width();
		var height = htmlLayer.height();
		var totalWidth = container.width();
		var totalHeight = container.height();
		
		var objCss = {};
		
		//handle horizontal
		switch(align_hor){
			default:
			case "left":
				objCss["right"] = "auto";
				objCss["left"] = left+"px";
			break;
			case "right":
				objCss["left"] = "auto";
				objCss["right"] = left+"px"; 
			break;
			case "center":
				var realLeft = (totalWidth - width)/2;
				realLeft = Math.round(realLeft) + left;
				objCss["left"] = realLeft + "px";
				objCss["right"] = "auto";
			break;
		}
		
		//handle vertical
		switch(align_vert){
			default:
			case "top":
				objCss["bottom"] = "auto";
				objCss["top"] = top+"px";
			break;
			case "middle":
				var realTop = (totalHeight - height)/2;
				realTop = Math.round(realTop)+top;
				objCss["top"] = realTop + "px";
				objCss["bottom"] = "auto";
			break;
			case "bottom":
				objCss["top"] = "auto";
				objCss["bottom"] = top+"px";
			break;
		}		
		
		//objCss["top"] = top+"px";		
		//objCss["top"] = top+"px";		
		
		htmlLayer.css(objCss);
	}
	
	
	/**
	 * check / update full width video position and size
	 */
	var checkUpdateFullwidthVideo = function(objLayer){
		
		if(objLayer.type != "video")
			return(objLayer);
		
		if(objLayer.video_data && objLayer.video_data.fullwidth && objLayer.video_data.fullwidth == true){
			objLayer.top = 0;
			objLayer.left = 0;
			objLayer.align_hor = "left";
			objLayer.align_vert = "top";
			objLayer.video_width = container.width();
			objLayer.video_height = container.height();
		}
				
		return(objLayer);
	}
	
	
	/**
	 * update html layers from object
	 */
	var updateHtmlLayersFromObject = function(serial){
		if(!serial)
			serial = selectedLayerSerial
			
		var objLayer = getLayer(serial);
		
		if(!objLayer)
			return(false);
		
		var htmlLayer = getHtmlLayerFromSerial(serial);
		
		//set class name
		var className = "slide_layer ui-draggable tp-caption";
		if(serial == selectedLayerSerial)
			className += " layer_selected";
		className += " "+objLayer.style;
		htmlLayer.attr("class",className);
		

		//set html
		var type = "text";
		if(objLayer.type)
			type = objLayer.type;
		
		//update layer by type:
		switch(type){
			case "image":
			break;
			case "video":	//update fullwidth position
				objLayer = checkUpdateFullwidthVideo(objLayer);
			break;
			default:
			case "text":
				htmlLayer.html(objLayer.text);
				updateHtmlLayerCorners(htmlLayer,objLayer);
				htmlLayer.append("<div class='icon_cross'></div>");
			break;
		}
		
		//set position
		updateHtmlLayerPosition(htmlLayer,objLayer.top,objLayer.left,objLayer.align_hor,objLayer.align_vert);
		
		updateCrossIconPosition(htmlLayer,objLayer);		
	}
	
	
	/**
	 * update layer from html fields
	 */
	var updateLayerFromFields = function(){
		
		if(selectedLayerSerial == -1){
			UniteAdminRev.showErrorMessage("No layer selected, can't update.");
			return(false);
		}
		
		var objUpdate = {};
		
		objUpdate.style = jQuery("#layer_caption").val();
		objUpdate.text = jQuery("#layer_text").val();
		objUpdate.top = Number(jQuery("#layer_top").val());
		objUpdate.left = Number(jQuery("#layer_left").val());				
		objUpdate.animation = jQuery("#layer_animation").val();		
		objUpdate.speed = jQuery("#layer_speed").val();
		objUpdate.align_hor = jQuery("#layer_align_hor").val();
		objUpdate.align_vert = jQuery("#layer_align_vert").val();
		objUpdate.hiddenunder = jQuery("#layer_hidden").is(":checked");
		objUpdate.resizeme = jQuery("#layer_resizeme").is(":checked");		
		objUpdate.easing = jQuery("#layer_easing").val();
		objUpdate.link_slide = jQuery("#layer_slide_link").val();
		objUpdate.scrollunder_offset = jQuery("#layer_scrolloffset").val();		
		
		objUpdate.link = jQuery("#layer_image_link").val();
		objUpdate.link_open_in = jQuery("#layer_link_open_in").val();
		
		objUpdate.endtime = jQuery("#layer_endtime").val();				
		objUpdate.endanimation = jQuery("#layer_endanimation").val();				
		objUpdate.endspeed = jQuery("#layer_endspeed").val();				
		objUpdate.endeasing = jQuery("#layer_endeasing").val();
		
		objUpdate.corner_left = jQuery("#layer_cornerleft").val();
		objUpdate.corner_right = jQuery("#layer_cornerright").val();
		
		//update object
		updateCurrentLayer(objUpdate);
		
		//update html layers
		updateHtmlLayersFromObject();
		
		//update html sortbox
		updateHtmlSortboxFromObject();
		
		//update the timeline with the new data
		updateCurrentLayerTimeline();
		
	}
	
	
	/**
	 * redraw some layer html
	 */
	var redrawLayerHtml = function(serial){
		
		var objLayer = getLayer(serial);		
		var html = makeLayerHtml(serial,objLayer)
		var htmlInner = jQuery(html).html();
		var htmlLayer = getHtmlLayerFromSerial(serial);
		
		htmlLayer.html(htmlInner);
	}
	
	
	/**
	 * update layer parameters from the object
	 */
	var updateLayerFormFields = function(serial){
		var objLayer = arrLayers[serial];
		
		jQuery("#layer_caption").val(objLayer.style);
		jQuery("#layer_text").val(objLayer.text);
		jQuery("#layer_top").val(objLayer.top);
		jQuery("#layer_left").val(objLayer.left);
		jQuery("#layer_animation").val(objLayer.animation);
		
		jQuery("#layer_easing").val(objLayer.easing);
		jQuery("#layer_slide_link").val(objLayer.link_slide);
		jQuery("#layer_scrolloffset").val(objLayer.scrollunder_offset);
		
		jQuery("#layer_speed").val(objLayer.speed);
		jQuery("#layer_align_hor").val(objLayer.align_hor);
		jQuery("#layer_align_vert").val(objLayer.align_vert);
		
		if(objLayer.hiddenunder == "true" || objLayer.hiddenunder == true)
			jQuery("#layer_hidden").prop("checked",true);
		else
			jQuery("#layer_hidden").prop("checked",false);

		if(objLayer.resizeme == "true" || objLayer.resizeme == true)
			jQuery("#layer_resizeme").prop("checked",true);
		else
			jQuery("#layer_resizeme").prop("checked",false);		
		
		jQuery("#layer_image_link").val(objLayer.link);
		jQuery("#layer_link_open_in").val(objLayer.link_open_in);
		
		jQuery("#layer_endtime").val(objLayer.endtime);
		jQuery("#layer_endanimation").val(objLayer.endanimation);
		jQuery("#layer_endeasing").val(objLayer.endeasing);
		jQuery("#layer_endspeed").val(objLayer.endspeed);
		
		//set advanced params
		jQuery("#layer_cornerleft").val(objLayer.corner_left);
		jQuery("#layer_cornerright").val(objLayer.corner_right);
				
		//set align table
		var alignClass = "#linkalign_"+objLayer.align_hor+"_"+objLayer.align_vert;
		jQuery("#align_table a").removeClass("selected");
		jQuery(alignClass).addClass("selected");
		
		//show / hide go under slider offset row
		showHideOffsetRow();
	}
	
	
	/**
	 * unselect all html layers
	 */
	var unselectHtmlLayers = function(){
		jQuery(containerID + " .slide_layer").removeClass("layer_selected");
	}
	
	
	/**
	 * set all layers unselected
	 */
	var unselectLayers = function(){
		unselectHtmlLayers();
		unselectSortboxItems();
		selectedLayerSerial = -1;
		disableFormFields();
		hideLayerTimeline();
		
		//reset elements
		jQuery("#button_edit_video_row").hide();
		jQuery("#button_change_image_source_row").hide();
		jQuery("#layer_text").css("height","80px");
		
		jQuery("#layer_image_link_row").hide();
		jQuery("#layer_link_open_in_row").hide();
	}
	
	
	/**
	 * set layer selected representation
	 */
	var setLayerSelected = function(serial){
		
		if(selectedLayerSerial == serial)
			return(false);
		
		objLayer = getLayer(serial);
		
		var layer = getHtmlLayerFromSerial(serial);
		
		//unselect all other layers
		unselectHtmlLayers();
		
		//set selected class
		layer.addClass("layer_selected");
						
		setSortboxItemSelected(serial);
		
		//update selected serial var
		selectedLayerSerial = serial;
		
		//update bottom fields
		updateLayerFormFields(serial);
		
		//enable form fields
		enableFormFields();
				
		//do specific operations depends on type
		switch(objLayer.type){
			case "video":	//show edit video button
				jQuery("#linkInsertButton").addClass("disabled");
				jQuery("#button_edit_video_row").show();
				
				jQuery("#layer_text").css("height","25px");
			break;
			case "image":	
				//disable the insert button
				jQuery("#linkInsertButton").addClass("disabled");
				
				//show / hide some elements
				jQuery("#button_change_image_source_row").show();
				jQuery("#layer_text").css("height","25px");
				jQuery("#layer_image_link_row").show();
				jQuery("#layer_link_open_in_row").show();
			break;
			default:  //set layer text to default height
				jQuery("#layer_text").css("height","80px");
			break;
		}
		
		//hide edit video button
		if(objLayer.type != "video"){
			jQuery("#button_edit_video_row").hide();
		}
		
		//hide image layer related fields
		if(objLayer.type != "image"){			
			jQuery("#layer_image_link_row").hide();
			jQuery("#layer_link_open_in_row").hide();
			jQuery("#button_change_image_source_row").hide();
		}
		
		//show/hide text related layers
		if(objLayer.type == "text"){
			jQuery("#layer_cornerleft_row").show();
			jQuery("#layer_cornerright_row").show();
			jQuery("#layer_resizeme_row").show();
		}else{
			jQuery("#layer_cornerleft_row").hide();
			jQuery("#layer_cornerright_row").hide();
			jQuery("#layer_resizeme_row").hide();
		}
						
			
		//hide autocomplete
		jQuery( "#layer_caption" ).autocomplete("close");
		
		//make layer form validations
		doCurrentLayerValidations();
		
		//update timeline of the layer
		updateCurrentLayerTimeline();
		
		//set focus to text editor
		jQuery("#layer_text").focus();
	}
	
	
	/**
	 * 
	 * return if the layer is selected or not
	 */
	var isLayerSelected = function(serial){
		return(serial == selectedLayerSerial);
	}

	/**
	 * hide in html and sortbox
	 */
	var hideLayer = function(serial,skipGlobalButton){
		var htmlLayer = jQuery("#slide_layer_"+serial);
		htmlLayer.hide();
		setSortboxItemHidden(serial);
		
		if(skipGlobalButton != true){
			if(isAllLayersHidden())
				jQuery("#button_sort_visibility").addClass("e-disabled");
		}
	}
	
	
	/**
	 * show layer in html and sortbox
	 */
	var showLayer = function(serial,skipGlobalButton){
		var htmlLayer = jQuery("#slide_layer_"+serial);
		htmlLayer.show();		
		setSortboxItemVisible(serial);
		
		if(skipGlobalButton != true)
			jQuery("#button_sort_visibility").removeClass("e-disabled");
		
	}
	
	
	/**
	 * hide all layers
	 */
	var showAllLayers = function(){
		for (serial in arrLayers)
			showLayer(serial,true);		
	}

	/**
	 * hide all layers
	 */
	var hideAllLayers = function(){
		for (serial in arrLayers)
			hideLayer(serial,true);
	}
		
		
	/**
	 * get true / false if the layer is hidden
	 */
	var isLayerVisible = function(serial){
		var htmlLayer = jQuery("#slide_layer_"+serial);
		var isVisible = htmlLayer.is(":visible");
		return(isVisible);
	}
	
	/**
	 * get true / false if all layers hidden
	 */
	var isAllLayersHidden = function(){
		for(serial in arrLayers){
			if(isLayerVisible(serial) == true)
				return(false);
		}
		
		return(true);
	}
	
	
//======================================================
//			Sortbox Functions
//======================================================	

	/**
	 * init the sortbox
	 */
	var initSortbox = function(){
				
		redrawSortbox();
		
		//set the sortlist sortable
		jQuery( "#sortlist" ).sortable({
				axis:'y',
				update: function(){
					onSortboxSorted();
				}
		});
		
		//set input time events:
		jQuery("#sortlist").delegate(".sortbox_time","keyup",function(event){
			if(event.keyCode == 13)
				onSortboxTimeChange(jQuery(this));
		});
		
		jQuery("#sortlist").delegate(".sortbox_time","blur",function(event){
			onSortboxTimeChange(jQuery(this));
		});
		
		/*
		//set input depth events:
		jQuery("#sortlist").delegate(".sortbox_depth","keyup",function(event){
			if(event.keyCode == 13)
				onSortboxDepthChange(jQuery(this));
		});
		
		jQuery("#sortlist").delegate(".sortbox_depth","blur",function(event){
			onSortboxDepthChange(jQuery(this));
		});
		*/

		jQuery("#sortlist").delegate(".sortbox_depth","focus",function(event){
			jQuery(this).blur();
		});
		
		//set click event
		jQuery("#sortlist").delegate("li","mousedown",function(){
			var serial = getSerialFromSortID(this.id);
			setLayerSelected(serial);
		});
		
		//sort type buttons events
		jQuery(".button_sorttype").click(function(){
			var mode = this.id.replace("button_sort_","");
			changeSortmode(mode);
		});
		
		//on show / hide layer icon click - show / hide layer
		jQuery("#sortlist").delegate(".sortbox_eye","mousedown",function(event){
			
			var sortboxID = jQuery(this).parent().attr("id");
			var serial = getSerialFromSortID(sortboxID);
			if(isLayerVisible(serial))
				hideLayer(serial);
			else
				showLayer(serial);
			
			//prevnt the layer from selecting
			event.stopPropagation();
		});
		
		
		//show / hide all layers
		jQuery("#button_sort_visibility").click(function(){
			var button = jQuery(this);
			if(button.hasClass("e-disabled")){	//show all
				button.removeClass("e-disabled");
				showAllLayers();
			}else{	//hide all
				button.addClass("e-disabled");
				hideAllLayers();
			}
				
		});
		
	}
	
	
	/**
	 * set sortbox items selected
	 */
	var setSortboxItemSelected = function(serial){
		var sortItem = getHtmlSortItemFromSerial(serial);			
		unselectSortboxItems();
		
		sortItem.removeClass("ui-state-default").addClass("ui-state-hover");
	}
	
	
	/**
	 * set sortbox item hidden mode
	 */
	var setSortboxItemHidden = function(serial){
		var sortItem = getHtmlSortItemFromSerial(serial);
		sortItem.addClass("sortitem-hidden");
	}
	
	/**
	 * set sortbox item visible mode
	 */
	var setSortboxItemVisible = function(serial){
		var sortItem = getHtmlSortItemFromSerial(serial);
		sortItem.removeClass("sortitem-hidden");
	}
	
	
	/**
	 * 
	 * change sortmode, display the changes
	 */
	var changeSortmode = function(mode){
		
		if(mode != "depth" && mode != "time"){
			trace("wrong mode: "+mode);
		}
		if(sortMode == mode)
			return(false);
		
		sortMode = mode;
		
		redrawSortbox();

		//change to time mode
		if(sortMode == "time"){
			
			jQuery("#button_sort_time").removeClass("ui-state-hover").addClass("ui-state-active");
			jQuery("#button_sort_depth").removeClass("ui-state-active").addClass("ui-state-hover");	
			
		}else{	//change to depth mode
			
			jQuery("#button_sort_depth").removeClass("ui-state-hover").addClass("ui-state-active");
			jQuery("#button_sort_time").removeClass("ui-state-active").addClass("ui-state-hover");
			
			updateOrderFromSortbox();
		}
	}
	
	
	/**
	 * 
	 * add layer to sortbox
	 */
	var addToSortbox = function(serial,objLayer){
		
		var isVisible = isLayerVisible(serial);
		var classLI = "";
		if(isVisible == false)
			classLI = " sortitem-hidden";
				
		var sortboxText = getSortboxText(objLayer.text);
		var depth = Number(objLayer.order)+1;
		
		var htmlSortbox = '<li id="layer_sort_'+serial+'" class="ui-state-default'+classLI+'"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>';
		htmlSortbox += '<span class="sortbox_text">' + sortboxText + '</span>';
		htmlSortbox += '<div class="sortbox_eye"></div>';
		htmlSortbox += '<input type="text" class="sortbox_time" title="Edit Timeline" value="'+objLayer.time+'">';
		htmlSortbox += '<input type="text" class="sortbox_depth" readonly title="Edit Depth" value="'+depth+'">';
		htmlSortbox += '<div class="clear"></div>';
		htmlSortbox += '</li>';
		
		jQuery("#sortlist").append(htmlSortbox);
	}
	
	
	/**
	 * 
	 * delete layer from sortbox
	 */
	var deleteLayerFromSortbox = function(serial){
		var sortboxLayer = getHtmlSortItemFromSerial(serial);
		sortboxLayer.remove();
	}
	
	/**
	 * 
	 * unselect all items in sortbox
	 */
	var unselectSortboxItems = function(){
		jQuery("#sortlist li").removeClass("ui-state-hover").addClass("ui-state-default");
	}
	
	
	/**
	 * update layers order from sortbox elements
	 */
	var updateOrderFromSortbox = function(){
		
		var arrSortLayers = jQuery( "#sortlist" ).sortable("toArray");
		
		for(var i=0;i<arrSortLayers.length;i++){
			var sortID = arrSortLayers[i];
			var serial = getSerialFromSortID(sortID);
			var objUpdate = {order:i};
			updateLayer(serial,objUpdate);
						
			//update sortbox order input
			var depth = i+1;
			jQuery("#"+sortID+" input.sortbox_depth").val(depth);
		}
		
		//update z-index of the html window by order
		updateZIndexByOrder();
	}

	/**
	 * shift order among all the layers, push down all order num beyong the given
	 * need to redraw after this function
	 */
	var shiftOrder = function(orderToFree){
		
		for(key in arrLayers){
			var obj = arrLayers[key];
			if(obj.order >= orderToFree){
				obj.order = Number(obj.order)+1;
				arrLayers[key] = obj;
			}
		}
	}
	
	
	/**
	 * get sortbox text from layer html
	 */
	var getSortboxText = function(text){
		sorboxTextSize = 50;
		var textSortbox = UniteAdminRev.stripTags(text);
		
		//if no content - escape html
		if(textSortbox.length < 2)
			textSortbox = UniteAdminRev.htmlspecialchars(text);
			
		//short text
		if(textSortbox.length > sorboxTextSize)
			textSortbox = textSortbox.slice(0,sorboxTextSize)+"...";
		
		return(textSortbox);
	}
	
	/**
	 * 
	 * redraw the sortbox
	 */
	var redrawSortbox = function(mode){
				
		if(mode == undefined)
			mode = sortMode;
				
		emptySortbox();
				
		var layers_array = getLayersSorted(mode);
		
		if(layers_array.length == 0)
			return(false);
		
		for(var i=0; i<layers_array.length;i++){
			var objLayer = layers_array[i];
			addToSortbox(objLayer.serial,objLayer);
		}
				
		if(selectedLayerSerial != -1)
			setSortboxItemSelected(selectedLayerSerial);
		
	}
		
	
	/**
	 * remove all from sortbox
	 */
	var emptySortbox = function(){
		jQuery("#sortlist").html("");
	}
	
	/**
	 * 
	 * update sortbox text from object
	 */
	var updateHtmlSortboxFromObject = function(serial){
		if(!serial)
			serial = selectedLayerSerial;

		var objLayer = getLayer(serial);
		
		if(!objLayer)
			return(false);
		
		var htmlSortItem = getHtmlSortItemFromSerial(serial);
		
		if(!htmlSortItem)
			return(false);

		var sortboxText = getSortboxText(objLayer.text);
		htmlSortItem.children(".sortbox_text").text(sortboxText);
	}
	
	/**
	 * on sortbox sorted event.
	 */
	var onSortboxSorted = function(){
		
		if(sortMode == "depth")
			updateOrderFromSortbox();
		else	//sort by time
			redistributeTimes();
		
	}
		
	
//======================================================
//			Sortbox Functions End
//======================================================	
	

//======================================================
//			Time Functions
//======================================================	
	
	/**
	 * get next available time
	 */
	var getNextTime = function(){
		var maxTime = 0;
		
		//get max time
		for (key in arrLayers){
			var layer = arrLayers[key];
			
			layerTime = (layer.time)?Number(layer.time):0;
			
			if(layerTime > maxTime)
					maxTime = layerTime;
		}
				
		var outputTime;
		if(maxTime == 0)
			outputTime = g_startTime;
		else
			outputTime = Number(maxTime) + Number(g_stepTime);
						
		return(outputTime);
	}
	
	
	/**
	 * change time on the layer from the sortbox and reorder
	 */
	var onSortboxTimeChange = function(inputBox){
		
		//update the time by inputbox:
		var timeValue = inputBox.val();
		timeValue = Number(timeValue);
		var sortLayerID = inputBox.parent().attr("id");
		var serial = getSerialFromSortID(sortLayerID);		
		var objUpdate = {time:timeValue};
		
		updateLayer(serial,objUpdate);
		
		if(sortMode == "time")
			redrawSortbox();
		
		validateCurrentLayerTimes();
	}
	
	/**
	 * change time on the layer from the sortbox and reorder
	 */
	var onSortboxDepthChange = function(inputBox){
		
		//update the time by inputbox:
		var depthValue = inputBox.val();
		depthValue = Number(depthValue);
		var order = depthValue-1;
		
		var sortLayerID = inputBox.parent().attr("id");
		var serial = getSerialFromSortID(sortLayerID);		
		var objUpdate = {order:order};
		
		updateLayer(serial,objUpdate);
		
		redrawSortbox();
		
		if(sortMode == "depth")
			updateOrderFromSortbox();
		
	}
	
	
	/**
	 * order layers by time
	 * type can be [time] or [order]
	 */
	var getLayersSorted = function(type){	
		
		if(type == undefined)
			type = "time";
		
		//convert to array
		var layers_array = [];
		for(key in arrLayers){
			var obj = arrLayers[key];
			obj.serial = key;
			layers_array.push(obj);
		}
		
		if(layers_array.length == 0)
			return(layers_array);
			
		//sort layers array
		layers_array.sort(function(layer1,layer2){
			
			switch(type){
				case "time":
					
					if(Number(layer1.time) == Number(layer2.time)){
						if(layer1.order == layer2.order)
							return(0);
						
						if(layer1.order > layer2.order)
							return(1);
						
						return(-1);
					}
					
					if(Number(layer1.time) > Number(layer2.time))
						return(1);
				break;
				case "depth":
					if(layer1.order == layer2.order)
						return(0);
					
					if(layer1.order > layer2.order)
						return(1);
				break;
				default:
					trace("wrong sort type: "+type);
				break;
			}
			
			return(-1);
		});
		
		return(layers_array);
		
	}

	
	
	/**
	 * reditribute times between the layers sorted from small to big
	 */
	var redistributeTimes = function(){
		
		//collect times to array:
		var arrTimes = [];
		for(key in arrLayers)
			arrTimes.push(Number(arrLayers[key].time));
		
		arrTimes.sort(function(a,b){return a-b});	//sort number
		
		var arrSortLayers = jQuery( "#sortlist" ).sortable("toArray");

		for(var i=0;i<arrSortLayers.length;i++){
			var sortID = arrSortLayers[i];
			var serial = getSerialFromSortID(sortID);
			
			//update time:
			var newTime = arrTimes[i];
			var objUpdate = {time:newTime};
			updateLayer(serial,objUpdate);
			
			//update input box:
			jQuery("#"+sortID+" input.sortbox_time").val(newTime);
		}
		
	}
	
	
	
//======================================================
//				Time Functions End
//======================================================	
	
	
//======================================================
//				Events Functions
//======================================================	
	
	/**
	 * 
	 * on layer drag event - update layer position
	 */
	var onLayerDrag = function(){
		
		var layerSerial = getSerialFromID(this.id);
		var htmlLayer = jQuery(this); 
		var position = htmlLayer.position();
		
		var objLayer = getLayer(layerSerial);
		
		var posTop = Math.round(position.top);
		var posLeft = Math.round(position.left);		
		var layerWidth = htmlLayer.width();
		var totalWidth = container.width();
		var layerHeight = htmlLayer.height();
		var totalHeight = container.height();
		
		var updateY,updateX;
			
		switch(objLayer.align_hor){
			case "left":
				updateX = posLeft;
			break;
			case "right":
				updateX = totalWidth - posLeft - layerWidth;
			break;
			case "center":
				updateX = posLeft - (totalWidth - layerWidth)/2;
				updateX = Math.round(updateX);
			break;
		}
		
		switch(objLayer.align_vert){
			case "top":
				updateY = posTop;
			break;
			case "bottom":
				updateY = totalHeight - posTop - layerHeight;
			break;
			case "middle":
				updateY = posTop - (totalHeight - layerHeight)/2;
				updateY = Math.round(updateY);
			break;
		}
		
		var objUpdate = {top:updateY,left:updateX};
		updateLayer(layerSerial,objUpdate);	
		
		//update the position back with the rounded numbers (improve precision)
		updateHtmlLayerPosition(htmlLayer,objUpdate.top,objUpdate.left);
		
		//update bottom fields (only if selected)
		if(isLayerSelected(layerSerial))
			updateLayerFormFields(layerSerial);
	}
	
	
	/**
	 * move some layer
	 */
	var moveLayer = function(serial,dir,step){
		var layer = getLayer(serial);
		if(!layer)
			return(false);
		
		switch(dir){
			case "down":
				arrLayers[serial].top += step;
			break;
			case "up":
				arrLayers[serial].top -= step;
			break;
			case "right":
				arrLayers[serial].left += step;
			break;
			case "left":
				arrLayers[serial].left -= step;
			break;			
			default:
				UniteAdminRev.showErrorMessage("wrong direction: "+dir);
				return(false);
			break;
		}
		
		updateHtmlLayersFromObject(serial);
		
		if(isLayerSelected(serial))
			updateLayerFormFields(serial);
	}
	

//======================================================
//		Events Functions End
//======================================================

//======================================================
//	Time Line Functions
//======================================================
	
	
	/**
	 * get some calculations like real end time
	 */
	var getLayerExtendedParams = function(layer){
				
		var endSpeed = layer.endspeed;
		if(!endSpeed)
			endSpeed = layer.speed;
		
		endSpeed = Number(endSpeed); 
		
		var endTime = layer.endtime;
		
		var realEndTime;
		
		if(!endTime || endTime == undefined || endTime == ""){	//end time does not given
			endTime = g_slideTime - Number(layer.speed);
			realEndTime = g_slideTime;
		}else{	//end time given
			realEndTime = Number(endTime) + Number(endSpeed);
		}
		
		layer.endTimeFinal = Number(endTime); 	 //time caption stay - without end transition
		layer.endSpeedFinal = Number(endSpeed); 	
		layer.realEndTime = Number(realEndTime); //time with end transition
		
		layer.timeLast = layer.realEndTime - layer.time;	//time that the whole caption last
		
		return(layer);
	}
	
	
	/**
	 * hide layer timeline
	 */
	var hideLayerTimeline = function(){
		jQuery("#layer_timeline").hide();
	}
	
	
	/**
	 * show layer timeline
	 */
	var showLayerTimeline = function(xStart,widthLast,mode){
		
		var props = {};
		props.left = xStart+"px";
		props.width = widthLast+"px";
		var layerTimeline = jQuery("#layer_timeline");
		
		if(mode == "error"){
			layerTimeline.addClass("layertime-error");
			layerTimeline.prop("title","Error - Something wrong with the caption times!");
		}
		else{
			layerTimeline.removeClass("layertime-error");
			layerTimeline.prop("title","");
		}
		
		jQuery("#layer_timeline").show().css(props);
	}
	
	
	/**
	 * update timeline of current layer
	 */
	var updateCurrentLayerTimeline = function(){
		var layer = getCurrentLayer();
		if(!layer)
			return(false);
		
		layer = getLayerExtendedParams(layer);
		
		var gTimeline = jQuery("#global_timeline");		
		var gWidth = gTimeline.width();
		
		var multiplier = gWidth / g_slideTime;
		
		var widthLast = Math.round(layer.timeLast * multiplier);
		var widthStart = Math.round(layer.speed * multiplier);
		var widthEnd = Math.round(layer.endSpeedFinal * multiplier);
				
		var xStart = Math.round(layer.time * multiplier);
		var xEnd = Math.round(layer.endTimeFinal * multiplier);	//start of the end transition
		
		var xFinal = xStart + widthLast;
		
		if(xFinal > (gWidth+1)){
			var errorWidth;
			if(xStart >= gWidth){
				hideLayerTimeline();
			}else{
				errorWidth = gWidth - xStart;
				showLayerTimeline(xStart,errorWidth,"error");	//show error timeline mode
			}
		}
		else{
			showLayerTimeline(xStart,widthLast);
		}
	}
	
	
}