/* utf8 marker ö */

// ----------------------------------------------------------------
// create the container class
// ----------------------------------------------------------------
mlvi.Container = function(){};

mlvi.Container.prototype = {
 	// ----------------------------------------------------------------
	// show the elements
 	// ----------------------------------------------------------------
	mlviShowElements: function(){
		var elements = this.mlviGetCurrentElements();
		for(var i=0; i<elements.length; i++){
			this.mlviShowElement(i);
		}
	},
	
 	// ----------------------------------------------------------------
	// show the element
 	// ----------------------------------------------------------------
	mlviShowElement: function(index){
		var VIelementID  =	this.mlviGetVIelementIDFromIndex(index);
		var VIelement	 = 	$(VIelementID);

		//remove the element to paint it completely
		//it is very important ... 
		if(VIelement!=null){
			VIelement.remove();
			VIelement = null;
		}
		
		var VIlabelID    =	mlvi.OBJECT_LABEL_PREFIX + 
							this.mlviGetVIID() + '_' + 
							index;		
		var VIinputID 	 =	VIlabelID + '_input';
		var VIiconID 	 =	mlvi.OBJECT_ICON_PREFIX + 
							this.mlviGetVIID() + '_' + 
							index;
		
		//if no container, add the container
		if(VIelement==null){
			VIelement = $.DIV({'id': VIelementID});
			mlvi.appendChild(this, VIelement);
			VIelement	= $(VIelementID);
		}else{
			//clean all elements
			if($(VIlabelID)!=null)$(VIlabelID).remove();
			if($(VIinputID)!=null)$(VIinputID).remove();
			if($(VIiconID)!=null)$(VIiconID).remove();
		}
		
		//set all IDs
		VIelement.mlviIndex 	= index;
		VIelement.mlviLabelID 	= VIlabelID;
		VIelement.mlviIconID 	= VIiconID;
		VIelement.mlviInputID	= VIinputID;
		VIelement.VIcontainer	= this;
		
		//extend element object
		element = new mlvi.Element();
	    Object.extend(VIelement, element);

		VIelement.mlviAddControls();
		VIelement.mlviConfigureControlsRelations();
		VIelement.mlviPlace();
		VIelement.mlviSetEvents();

		debug('debugInfo', 'Showing element ' + VIelementID);
		
		//set the links only in client mode
		VIelement.mlviSetLink();

		return VIelement;
	},
		
 	// ----------------------------------------------------------------
	// get one element from specific index
 	// ----------------------------------------------------------------
	mlviGetElementFromIndex: function(index){
		var elements = this.mlviGetCurrentElements();
		return elements[index]?elements[index]:null; 
	},
	
 	// ----------------------------------------------------------------
	// get one element position from index
 	// ----------------------------------------------------------------
	mlviGetElementPositionFromIndex: function(index){
		var elements = this.mlviGetCurrentElements();
		if(elements[index]!=null){
			return elements[index].position?elements[index].position:null;
		}
		return null;		
	},
	
 	// ----------------------------------------------------------------
	// get one element label from index
 	// ----------------------------------------------------------------
	mlviGetElementLabelFromIndex: function(index){
		var elements = this.mlviGetCurrentElements();
		if(elements[index]!=null){
			return elements[index].label?elements[index].label:null;
		}
		return null;		
	},
	
 	// ----------------------------------------------------------------
	// set one element label from index
 	// ----------------------------------------------------------------
	mlviSetElementLabelText: function(index, text){
		if(
			this.mlviImageDefinition != null && 
			this.mlviImageDefinition.elements != null &&
			this.mlviImageDefinition.elements[index] != null &&
			this.mlviImageDefinition.elements[index].label != null		
		){
			this.mlviImageDefinition.elements[index].label.text = text;
		}
	},
	
 	// ----------------------------------------------------------------
	// set one element label from index
 	// ----------------------------------------------------------------
	mlviSetElementLabelLink: function(index, link){
		if(
			this.mlviImageDefinition != null && 
			this.mlviImageDefinition.elements != null &&
			this.mlviImageDefinition.elements[index] != null &&
			this.mlviImageDefinition.elements[index].label != null		
		){
			this.mlviImageDefinition.elements[index].label.link = link;
		}
	},
	
 	// ----------------------------------------------------------------
	// set styles to the label
 	// ----------------------------------------------------------------
	mlviSetElementLabelStyles: function(index, style){
		if(
			this.mlviImageDefinition != null 
			&& this.mlviImageDefinition.elements != null
			&& this.mlviImageDefinition.elements[index] != null
			&& this.mlviImageDefinition.elements[index].label != null
			//&& this.mlviImageDefinition.elements[index].label.style == null		
		){
			this.mlviImageDefinition.elements[index].label.style = style;
		}
	},
	
 	// ----------------------------------------------------------------
	// set the element order
 	// ----------------------------------------------------------------
	mlviSetElementOrder: function(index, order){
		if(
			this.mlviImageDefinition != null && 
			this.mlviImageDefinition.elements != null &&
			this.mlviImageDefinition.elements[index] != null &&
			this.mlviImageDefinition.elements[index].order != null
		){
			if(order=='icon,label'){
				this.mlviImageDefinition.elements[index].order = ['icon','label'];
			}else{
				this.mlviImageDefinition.elements[index].order = ['label','icon'];
			}
		}
	},
	
 	// ----------------------------------------------------------------
	// show the background image
 	// ----------------------------------------------------------------
	mlviShowBackground: function(){
		var background 			= this.mlviGetCurrentBackground();
		var VIbackgroundID		= mlvi.OBJECT_BG_PREFIX + this.mlviGetVIID();
		this.mlviBackgroundID 	= VIbackgroundID;
		
		//define the background image
		var src = this.mlviGetImagePath(background.id);
		var VIbackground = $(this.mlviBackgroundID);
		var backgroundStyles = {};
				
		if(VIbackground==null){
			VIbackground = $.IMG(
				{
					id: 	this.mlviBackgroundID
				}
			);
			mlvi.appendChild(this, VIbackground);
			VIbackground = $(this.mlviBackgroundID);
			backgroundStyles.zIndex = 0;
			if(this.mlviImageDefinition.backgroundBorder!=null){
				backgroundStyles.border = this.mlviImageDefinition.backgroundBorder;
			}
		}
		
		//if no bg was found, use the empty icon
		if(src==''){
			src="./images/dot.gif";		
		}
		//update the value
		VIbackground.src = src;


		//control zoom, resize and set scales ...
		var dimentions = this.mlviImageDefinition.background;
		if(this.mlviImageDefinition.zoom){
			this.mlviImageDefinition.zoomX = this.mlviImageDefinition.zoom;
			this.mlviImageDefinition.zoomY = this.mlviImageDefinition.zoom;
		}else if(this.mlviImageDefinition.forceWidth){
			var zoom = this.mlviImageDefinition.forceWidth*100/dimentions.width;
			this.mlviImageDefinition.zoomX = zoom;
			this.mlviImageDefinition.zoomY = zoom;
		}else if(this.mlviImageDefinition.forceHeight){
			var zoom = this.mlviImageDefinition.forceHeight*100/dimentions.height;
			this.mlviImageDefinition.zoomX = zoom;
			this.mlviImageDefinition.zoomY = zoom;
		}else if(this.mlviImageDefinition.forceWidth && this.mlviImageDefinition.forceHeight){
			this.mlviImageDefinition.zoomX = this.mlviImageDefinition.forceWidth*100/dimentions.width;
			this.mlviImageDefinition.zoomY = this.mlviImageDefinition.forceHeight*100/dimentions.height;
		}else{
			this.mlviImageDefinition.zoomX = 100;
			this.mlviImageDefinition.zoomY = 100;
		}

		//set dimentions only in client mode
		if(!this.mlviGetMode()){
			backgroundStyles.width 	= this.mlviTransformX(dimentions.width);
			backgroundStyles.height = this.mlviTransformY(dimentions.height);
		}			
		
		//set the styles
		VIbackground.setStyle(backgroundStyles);

		// ---------------------------------		
		// admin support for drag and drop
		// ---------------------------------
		if(this.mlviGetMode()){
			Droppables.add(
				VIbackground,
				//params
				{
					accept:			'mlviIcon',
					onDrop:			this.mlviContainerOnDrop.bindAsEventListener(this),
					onHover:		function(){}
				}
			);
		}
	},

 	// ----------------------------------------------------------------
	// show the buttons
 	// ----------------------------------------------------------------
	mlviButtons: function(){
		// ---------------------------------		
		// admin support for saveing the complete data
		// ---------------------------------
		if(this.mlviGetMode()){
			//add the save button
			var saveID 		= 'btnSave_' + this.mlviGetVIID();
			var VIsaveID	= $(saveID);
			if(VIsaveID==null){
				VIsave = $.INPUT(
					{
						'id': 		saveID,
						'type':		'button',
						'value':	mlvi.getServerLabel('BTN_SAVE')
					}
				);
				mlvi.appendChild($('mlviVirtualImageButtons'), VIsave);
			}
			
			//add some space ...
			mlvi.appendChild($('mlviVirtualImageButtons'), '  ');
			

			//add the cancel button
			var cancelID 	= 'btnCancel_' + this.mlviGetVIID();
			var VIcancelID	= $(cancelID);
			if(VIcancelID==null){
				VIcancel = $.INPUT(
					{
						'id': 		cancelID,
						'type':		'button',
						'value':	mlvi.getServerLabel('BTN_CANCEL')
					}
				);
				mlvi.appendChild($('mlviVirtualImageButtons'), VIcancel);
			}
		}
	},



 	// ----------------------------------------------------------------
	// image on Drop
	// in order to call this function with the container object as "this"
	// we use the function "bindAsEventListener"
	// then,  we can reference the VIcontainer directly with this inside this function
	// the problem is that when we do that, the parameters of this function:
	// VIelement and VIbackground, both are the same and reference the "dragable"
 	// ----------------------------------------------------------------
	mlviContainerOnDrop: function(VIelement, VIbackground, event){
		//get the new icon data the name is using the prefix mlviDRAG_[ID]
		var id = 0;
		if(VIelement.id != this.mlviImageDefinition.textIconId){
			id = VIelement.id.substr(mlvi.OBJECT_DRAG_ICON_PREFIX.length);
		}

		//get the possitions
		var offset 					= Position.cumulativeOffset(VIelement);
		var backgroundDimentions 	= Element.getDimensions($(this.mlviBackgroundID));
		var iconDimentions 			= Element.getDimensions(VIelement);

		//get the possition in X
		var x = offset[0] - this.mlviGetOffsetX();
		var maxX = backgroundDimentions.width - iconDimentions.width;
		x = ((x<0)?0:((x>maxX)?maxX:x));
		
		//get the possition in Y
		var y = offset[1] - this.mlviGetOffsetY();
		var maxY = backgroundDimentions.height - iconDimentions.height;
		y = ((y<0)?0:((y>maxY)?maxY:y));
		
		var elementData = {
			icon:		(id?{id: id}:null),
			position:	{x: x, y: y},
			order:		['icon', 'label'],
            label:      {
                text:	'',
                style:	this.mlviGetFormat('label', 'default')
            }
		};

		this.mlviAddElement(elementData, true, true);
	},


 	// ----------------------------------------------------------------
	// add an element to the control structure, "show" defined, 
	// it will be authomatically showed in the VI
 	// ----------------------------------------------------------------
	mlviAddElement: function(elementData, show, select){
		//if no array with elements, create it
		if(this.mlviImageDefinition.elements == null){
			this.mlviImageDefinition.elements = new Array();
		}
		
		var newIndex = this.mlviImageDefinition.elements.length;
		this.mlviImageDefinition.elements[newIndex] = elementData;
		
		if(show){
			var element = this.mlviShowElement(newIndex);

			//select the element if the flag is set to yes
			if(select){
				element.mlviSelect();
				element.mlviEditElement();
			}
		}
		if(elementData.icon!=null){
			debug('debugInfo', 'Adding element ' + elementData.icon.id + ' in (' + elementData.position.x + ', ' + elementData.position.y + ') with index: '+ newIndex);
		}else{
			debug('debugInfo', 'Adding text element in (' + elementData.position.x + ', ' + elementData.position.y + ') with index: '+ newIndex);
		}
		return newIndex;
	},


 	// ----------------------------------------------------------------
	// get the current elements
 	// ----------------------------------------------------------------
	mlviGetCurrentElements: function(){
		return this.mlviImageDefinition.elements;
	},	

 	// ----------------------------------------------------------------
	// get the current background image
 	// ----------------------------------------------------------------
	mlviGetCurrentBackground: function(){
		//it has to be redefined to get the current Background dynamically
		return this.mlviImageDefinition.background;
	},
	
 	// ----------------------------------------------------------------
	// get default background with
 	// ----------------------------------------------------------------
	mlviGetDefaultBackgroundWidth: function(){
		//it has to be redefined to get the current Background dynamically
		return this.mlviImageDefinition.background.defaultWidth;
	},
	
 	// ----------------------------------------------------------------
	// get default background height
 	// ----------------------------------------------------------------
	mlviGetDefaultBackgroundHeight: function(){
		//it has to be redefined to get the current Background dynamically
		return this.mlviImageDefinition.background.defaultHeight;
	},
 	// ----------------------------------------------------------------
	// set the offset in x
 	// ----------------------------------------------------------------
	mlviGetOffsetX: function(){
        var ref = document.images[this.mlviBackgroundID];
        var xPos = ref.offsetLeft;
        var parentObj = ref.offsetParent;
        while (parentObj != null) {
            xPos += parentObj.offsetLeft;
            parentObj = parentObj.offsetParent;
        }

        return xPos;
		//var offset = Position.cumulativeOffset($(this.mlviBackgroundID));
		//return offset[0];
	},
	
 	// ----------------------------------------------------------------
	// set the offset in x
 	// ----------------------------------------------------------------
	mlviGetOffsetY: function(){
        var ref = document.images[this.mlviBackgroundID];
        var yPos = ref.offsetTop;
        var parentObj = ref.offsetParent;
        while (parentObj != null) {
            yPos += parentObj.offsetTop;
            parentObj = parentObj.offsetParent;
        }
        
        return yPos;
        
		//var offset = Position.cumulativeOffset($(this.mlviBackgroundID));
		//return offset[1];
	},
	
	
 	// ----------------------------------------------------------------
	// set the offset in x
 	// ----------------------------------------------------------------
	mlviGetMode: function(){
		return this.mlviImageDefinition.mode;
	},
	
 	// ----------------------------------------------------------------
	// set the offset in x
 	// ----------------------------------------------------------------
	mlviTransformX: function(x){
		var ret=x;
		ret = x*this.mlviImageDefinition.zoomX/100;
		return ret;
	},
	
 	// ----------------------------------------------------------------
	// set the offset in x
 	// ----------------------------------------------------------------
	mlviTransformY: function(y){
		var ret=y;
		ret = y*this.mlviImageDefinition.zoomY/100;
		return ret;
	},
	
 	// ----------------------------------------------------------------
	// get the url of one specific image
 	// ----------------------------------------------------------------
	mlviGetImagePath: function(id){	
		var path = '';
		if(id){
			//get the image information directly with AJAX
		
			path = this.mlviImageDefinition.imgurl + '=' + id;
		}
		
		return path;
	},
	
 	// ----------------------------------------------------------------
	// get the url of one specific image
 	// ----------------------------------------------------------------
	mlviGetVIID: function(id){
		return this.mlviImageDefinition.id;
	}, 

 	// ----------------------------------------------------------------
	// set the url of one specific image
 	// ----------------------------------------------------------------
	mlviSetSelectedElement: function(index){
		this.mlviSelectedElement = index;
	},
	
 	// ----------------------------------------------------------------
	// get the url of one specific image
 	// ----------------------------------------------------------------
	mlviGetSelectedElement: function(){
		return this.mlviSelectedElement;
	},
	
 	// ----------------------------------------------------------------
	// set the entry mode, 
	// 1 => we are writing in one input text
	// 0 or null => otherways
 	// ----------------------------------------------------------------
	mlviSetEntryMode: function(mode){
		this.mlviEntryMode = mode;
		debug('debugInfo', 'setting the entry mode to ' + this.mlviEntryMode);
	},	

 	// ----------------------------------------------------------------
	// get the entry mode, 
 	// ----------------------------------------------------------------
	mlviGetEntryMode: function(){
		return this.mlviEntryMode;
	},	

	// ----------------------------------------------------------------
	// return the format defined in the configuration file
	//                 format:     {
	//                     element:    {
	//                         selected:   {
	//                             border:         '2px solid red'
	//                         }
	//                     }
	//                 },
	// 	
	// ----------------------------------------------------------------
	mlviGetFormat: function(element, type){
		var style = null;
		var format = this.mlviImageDefinition.format;
		
		if(format != null && format[element] != null && format[element][type] != null){
			style = format[element][type];
		}
		
		return style;
	},
	
 	// ----------------------------------------------------------------
	// get one element ID from specific index
 	// ----------------------------------------------------------------
	mlviGetVIelementIDFromIndex: function(index){
		var VIelementID  =	mlvi.OBJECT_CONT_PREFIX + 
							this.mlviGetVIID() + '_' + 
							index;
						
		return VIelementID;
	},
	
 	// ----------------------------------------------------------------
	// get one element ID from specific index
 	// ----------------------------------------------------------------
	mlviServerSaveImageDefinition: function(){
		var success = 0;
		
		//define the image name ... 
		name = ($('mlviFrmImageName').value!=null?$('mlviFrmImageName').value:'');
		
		//redefine only the non ReadOnly elements
		var ownElements = [];
		for(var i=0; i<this.mlviImageDefinition.elements.length; i++){
			
			if(
				this.mlviImageDefinition.elements[i]==null ||
				(this.mlviImageDefinition.elements[i]!=null && this.mlviImageDefinition.elements[i].readonly)
			){
				continue;
			}
			
			ownElements[ownElements.length] = this.mlviImageDefinition.elements[i];
		}
		
		//correct background dimentions
		var dimentions = $(this.mlviBackgroundID).getDimensions();
		this.mlviImageDefinition.background.width 	= dimentions.width;
		this.mlviImageDefinition.background.height 	= dimentions.height;

		var parameters = {
			'id_link':			serverParams.serverIdLink,
			'ajaxRequestID':	'SAVE_VI',
			'VIname':			name.toJSONString(),
			'VIbackground':		this.mlviImageDefinition.background.toJSONString(),
			'VIelements':		ownElements.toJSONString(),
			'VIID':				this.mlviImageDefinition.id.toJSONString(),
			'medlib_dir_id':	serverParams.serverMedDirID
		};
		
		new Ajax.Request(
			serverParams.serverURL, 
			{
		  		method: 	'post',
		  		parameters:	parameters,		  		
				onComplete: function(transport) {
					eval('var response=' + transport.responseText);
					//alert(print_r(response));
					if(response.errCode){
						alert(response.ErrorMessage);
					}else{
						if(response.relocate){
							document.location = response.relocate + '&ExeMessage=' + response.ExeMessage;
						}
					}
				},
				
				onException:function(transport, error){alert(error);}/*,
				onFailure:function(){alert('onFailure')},
				onInteractive:function(){alert('onInteractive')},
				onLoaded:function(){alert('onLoaded')},
				onLoading:function(){alert('onLoading')},
				onSuccess:function(){alert('onSuccess')},
				onUninitialized:function(){alert('onUninitialized')}*/
				
				
			}
		);	
			
		return success;
	},
	
	
	// ------------------------------------------------------------
	// update the properties of the element contained in index
	// the data will be taken from the elements form.
	// ------------------------------------------------------------		
	mlviUpdateElementProperties: function(index){
		if(index==null){
			alert(mlvi.getServerLabel('PROP_PROP_ERR_SELECT'));
			return;
		}
		
		//save the text
		this.mlviSetElementLabelText(index, $F('frmPropText'));
		
		//save the link
		this.mlviSetElementLabelLink(index, $F('frmPropLink'));
		
		//save the order
		this.mlviSetElementOrder(index, $F('frmOrder'));

		//set the font styles
		var styles = {
	        fontFamily:    $F('frmFontFamily'),
	        fontSize:      $F('frmFontSize'),
	        color:         $F('frmFontColor'),
	        fontWeight:	   $F('frmBold')
		};

		this.mlviSetElementLabelStyles(index, styles);
		var elem = this.mlviShowElement(index);
		elem.mlviSelect();
		elem.mlviEditElement();
		
	},

	// ------------------------------------------------------------
	// set the elements order
	// ------------------------------------------------------------		
	mlviMarkElementOrder: function(elemID){
		var elem = $(elemID);
		if(elem!=null){
			//mlviFrmProptPosB, ./images/position_b_off.gif
			//mlviFrmProptPosA, ./images/position_a_off.gif
			var type = '';
			var value = '';
			var theOder = '';
			if(elemID=='mlviFrmProptPosB'){
				type = 'b';
				value = 'icon,label';
				theOder = 'mlviFrmProptPosA';
			}else{
				type = 'a';
				value = 'label,icon';
				theOder = 'mlviFrmProptPosB';
			}

			var nameOff = './images/position_' + (type=='b'?'a':'b') + '_off.gif';
			var nameOn = './images/position_' + type + '_on.gif';
			//change status
			elem.src  = nameOn;
			$('frmOrder').value = value;			
			if($(theOder)!=null){		
				$(theOder).src = nameOff;
			}
		}
	},
	
	// ------------------------------------------------------------
	// set the elements bold
	// ------------------------------------------------------------		
	mlviMarkElementBold: function(elemID){
		var elem = $(elemID);
		if(elem!=null){
			var nameOff = './images/vi_bold_off.gif';
			var nameOn = './images/vi_bold_on.gif';
			//change status
			if($('frmBold')!=null){
				//from disabled => enabled
				if($('frmBold').value=='normal' || $('frmBold').value==''){
					$('frmBold').value='bold';
					elem.src  = nameOn;
				
				//from enabled => disabled
				}else{
					$('frmBold').value='normal';
					elem.src  = nameOff;
				}
			}
		}
	},
	
		
	
	// ----------------------------------
	// set events
	// ----------------------------------		
	mlviSetEvents: function(event){
		if(this.mlviGetMode()){
			var saveID 		= 'btnSave_' + this.mlviGetVIID();
			var cancelID 	= 'btnCancel_' + this.mlviGetVIID();
			var updateID	= 'mlviFrmUpdateProperties';
			
	
			Event.observe($(updateID), 				'click', this.mlviEventUpdateElementProperties.bindAsEventListener(this));
			Event.observe($(saveID), 				'click', this.mlviEventSaveClick.bindAsEventListener(this));
			Event.observe($(cancelID), 				'click', this.mlviEventCancelClick.bindAsEventListener(this));

			//order events
			$('mlviFrmProptPosA').VIcontainer = this;
			$('mlviFrmProptPosB').VIcontainer = this;
			Event.observe($('mlviFrmProptPosA'),	'click', this.mlviEventSetOrder.bindAsEventListener($('mlviFrmProptPosA')));
			Event.observe($('mlviFrmProptPosB'),	'click', this.mlviEventSetOrder.bindAsEventListener($('mlviFrmProptPosB')));

			//bold event
			$('mlviFrmFontBold').VIcontainer = this;
			Event.observe($('mlviFrmFontBold'),	'click', this.mlviEventSetBold.bindAsEventListener($('mlviFrmFontBold')));
			

		}
	},
	

 	// ==================================================================
	// EVENTS
 	// ==================================================================
	mlviEventSaveClick: function(event){
		this.mlviServerSaveImageDefinition();
	},
	
	mlviEventCancelClick: function(event){
		history.back();
	},
	
	mlviEventUpdateElementProperties: function(event){
		debug('debugInfo', ' mlviEventUpdateElementProperties on ' + this.id);
		this.mlviUpdateElementProperties(this.mlviGetSelectedElement());
	},
	
	mlviEventSetOrder: function(event){
		debug('debugInfo', ' mlviEventSetOrder on ' + this.id);
		this.VIcontainer.mlviMarkElementOrder(this.id);
	},
	
	mlviEventSetBold: function(event){
		debug('debugInfo', ' mlviEventSetBold on ' + this.id);
		this.VIcontainer.mlviMarkElementBold(this.id);
	},
	
	
	
	
	NADA: ''
	
	

};