this.dragableCount=5;

this.dragable = function()
{
	var dragableDiv=''+
	'<div id="DefaultDrag">'+
		'<div id="defaultID" class="DragableWrapper" style="display:none;">'+
			'<div id="defaultDragableIDArea" class="DragableTitleArea dragable">'+
				'<div class="drabableTitle">'+
					'Title'+
				'</div>'+
				'<div class="drabableTitleClose">'+
					'<table height="100%"><tr><td height="100%" align="center" valign="middle"><input type="image" id="defaultHideID" src="'+BASE_URL+'/images/delete.png" style="padding:0;margin:0;" align="right" class="closeDragables" style="cursor:pointer;"></td></tr></table>'+
				'</div>'+
			'</div>'+
			'<div class="DragableDataArea">'+
				'&nbsp;'+
			'</div>'+
		'</div>'+
	'</div>';
	
	$("body").append(dragableDiv);
};


this.createDragable = function (callBackFunc)
{
	this.dragableCount++;
	
	var defaultDrag=$('#DefaultDrag').html();
	$('#DefaultDrag').html('');
	$("body").append(defaultDrag);
	
	while($('#dragableID_'+dragableCount)==null)
	{
		dragableCount++;
	}
	
	$('#defaultID').attr('id','dragableID_'+dragableCount);
	$('#defaultDragableIDArea').attr('id',dragableCount);
	
	
	$('#defaultHideID').attr('id','defaultHideID_'+dragableCount);
	$('#defaultHideID_'+dragableCount).click(
		function()
		{
			if(callBackFunc!=null)
			{
				hideDragable(this.id, callBackFunc);
			}
			else
			{
				hideDragable(this.id);
			}
		}
	);
	
	
	/* CONFIG */		
		xOffset = 0;
		yOffset = 0;
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */
	
	$(".dragable").mousedown(function(e)
	{
		var tmpDragableID=this.id;
		yOffset = e.pageX-$('#dragableID_'+this.id).offset().left;
		xOffset = e.pageY-$('#dragableID_'+this.id).offset().top;

		$("body").mousemove(
			function(e)
			{
				$('#dragableID_'+tmpDragableID)
					.css("top",(e.pageY - xOffset) + "px")
					.css("left",(e.pageX - yOffset) +  "px");
					
			return false;
			}	
		);			
    });
    
    $(".dragable").mouseup(function(e)
	{
		$("body").unbind('mousemove');		
    });
    
    
    $('#DefaultDrag').html(defaultDrag);
return dragableCount;
}

this.showDragable = function (e, id)
{
	try
	{
		$('#dragableID_'+id)
		.css("top",(e.pageY - xOffset) + "px")
		.css("left",(e.pageX + yOffset - $('#dragableID_'+id).width()/2) + "px");
	}
	catch(e)
	{
		$('#dragableID_'+id)
		.css("top",(0- xOffset) + "px")
		.css("left",(0 + yOffset - $('#dragableID_'+id).width()/2) + "px");
	}
		
	$('#dragableID_'+id).show();
}

this.setDragableSize = function (id,width,height)
{
	$('#dragableID_'+id)
		.css("width",width + "px")
		.css("height",height + "px");
		
	$('#dragableID_'+id+' .DragableDataArea')
		.css("overflow","auto")
		.css("height",height + "px");
}

this.hideDragable = function (id, callback)
{
	if(id==null)
	{
		return false;
	}
	
	try
	{
		var id_array=id.split('_');
		id=id_array[1];
	}
	catch(err)
	{
		if($('#dragableID_'+id).val().Length==0)
		{
			return false;
		}
	}
	
	//DefaultDrag
	$('#dragableID_'+id)
		.css("top","0px")
		.css("left","0px");

	$('#dragableID_'+id+' .DragableDataArea').html('');
	$('#dragableID_'+id+' .drabableTitle').html('');
	$('#dragableID_'+id).hide();
	$('#dragableID_'+id).remove();
	
	if(callback!=null)
	{
		eval(callback);
	}
}

this.hideAllDragable = function ()
{
	$('.closeDragables').each(
		function()
		{
			var id=this.id;
			var id_array=id.split('_');
			id=id_array[1];
			
			//DefaultDrag
			$('#dragableID_'+id)
				.css("top","0px")
				.css("left","0px");
		
			$('#dragableID_'+id+' .DragableDataArea').html('');
			$('#dragableID_'+id+' .drabableTitle').html('');
			$('#dragableID_'+id).remove();
			$('#dragableID_'+id).hide();
		}
	);
}

this.setDragableTitle = function (id, data)
{
	$('#dragableID_'+id+' .drabableTitle').html(data);
}

this.setDragableContent = function (id, data)
{
	//alert($('#dragableID_'+id+' .DragableDataArea').offset().top);
	//alert($('#dragableID_'+id+' .DragableDataArea').scrollTop());
	//$('#dragableID_'+id+' .DragableDataArea').attr({ scrollTop: $('#dragableID_'+id+' .DragableDataArea').attr("scrollHeight") });
	$('#dragableID_'+id+' .DragableDataArea').html(data);
}

this.setDragablePosition = function (id, x, y)
{
	$('#dragableID_'+id)
		.css("top",(y) + "px")
		.css("left",(x) +  "px");
}