/* utf8 marker ö */

// ----------------------------------------------------------------
// create the Element class
// ----------------------------------------------------------------
mlvi.Element = function(){};
mlvi.Element.prototype = {
	// ----------------------------------------------------------------
	// show the icon
	// ----------------------------------------------------------------
	mlviShowIcon: function(){
		var element = this.VIcontainer.mlviGetElementFromIndex(this.mlviIndex);
		var VIicon = null;
		
		//display the icon only if data available
		if(element.icon != null){
			VIiconID 	= this.mlviIconID;
			//show the icon
			var src = this.VIcontainer.mlviGetImagePath(element.icon.id);
			VIicon = $(VIiconID);
			if(VIicon==null){
				//define the icon
				VIicon = $.IMG(
					{
						src: 		src,
						border:		0, 
						id: 		VIiconID
					}
				);
				//add to the tree
				mlvi.appendChild(this, VIicon);
				VIicon	= $(VIiconID);
			}
	
			//save a parent reference
			VIicon.VIelement 	= this;
			VIicon.VIcontainer 	= this.VIcontainer;
	
			//extend element object
			var icon = new mlvi.Icon();
		    Object.extend(VIicon, icon);
	
		    VIicon.mlviPlace();
		}
	    return VIicon;
	},
	

	// ----------------------------------------------------------------
	// show the label
	// ----------------------------------------------------------------
	mlviShowLabel: function(){
		if(
			//hide labels and not admin mode
			(this.VIcontainer.mlviImageDefinition.hideLabels) &&
			(!this.VIcontainer.mlviGetMode())
			
		){
			return;
		}
	
		var VIlabelID 	= this.mlviLabelID;
		
		var VIlabel = null;
		var element = this.VIcontainer.mlviGetElementFromIndex(this.mlviIndex);
		//show the icon
		if(element.label != null && element.label.text!=''){
			VIlabel = $(VIlabelID);
			if(VIlabel==null){
				//define the icon
				VIlabel = $.DIV(
					{
						id: 		VIlabelID
					}				
				);
				//add to the tree
				mlvi.appendChild(this, VIlabel);
				VIlabel	= $(VIlabelID);
			}

			//save a parent reference
			VIlabel.VIelement		= this;
			VIlabel.VIcontainer		= this.VIcontainer;

			//extend element object
			label = new mlvi.Label();
		    Object.extend(VIlabel, label);
		    	
		    VIlabel.mlviPlace();
		    VIlabel.mlviSetEvents();
		    
		}
		
		return VIlabel;
	},
	
	// ----------------------------------------------------------------
	// add the icon, label, input to the element
	// ----------------------------------------------------------------
	mlviAddControls: function(){
		//show the elements in the specific order, 
		//default order is: icon,label
		var element = this.VIcontainer.mlviGetElementFromIndex(this.mlviIndex);
		if(element.order[0]=='label'){
			this.mlviShowLabel();
			this.mlviShowIcon();
		}else{
			this.mlviShowIcon();
			this.mlviShowLabel();
		}
	},
	
	// ----------------------------------------------------------------
	// generic to do after adding both elements
	// ----------------------------------------------------------------
	mlviConfigureControlsRelations: function(){
		//set the lineHeight
		if($(this.mlviIconID)!=null && $(this.mlviLabelID)!=null){
			$(this.mlviLabelID).style.lineHeight = $(this.mlviIconID).height + 'px';
		}
	},
	
	// ----------------------------------------------------------------
	// place the element in the correct position
	// ----------------------------------------------------------------
	mlviPlace: function(){
	
		//define the position of the container, concider possible scale changes
		var position = this.VIcontainer.mlviGetElementPositionFromIndex(this.mlviIndex);

		var x = this.VIcontainer.mlviTransformX(position.x);
		var y = this.VIcontainer.mlviTransformY(position.y);
	
		//set styles to the container
		this.setStyle(
			{
				position: 		'absolute', 
				left: 			x + 'px', 
				top: 			y + 'px',
				verticalAlign:	'middle'
			}
		);
	},

	// ----------------------------------------------------------------
	// place the element in the correct position
	// ----------------------------------------------------------------
	mlviSetLink: function(){
		if(!this.VIcontainer.mlviGetMode()){
			var element = this.VIcontainer.mlviGetElementFromIndex(this.mlviIndex);
			if(
				element.label!=null
				&& element.label.linkdef
				&& this.VIcontainer.mlviImageDefinition.zoomX == 100
				&& this.VIcontainer.mlviImageDefinition.zoomY == 100
			){
			
				this.innerHTML =		'<a ' + 
										'href="' + element.label.linkdef['HREF'] + '" ' +
										'target="' + element.label.linkdef['TARGET'] + '" ' +
										'style="text-decoration: none;" ' + 
									'>' + 
									this.innerHTML + 
									'</a>';
			}
		}
	},
	


	// ----------------------------------------------------------------
	// mark an element like selected
	// ----------------------------------------------------------------
	mlviSelect: function(event){
		var selectedElementIndex = this.VIcontainer.mlviGetSelectedElement();
		if(selectedElementIndex!=null){
			var element = $(this.VIcontainer.mlviGetVIelementIDFromIndex(selectedElementIndex));
			if(element!=null){
				element.setStyle(this.VIcontainer.mlviGetFormat('element', 'unselected'));
				
				//show the complete element again with default format
				//this has been implemented in order to delete everytime the complete
				//input text of the selected element.
				if(selectedElementIndex!=this.mlviIndex){
					this.VIcontainer.mlviShowElement(selectedElementIndex);
					this.VIcontainer.mlviSetEntryMode(0);
				}

				debug('debugInfo', 'Deselecting element ' + selectedElementIndex);
			}
		}
	
	
		//set the selected icon
		this.VIcontainer.mlviSetSelectedElement(this.mlviIndex);
		this.setStyle(this.VIcontainer.mlviGetFormat('element', 'selected'));
		debug('debugInfo', 'selecting ' + this.mlviIndex);

		
		//if no label defined or label is empty, display just the input text with focus
		this.mlviShowDefaultInputText();
	},
	
	// ----------------------------------------------------------------
	// full fill the edit element form
	// ----------------------------------------------------------------
	mlviEditElement: function(event){
		//get the data of the current element
		var elem = this.VIcontainer.mlviGetElementFromIndex(this.VIcontainer.mlviGetSelectedElement());		

		//------------------------------------------
		// set the label
		//------------------------------------------
		if(elem.label!=null){
			//set the text
			$('frmPropText').value = '';
			if(elem.label.text!=null){
				$('frmPropText').value = elem.label.text;
			}

			//set the link
			$('frmPropLink').value = '';
			if(elem.label.link!=null){
				$('frmPropLink').value = elem.label.link;
			}


			var styles = null;
			if(elem.label.style!=null){
				styles = elem.label.style;
			}else{
				styles = new Array();
			}
	
			styles.fontFamily 	= styles.fontFamily!=null?styles.fontFamily:'';
			styles.fontSize 		= styles.fontSize!=null?styles.fontSize:'';
			styles.color 		= styles.color!=null?styles.color:''; 
			styles.fontWeight	= styles.fontWeight!=null?styles.fontWeight:'normal';

			//set value for frmFontFamily -selectbox-
			mlvi.selectValueInSelectbox($('frmFontFamily'), styles.fontFamily);
			mlvi.selectValueInSelectbox($('frmFontSize'), styles.fontSize);
			$('frmFontColor').value = styles.color;
			
			//set the bold flag
			$('frmBold').value = styles.fontWeight;
			if($('frmBold').value=='normal' || $('frmBold').value==''){
				$('mlviFrmFontBold').src='./images/vi_bold_off.gif';
			}else{
				$('mlviFrmFontBold').src='./images/vi_bold_on.gif';
			}
		}
		
		//------------------------------------------
		// set the order
		//------------------------------------------
		var orderValue = '';
		if(elem.order!=null){
			//icon,label
			if(elem.order[0]=='icon'){
				orderValue = 'icon,label';
			//label,icon
			}else{
				orderValue = 'label,icon';
			}		
		//icon,label	
		}else{
			orderValue = 'label,icon';
		}

		$('frmOrder').value = orderValue;
		//set the image
		if(orderValue == 'icon,label'){
			$('mlviFrmProptPosB').src = './images/position_b_on.gif';
			$('mlviFrmProptPosA').src = './images/position_a_off.gif';
		}else{
			$('mlviFrmProptPosB').src = './images/position_b_off.gif';
			$('mlviFrmProptPosA').src = './images/position_a_on.gif';
		}
	},

 	// ----------------------------------------------------------------
	// set the offset in x
 	// ----------------------------------------------------------------
	mlviShowDefaultInputText: function(){
		var label = this.VIcontainer.mlviImageDefinition.elements[this.mlviIndex].label;
		//no text is present in the label
		//show a default input text 
		
		if((label == null || label.text == '') && ($(this.mlviIconID)==null)){

			var InputID 	= 	this.mlviInputID;
			var VIinput		= 	$(InputID);
			
			if(VIinput==null){
				VIinput = $.INPUT(
					{
						id: 		InputID,
						type:		'text',
						value:		mlvi.getServerLabel('DEFAULT_TEXT')
					}
				);
				//add to the tree
				mlvi.appendChild(this, VIinput);
				VIinput = $(InputID);
			}

			VIinput.VIelement 		= this;
			VIinput.VIcontainer 	= this.VIcontainer;
	
			//extend the input object
			var input = new mlvi.Input();
		    Object.extend(VIinput, input);
			VIinput.mlviSetEvents();
			
			var defaultStyles = this.VIcontainer.mlviGetFormat('label', 'default');
			VIinput.setStyle(defaultStyles);
			VIinput.focus();
		}
	},
	
	
	
 	// ----------------------------------------------------------------
	// set the offset in x
 	// ----------------------------------------------------------------
	mlviSetPosition: function(position){
		if(
			this.VIcontainer.mlviImageDefinition.elements!=null && 
			this.VIcontainer.mlviImageDefinition.elements[this.mlviIndex]!=null
		){
		
			this.VIcontainer.mlviImageDefinition.elements[this.mlviIndex].position = position;
			debug('debugInfo', 'setting position of ' + this.id + ' to (' + position.x + ', ' + position.y + ') ');
		}
		
	},

	// ----------------------------------------------------------------
	// set the element order
	// ----------------------------------------------------------------
	mlviSetElementOrder: function(order){
		//save the text in the data structure
		if(this.VIcontainer.mlviImageDefinition.elements[this.mlviIndex]!=null){
			this.VIcontainer.mlviImageDefinition.elements[this.mlviIndex].order = order;
		}
	},
	
	// ----------------------------------------------------------------
	// get the element order
	// ----------------------------------------------------------------
	mlviGetElementOrder: function(){
		//save the text in the data structure
		if(this.VIcontainer.mlviImageDefinition.elements[this.mlviIndex].order!=null){
			return this.VIcontainer.mlviImageDefinition.elements[this.mlviIndex].order;
		}
		//return default order
		return ['icon','label'];
	},

	

	// ================================================================
	// EVENT HANDLERS
	// ================================================================

	// ----------------------------------------------------------------
	// mark an element like selected
	// ----------------------------------------------------------------
	mlviEventDragSnap: function(x, y, VIelement) {
		function constrain(n, lower, upper) {
	        if (n > upper) return upper;
	        else if (n < lower) return lower;
	        else return n;
		}
      
		var VIcontainer = VIelement.handle.VIcontainer;
		var elementSize = Element.getDimensions(VIelement.element);
		var parentSize 	= Element.getDimensions($(VIcontainer.mlviBackgroundID));
		
		/*
		return[
			constrain(x, VIcontainer.mlviGetOffsetX(), VIcontainer.mlviGetOffsetX() + parentSize.width - elementSize.width),
			constrain(y, VIcontainer.mlviGetOffsetY(), VIcontainer.mlviGetOffsetY() + parentSize.height - elementSize.height)
      	];
      	*/

		return[
			constrain(x, 0, parentSize.width - elementSize.width),
			constrain(y, 0, parentSize.height - elementSize.height)
      	];


	}, 
	
	// ----------------------------------------------------------------
	// mark an element like selected
	// ----------------------------------------------------------------
	mlviEventDragChange: function(VIelement){
		var VIcontainer 	= VIelement.handle.VIcontainer;
		var VIbackground 	= $(VIcontainer.mlviBackgroundID);

		//get the possitions
		var offset = Position.cumulativeOffset(VIelement.handle);
		var backgroundDimentions = Element.getDimensions(VIbackground);
		var elementDimentions = Element.getDimensions(VIelement.handle);

		//get the possition in X
		var x = offset[0] - VIcontainer.mlviGetOffsetX();
		var maxX = backgroundDimentions.width - elementDimentions.width;
		x = ((x<0)?0:((x>maxX)?maxX:x));


		//get the possition in Y
		var y = offset[1] - VIcontainer.mlviGetOffsetY();
		var maxY = backgroundDimentions.height - elementDimentions.height;
		y = ((y<0)?0:((y>maxY)?maxY:y));
		
		var position = {x: x, y: y};
		VIelement.handle.mlviSetPosition(position);

		//debug('debugInfo', ' mlviEventDragChange moving to ' + print_r(position));
	}, 
	
	// ----------------------------------------------------------------
	// mark an element like selected
	// ----------------------------------------------------------------
	mlviDelete: function(event){
		if(event.keyCode == Event.KEY_DELETE){
			var selectedElementIndex = this.VIcontainer.mlviGetSelectedElement();		
			if(
				selectedElementIndex!=null && 
				selectedElementIndex==this.mlviIndex &&
				this.VIcontainer.mlviGetEntryMode() != 1
			){
				//delete the element from the control data
				this.VIcontainer.mlviImageDefinition.elements[this.mlviIndex] = null;
				//delete the references to the objects
				if($(this.id)!=null){
					$(this.id).remove();
				}
			
				debug('debugInfo', ' deleting element ' + this.id);
			}
		}
	},
	
	
	// ----------------------------------------------------------------
	// add events to the Element
	// it will add the events only for admin mode
	// ----------------------------------------------------------------
	mlviSetEvents: function(){
		//check if the element is read only
		var readOnly = 0;
		if(this.VIcontainer.mlviImageDefinition.elements[this.mlviIndex].readonly!=null){
			readOnly = 1;
		}
		if(this.VIcontainer.mlviGetMode() && !readOnly){
			//set draggable
			new Draggable(
				this,
				{
				    snap:		this.mlviEventDragSnap,
				    change:		this.mlviEventDragChange
			    }
			);

			// -----------------------------------
			// set the events
			// -----------------------------------
		    //add support for select item
			if(this.mlviEventKeyPressCache==null){
				this.mlviEventKeyPressCache = this.mlviEventKeyPress.bindAsEventListener(this);
				Event.observe(document, 'keypress',	this.mlviEventKeyPressCache);
			}

			//select elemtent
			if(this.mlviEventMouseDownCache==null){
				this.mlviEventMouseDownCache = this.mlviEventMouseDown.bindAsEventListener(this);
			    Event.observe(this, 'mousedown', this.mlviEventMouseDownCache);
			}
		}
	},


	// ================================================================
	// EVENT HANDLERS
	// ================================================================
	
	// ----------------------------------------------------------------
	// mark an element like selected
	// ----------------------------------------------------------------
	mlviEventMouseDown: function(event){
		debug('debugInfo', ' mlviEventMouseDown on ' + this.id);

		//select the element
		this.mlviSelect();
		this.mlviEditElement();
	},
	
	// ----------------------------------------------------------------
	// mark an element like selected
	// ----------------------------------------------------------------
	mlviEventKeyPress: function(event){
		this.mlviDelete(event);
	},
	

	
	
	
	NADA: ''
}