/* Defines a clip object for the handling of clipplings upon the canvas
	requires holder.css
	requires scriptaculous.js
 */
 
var cliparr = new Array();

function getHighestZIndex(){
	var high = 0;
	for (var clipkey in cliparr){
		var aclip = cliparr[clipkey];
		if (typeof aclip == 'object'){
			if (aclip.holder.style.zIndex > high){
				high = aclip.holder.style.zIndex;
			}
		}
	}
	return high;
}

function clip(id){
	this.id = id;
	//current cords
	this.x = 0;
	
	this.y = 0;
	//are we previewing this clip true or false
	this.preview = false;
	
	this.visible = false;
	
	this.holder = document.createElement('div');
	
	this.clipData = '';
	
	this.load = function (x,y){
		this.holder.style.top = y + 'px';
		this.holder.style.left = x + 40 + 'px';
		this.getClipData();
		this.show();		
	}
	
	this.show = function (){
		if (this.holderbody.innerHTML == ''){
			this.holderbody.innerHTML = this.clipData;
		}
		this.visible = true;
		this.holder.style.visibility = 'visible';		
	}
	
	this.detachPreview = function (){
		this.preview = false;
		
		var canvas = document.getElementById('canvas');
		var cpos = findPos(canvas);
		var cwidth = canvas.offsetWidth;
		var cheight = canvas.offsetHeight;
		//center holder in canvas
		var newx = cpos[0] + (cwidth / 2) - (Math.round(this.holder.offsetWidth / 2));
		var newy = cpos[1] + (cheight / 2) - (Math.round(this.holder.offsetHeight / 2));
	
		this.holder.style.top = newy + 'px';
		this.holder.style.left = newx + 'px';
		this.holder.style.zIndex = getHighestZIndex() + 1;
	}
	
	this.hide = function (){
		this.holderbody.innerHTML = '';
		this.holder.style.visibility = 'hidden';	
	}
	
	this.getClipData = function (){
		var req = new Ajax.Request('/manube/index.php',
		  {
		    method:'get',
		    parameters: {id: this.id, previewclip: true},
		    onSuccess: function(transport){
		      var response = transport.responseXML || "Empty clip.";
		      var clipel = response.childNodes[0];
		      var id = clipel.getAttribute("id");
		      cliparr[id].updateHolderBody(response);
		    },
		    onFailure: function(){ alert('failed');  this.updateHolderBody('Could not retrieve clip.'); }
		  });
	}
	
	this.updateHolderBody = function (response){
		var clipel = response.childNodes[0];
		var urlel = clipel.childNodes[0];
		var url = urlel.childNodes[0].nodeValue;
		var domain = urlel.getAttribute("domain");
		var cliphtml = clipel.childNodes[1].nodeValue;
		var id = clipel.getAttribute("id");
		var width = clipel.getAttribute("width");
		var height = clipel.getAttribute("height");
		var type = clipel.getAttribute("type");
		var holdertop = this.holdertop;
		var holderbody = this.holderbody;
		var holder = this.holder;
		
		
		
		holdertop.innerHTML = 'From <a href="' + url + '" target="_blank">' + domain + '</a>';
		holdertop.style.paddingLeft = '3px';
		holderbody.innerHTML = cliphtml;
		this.clipData = cliphtml;
		
		if (width < 600){
			holdertop.style.width = (width - 4) + 'px';
			holder.style.width = width + 'px';
		}
		if (height < 700){
			//make height auto
			//holderbody.style.height = height + 'px';
		}
	
	}
	
	this.overHolder = function (event){
	
	}
	
	this.outofHolder = function (event){
		
	}
	
	this.onStartDrag = function (){
		this.preview = false;
		
		return true;
	}
	
	this.onDrag = function (){
		
		return true;
	}
	
	this.onEndDrag = function (){
		this.holder.style.zIndex = (parseInt(getHighestZIndex()) + 1);
		//alert(this.holder.style.zIndex);
		return false;
	}

	
	//now to instatiate object create holder div
	
	this.holder.className = 'holder';
	this.holder.id = 'holder' + id;
	this.holder.innerHTML = "<div class=\"holder_top\" id=\"holder_top" + id + "\">Loading...</div><div class=\"holder_body\" id=\"holder_body" 
		+ id + "\"><img src=\"images/ajax-loader.gif\" width=\"42\" height=\"42\" /></div>";
	this.holdertop = this.holder.childNodes[0];
	this.holderbody = this.holder.childNodes[1];
	//need to sort out this issue with event handlers
	var clip = this;
	
	this.holder.onmouseover = function(event){  };
	this.holder.onmouseout = function(event){  };
	
	this.visible = false;
	//hide element to begin with, must call display to see
	this.holder.style.visibility = 'hidden';
	
	

	//add this to clip array for external usage
	cliparr[this.id] = this;
	document.body.appendChild(this.holder);
	
	this.dragObj = new Draggable('holder' + this.id,{
      	  onStart:function(){ return clip.onStartDrag(); },
      	  onDrag:function(){ return clip.onDrag(); },
     	  onEnd:function(){ return clip.onEndDrag(); }
   	});
}