function showHideElement(element){
	if(document.getElementById(element).style.display=='none') {
		document.getElementById(element).style.display='block'; 
	} else {
		document.getElementById(element).style.display='none';
	}
}

function slideElement(element){
	if(document.getElementById(element).style.display=='none') {
		new Effect.SlideDown(element);
	} else {
		new Effect.SlideUp(element);
	}
}


function showElement(element){
	document.getElementById(element).style.display='block'; 
}

function hideElement(element){
	document.getElementById(element).style.display='none';
}

function showMessage(ziel,message){
	check = confirm(message);
	if (check == true)
		window.location.href = ziel;
}


function delTag( imgid, tag ) {
	sndReq('module=image&method=8&action=deltag&imgid='+imgid+'&tags='+tag);
	hideElement('tag_'+tag);
}

function addTag( imgid, newtag ) {
	var tag = document.getElementById(newtag).value;
	
	sndReq('module=image&method=8&action=addtag&imgid='+imgid+'&tags='+tag);
	document.getElementById(newtag).value = '';
	//hideElement('tag_'+tag);
	//top.location.href = "";
}

/*
function loadImage( element, image ) {
	
	var id = element;
	var current = 0;
	
	function show() {
		document.getElementById( id ).src = image;
	}
	
	
	this.next = function() {
		if( current++ >= images.length - 1 )
			current = images.length - 1;
			show();
	}
	
	this.prev = function() {
		if( current-- <= 0 )
			current = 0;
			show();
	}
}

function Gallery( element, imagelist ) {

	var id = element;
	var images = imagelist;
	var current = 0;
	
	function show() {
		document.getElementById( id ).src = images[ current ];
	}
	
	this.next = function() {
		if( current++ >= images.length - 1 )
			current = images.length - 1;
			show();
	}
	
	this.prev = function() {
		if( current-- <= 0 )
			current = 0;
			show();
	}
}*/

function centerElement(element){
	try{
		element = document.getElementById(element);
	}catch(e){
		return;
	}
	
	var my_width  = 0;
	var my_height = 0;
	if ( typeof( top.window.innerWidth ) == 'number' ){
		my_width  = window.innerWidth;
		my_height = window.innerHeight;
	}else if ( document.documentElement && 
		( document.documentElement.clientWidth ||
		document.documentElement.clientHeight ) ){
		my_width  = document.documentElement.clientWidth;
		my_height = document.documentElement.clientHeight;
	}
	else if ( document.body && 
		( document.body.clientWidth || document.body.clientHeight ) ){
		my_width  = document.body.clientWidth;
		my_height = document.body.clientHeight;
	}
	
	element.style.position = 'absolute';
	element.style.zIndex   = 500;
	
	var scrollY = 0;
	
	if ( document.documentElement && document.documentElement.scrollTop ){
		scrollY = document.documentElement.scrollTop;
	}else if ( document.body && document.body.scrollTop ){
		scrollY = document.body.scrollTop;
	}else if ( window.pageYOffset ){
		scrollY = window.pageYOffset;
	}else if ( window.scrollY ){
		scrollY = window.scrollY;
	}
	
	var elementDimensions = Element.getDimensions(element);
	
	var setX = ( my_width  - elementDimensions.width )  / 2 ;
	var setY = ( my_height - elementDimensions.height ) / 2 + scrollY;
	
	setX = ( setX < 0 ) ? 0 : setX;
	setY = ( setY < 0 ) ? 0 : setY;
	setX = 300;
	setY = 200;
	element.style.left = setX + "px";
	element.style.top  = setY + "px";
	
	element.style.display  = 'block';
}


/*******************************************************************************************/
/* Boxen anzeigen
/*******************************************************************************************/

function showEditAlbum(){
	$('editalbum_overlay').show();
	centerElement('editalbum_box');
	return false;
}

function hideEditAlbum(){
	$('editalbum_box').hide();
	$('editalbum_overlay').hide();
	return false;
}

function showAddAlbumToGroup(){
	$('addtogroup_overlay').show();
	centerElement('addtogroup_box');
	return false;
}

function hideAddAlbumToGroup(){
	$('addtogroup_box').hide();
	$('addtogroup_overlay').hide();
	return false;
}

function showBox(box, overlay) {
	$(overlay).show();
	centerElement(box);
	return false;
}

function showHideBox(box, overlay) {
	showHideElement(box);
	showHideElement(overlay);
	return false;
}


function hideBox(box, overlay) {
	$(box).hide();
	$(overlay).hide();
	return false;
}

/*******************************************************************************************/
/* AJAX
/*******************************************************************************************/

var newAlbumsPageNext = lastVisitorsNext = onlineFriendsPageNext = usersPagePrev = friendsPageNext = 1;
var newAlbumsPagePrev = lastVisitorsPrev = onlineFriendsPagePrev = usersPageNext = friendsPagePrev = 1;
var albumsPagePrev = 2;
var albumsPageNext = 2;

/*******************************************************************************************/
/* ALBUMS
/*******************************************************************************************/

function deleteAlbum(where,aid,newaid) {
	var success = function(){
		$(where).hide();
		$("deleted").show();
		//var oNodeToRemove = $('album'+aid);
		//oNodeToRemove.parentNode.removeChild(oNodeToRemove);
		
		hideBox('delalbum_box','delalbum_overlay');
	}
	new Ajax.Request(url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, postBody:Form.serialize(document.forms['deleteAlbumForm'])});
	
}

function setAlbumOrder(aid,order) {
	new Ajax.Request(url, {method: 'post', asynchronous:true, evalScripts:true, parameters:'module=ajaxalbum&method=2&aid='+aid+'&order='+order});
}

function showNewAlbums(where,page) {
	var success = function(){
		$("indicator3").hide();
		
		if (newAlbumsPageNext>1) {
			$("newalbums_prev").show();
		} else {
			$("newalbums_prev").hide();
		}
	}
	$("indicator3").show();
	new Ajax.Updater(where, url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxalbum&method=3&page='+page});

	newAlbumsPagePrev = page-1;
	newAlbumsPageNext = page+1;
	
}

function showMemberAlbums(where,uid,page) {
	var success = function(){
		$("album_indicator").hide();
		if (albumPages == page) {
			$("album_next").hide();
		} else {
			$("album_next").show();
		}
		
		if (albumsPageNext>2) {
			$("album_prev").show();
		} else {
			$("album_prev").hide();
		}
	}
	$("album_indicator").show();
	//page = page +1;
	new Ajax.Updater(where, url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxalbum&method=4&page='+page+'&uid='+uid});

	albumsPagePrev = page-1;
	albumsPageNext = page+1;
	
}
function setAlbum(where) {
	var success = function(t){
		$(where).show();
	}
	new Ajax.Request(url, {method: 'post', onComplete:success, asynchronous:true, evalScripts:true, postBody:Form.serialize(document.forms['editAlbumForm'])});
}


function addLinkedAlbum(where) {
	var success = function(t){
		new Effect.SlideUp('newlinkalbum');
		
		new Insertion.Top(where, t.responseText);
	}
	new Ajax.Request(url, {method: 'post', onComplete:success, asynchronous:true, evalScripts:true, postBody:Form.serialize(document.forms['newAlbumLinkForm'])});
}

function delLinkedAlbum(aid,caid) {
	var success = function(t){
		var oNodeToRemove = $('album'+aid);
		oNodeToRemove.parentNode.removeChild(oNodeToRemove);
	}
	new Ajax.Request(url, {method: 'post', onComplete:success, asynchronous:true, evalScripts:true, postBody:'module=ajaxalbum&method=7&aid='+aid+'&caid='+caid});
}

/*******************************************************************************************/
/* MAIN
/*******************************************************************************************/

function showLastVisitors(where,page) {
	var success = function(){
		$("indicator2").hide();
		if (lastVisitorsPages-1 == page) {
			$("lastvisitors_next").hide();
		} else {
			$("lastvisitors_next").show();
		}
		
		if (lastVisitorsNext>1) {
			$("lastvisitors_prev").show();
		} else {
			$("lastvisitors_prev").hide();
		}
	}
	$("indicator2").show();
	new Ajax.Updater(where, url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxuser&method=1&page='+page});
	lastVisitorsPrev = page-1;
	lastVisitorsNext = page+1;
	
}

function showGroupMember(where,gid,page) {
	var success = function(){
		$("user_indicator").hide();
		if (userPages-1 == page) {
			$("user_next").hide();
		} else {
			$("user_next").show();
		}
		
		if (usersPageNext>1) {
			$("user_prev").show();
		} else {
			$("user_prev").hide();
		}
	}
	$("user_indicator").show();
	//alert(page);
	new Ajax.Updater(where, url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxgroup&method=7&page='+page+'&gid='+gid});
	usersPagePrev = page-1;
	usersPageNext = page+1;
	
}


/*******************************************************************************************/
/* FRIENDS
/*******************************************************************************************/

function showOnlineFriends(where,page) {
	var success = function(){
		$("indicator4").hide();
	}
	$("indicator4").show();
	new Ajax.Updater(where, url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxfriend&method=1&page='+page});
	onlineFriendsPageNext = onlineFriendsPageNext+1;
	onlineFriendsPagePrev = onlineFriendsPagePrev-1;
}

function showFriends(where,uid,page) {
	var success = function(){
		$("friends_indicator").hide();
		
		if (friendsPages-1 == page) {
			$("friends_next").hide();
		} else {
			$("friends_next").show();
		}
		
		if (friendsPageNext>1) {
			$("friends_prev").show();
		} else {
			$("friends_prev").hide();
		}
	}
	$("friends_indicator").show();
	new Ajax.Updater(where, url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxfriend&method=2&page='+page+'&uid='+uid});
	friendsPageNext = page+1;
	friendsPagePrev = page-1;
	
}

function addNewFriend(update, uid) {
	var success = function(t){
		$(update).hide();
	}
	new Ajax.Request(url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxfriend&method=3&uid='+uid});
}

/*
function setFriendStatus(update,fid,status)  {
	var success = function(t){
		hideBox('newfriend_box','newfriend_overlay');
	}
	//message = escape(message);
	new Ajax.Request(url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxfriend&method=3&uid='+uid});
}
*/

function setFriendStatus(where,fid,status) {
	var success = function(t){
		var oNodeToRemove = $(where);
		oNodeToRemove.parentNode.removeChild(oNodeToRemove);
	}
	new Ajax.Request(url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxfriend&method=4&fid='+fid+'&status='+status});
}



/*******************************************************************************************/
/* TAGS
/*******************************************************************************************/

function addImageTag(update) {
	var success = function(t){
		$("tag_indicator").hide();
		new Insertion.Bottom(update, t.responseText);
		new Effect.SlideUp('newtagform');
	}
	$("tag_indicator").show();
	new Ajax.Request(url, {method: 'post', onComplete:success, asynchronous:true, evalScripts:true, postBody:Form.serialize(document.forms['newImageTagForm'])});
}

function delImageTag(imgid, tag) {
	var success = function(t){
		var oNodeToRemove = $('tag_'+tag);
		oNodeToRemove.parentNode.removeChild(oNodeToRemove);
	}
	new Ajax.Request(url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxtag&method=2&imgid='+imgid+'&tags='+tag});
}



/*******************************************************************************************/
/* MESSAGES
/*******************************************************************************************/

function deleteMessage(mid,folder) {
	var success = function(t){
		var oNodeToRemove = $('message_'+mid);
		oNodeToRemove.parentNode.removeChild(oNodeToRemove);
	}
	new Ajax.Request(url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxmessage&method=3&mid='+mid+'&folder='+folder});
}

function getMessage(mid,folder) {
	var success = function(t){
		
		var element = 'message_'+mid+'_text';
		
		if(document.getElementById(element).style.display=='none') {
			document.getElementById(element).style.display='block';
			//new Effect.SlideDown(element);
		} else {
			//new Effect.SlideUp(element);
			document.getElementById(element).style.display='none';
		}
		
	}
	
	new Ajax.Updater('message_'+mid+'_text', url, {method: 'post', onComplete:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxmessage&method=2&mid='+mid+'&folder='+folder});
}

function addNewComment(where) {
	var success = function(t){
		$("comment_indicator").hide();
		$("comment").value = "";
		new Effect.SlideUp('newcomment');
		
		new Insertion.Top(where, t.responseText);
	}
	$("comment_indicator").show();
	new Ajax.Request(url, {method: 'post', onComplete:success, asynchronous:true, evalScripts:true, postBody:Form.serialize(document.forms['newCommentForm'])});
}

function delComment(cid) {
	var success = function(t){
		var oNodeToRemove = $('comment_'+cid);
		oNodeToRemove.parentNode.removeChild(oNodeToRemove);
	}
	new Ajax.Request(url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxcomment&method=2&cid='+cid});
}


/*******************************************************************************************/
/* GROUPS
/*******************************************************************************************/

function addAlbumToGroup(where,gid,aid) {
	$("indicator5").show();
	var success = function(t){
		$("indicator5").hide();
		new Insertion.Bottom("albums", t.responseText);
		hideAddAlbumToGroup();
		if ($('albums').style.visibility == 'visible'){
			$('albums').show();
			$('albums_title').show();
		}
	}
	new Ajax.Request(url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxgroup&method=1&gid='+gid+'&aid='+aid});
}

function deleteAlbumFromGroup(gid,aid) {
	new Ajax.Request(url, {method: 'post', asynchronous:true, evalScripts:true, parameters:'module=ajaxgroup&method=2&gid='+gid+'&aid='+aid});
	var oNodeToRemove = $('album'+aid);
	oNodeToRemove.parentNode.removeChild(oNodeToRemove);
}

function setGroupUserStatus(where,gid,uid,status) {
	var success = function(t){
		var oNodeToRemove = $(where);
		oNodeToRemove.parentNode.removeChild(oNodeToRemove);
	}
	new Ajax.Request(url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxgroup&method=10&gid='+gid+'&uid='+uid+'&status='+status});
}




/*******************************************************************************************/
/* IMAGES
/*******************************************************************************************/

var threadsPageNext = postsPageNext= 1;
var threadsPagePrev = postsPagePrev = 1;

function setImage(where) {
	var success = function(t){
		$('saved_'+where).show();
	}
	new Ajax.Request(url, {method: 'post', onComplete:success, asynchronous:true, evalScripts:true, parameters:Form.serialize(document.forms[where+'_form'])});
}

function deleteImage(where,imgid) {
	var success = function(){
		$(where).hide();

		hideBox('delimage_box','delimage_overlay');
	}
	new Ajax.Request(url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, postBody:'module=ajaximage&method=2&imgid='+imgid});
}

function moveImage(where,imgid,newaid) {
	var success = function(){
		$(where).hide();
	
		hideBox('moveimage_box','moveimage_overlay');
	}
	new Ajax.Request(url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, postBody:'module=ajaximage&method=3&imgid='+imgid+'&newaid='+newaid});
}

function accuseImage(where) {
	var success = function(t){
		showHideBox('accusation_box','accusation_overlay');
		showHideBox('accusation_ok_box','accusation_ok_overlay');
	}
	new Ajax.Request(url, {method: 'post', onComplete:success, asynchronous:true, evalScripts:true, parameters:Form.serialize(document.forms['accuseImageForm'])});
}

/*******************************************************************************************/
/* THREADS
/*******************************************************************************************/

function deleteThread(where,threadid) {
	var success = function(){
		$(where).hide();
		$("deleted").show();
		//hideBox('delpost_box','delpost_overlay');
	}
	new Ajax.Request(url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, postBody:'module=ajaxgroup&method=9&threadid='+threadid});	
}

function deletePost(where,postid) {
	var success = function(){
		$(where).hide();
		
		//hideBox('delpost_box','delpost_overlay');
	}
	new Ajax.Request(url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, postBody:'module=ajaxgroup&method=8&postid='+postid});
}

function addNewThread(where) {
	var success = function(t){
		$("newthreadtitle").value = "";
		$("newthreadtext").value = "";
		new Effect.SlideUp('newthread');
		new Insertion.Top(where, t.responseText);
	}
	var errFunc = function(t) {
		alert('Error ' + t.status + ' -- ' + t.statusText);
	}
	
	new Ajax.Request(url, {method: 'post', onComplete:success, asynchronous:true, evalScripts:true, postBody:Form.serialize(document.forms['newThreadForm'])});
}

function addNewPost(where,tid,ptext) {
	var success = function(t){
		$("newposttext").value = "";
		new Insertion.Bottom(where, t.responseText);
	}
	var errFunc = function(t) {
		alert('Error ' + t.status + ' -- ' + t.statusText);
	}
	new Ajax.Request(url, {method: 'post', onComplete:success, asynchronous:true, evalScripts:true, postBody:Form.serialize(document.forms['newPostForm'])});
}

function showThreads(where,gid,page) {
	var success = function(){
		$("threads_indicator").hide();	
		
		if (threadPages-1 == page) {
			$("threads_next").hide();
		} else {
			$("threads_next").show();
		}
			
		if (threadsPageNext>1) {
			$("threads_prev").show();
		} else {
			$("threads_prev").hide();
		}
	}
	$("threads_indicator").show();
	new Ajax.Updater(where, url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxgroup&method=5&gid='+gid+'&page='+page});
	
	threadsPagePrev = page-1;
	threadsPageNext = page+1;
}

function showPosts(where,tid,page) {
	var success = function(){
		$("posts_indicator").hide();	
		
		if (postsPages-1 == page) {
			$("posts_next").hide();
		} else {
			$("posts_next").show();
		}
			
		if (postsPageNext>1) {
			$("posts_prev").show();
		} else {
			$("posts_prev").hide();
		}
	}
	$("posts_indicator").show();
	new Ajax.Updater(where, url, {method: 'post', onSuccess:success, asynchronous:true, evalScripts:true, parameters:'module=ajaxgroup&method=6&tid='+tid+'&page='+page});
	
	postsPagePrev = page-1;
	postsPageNext = page+1;
	
}



/*******************************************************************************************/
/* CALENDAR
/*******************************************************************************************/

function showCalendar(where,month,year) {
	new Ajax.Updater(where, url, {method: 'post', asynchronous:true, evalScripts:true, parameters:'module=ajaxcalendar&method=1&month='+month+'&year='+year});
}




function addNewPost(where,tid,ptext) {
	var success = function(t){
		$("newposttext").value = "";
		new Insertion.Bottom(where, t.responseText);
	}
	var errFunc = function(t) {
		alert('Error ' + t.status + ' -- ' + t.statusText);
	}
	new Ajax.Request(url, {method: 'post', onComplete:success, asynchronous:true, evalScripts:true, postBody:Form.serialize(document.forms['newPostForm'])});
}




function addReceiver(where) {
	new Insertion.Bottom(where, '<input type="text" name="data[receiver][]" style="width:100%" class="" value=""><br>');
	
}










/*******************************************************************************************/
/* CUTOUT SELECTOR
/*******************************************************************************************/



/*
 * Global Settings
 */ 

// dimensions of the 100% preview to adjust the cutout divs
var preview100_width = 720;
var preview100_height = 540;

// little hack to enable clicks outside the image ;)
var border_around_imgs = 10;

/*
 * Object Constructor
 */ 
function CutoutSelector(preview, cutout, width, height) {
  // public members
  this.width = width;
  this.height = height;
  this.boxmove = false;

  // public methods
  this.get_min_x = function () { return min_x; };
  this.get_max_x = function () { return max_x; };
  this.get_min_y = function () { return min_y; };
  this.get_max_y = function () { return max_y; };
  this.get_element_id = function () { return preview.id };
  this.move_cutout = _move_cutout;
  this.get_left = _get_left;
  this.get_top = _get_top;
  this.get_pre_width = _get_pre_width;
  this.get_pre_height = _get_pre_height;
  this.get_cut_width = _get_cut_width;
  this.get_cut_height = _get_cut_height;
  
  // width e.g. 2000 / 720 = 227 / x
  // 720 / 2000 = x / 227
  // ( 720 / 2000 ) * 227 = x
  // ( pw / ow ) * sw
  var cut_width = ( preview100_width / width) * _get_width(preview);
  var cut_height = ( preview100_height / height) * _get_height(preview);
  cutout.style.width = _integer2dimension(Math.round(cut_width));
  cutout.style.height = _integer2dimension(Math.round(cut_height));
  
  // private members  
  var preview = preview;
  var cutout = cutout;
  var min_x = _get_min_x();
  var max_x = _get_max_x();
  var min_y = _get_min_y();
  var max_y = _get_max_y();

  // private methods
  function _move_cutout(x, y) {
  	cutout.style.left = _integer2dimension(Math.round(x));
    cutout.style.top = _integer2dimension(Math.round(y));
  }
  
  function _get_width(div) {
    var w = div.style.width;
    return _dimension2integer(w);
  }
  
  function _get_height(div) {
    var h = div.style.height;
    return _dimension2integer(h);
  }
  
  function _get_pre_width() {
  	return _get_width(preview);
  }
  
  function _get_pre_height() {
  	return _get_height(preview);
  }
  
  function _get_cut_width() {
  	return _get_width(cutout);
  }
  
  function _get_cut_height() {
  	return _get_height(cutout);
  }
  
  function _get_left() {
  	var adjustment = 0; // -2 due to borders
    if (ie()) {
    	adjustment = 2;
	}
  	return _dimension2integer(cutout.style.left) - adjustment;
  }
  
  function _get_top() {
  	var adjustment = 0; // -2 due to borders
    if (ie()) {
    	adjustment = 2;
	}
  	return _dimension2integer(cutout.style.top) - adjustment;
  }
  
  function _get_min_x() {
    return _dimension2integer(preview.style.left);
  }
  
  function _get_max_x() {
  	var adjustment = 2; // -2 due to borders
    if (ie()) {
    	adjustment = 0;
	}
    return (_get_width(preview) - _get_width(cutout)) - adjustment;
  }
  
  function _get_min_y() {
    return _dimension2integer(preview.style.top);
  }
  
  function _get_max_y() {
  	var adjustment = 2; // -2 due to borders
    if (ie()) {
    	adjustment = 0;
	}
    return (_get_height(preview) - _get_height(cutout)) - adjustment;
  }
  
  function _dimension2integer(dim) {
    return Number(dim.substr(0, (dim.length - 2) ));
  }
  
  function _integer2dimension(val) {
    return val + "px";
  }
  
}

/*
 * Moving Methods
 */
var lastused_obj = null;

function find_object(element) {
  if (lastused_obj) {
    if (lastused_obj.get_element_id() == element.id) {
      return lastused_obj;
    }
  }
  for (var i = 0; i < objs.length; i++) {
    var obj = objs[i];
    if (element.id == obj.get_element_id()) {
      lastused_obj = obj;
      return obj;
    }
  }
}

function stopstartbox(element) {
  var obj = find_object(element);
  obj.boxmove = !obj.boxmove;
  if (true == obj.boxmove) {
    element.style.cursor = 'move';
  } else {
    element.style.cursor = 'pointer';
  }
}

function updatebox(e, element) {
  if (!e) var e = window.event;

  var obj = find_object(element);
  
  if (obj.boxmove) {
    
    // get mouse position
    mouseX = e.pageX ? e.pageX : e.clientX;
    mouseY = e.pageY ? e.pageY : e.clientY;
    mouseX = mouseX - border_around_imgs;
    mouseY = mouseY - border_around_imgs;
    
    // check for borders
    new_x = mouseX - obj.get_min_x();
    new_x = (0 >= new_x) ? 0 : (obj.get_max_x() <= new_x) ? obj.get_max_x() : new_x;
    new_y = mouseY - obj.get_min_y();
    new_y = (0 >= new_y) ? 0 : (obj.get_max_y() <= new_y) ? obj.get_max_y() : new_y;
    
    // set new position
    obj.move_cutout(new_x, new_y);
  }
}

function ie() {
	return (navigator.appName == 'Microsoft Internet Explorer');
}

var objs = new Array();

function RegisterCutoutSelector(preview, cutout, width, height) {
	var cs = new CutoutSelector(
		document.getElementById(preview), document.getElementById(cutout),
		width, height);
	objs.push(cs);
}

function submit_data() {
	var msg = "Information to be transferred:\n\n";
	
	/*
	 * The difficulty in determining the original values for X and Y lies in the
	 * proportion of original image and preview image. Example:
	 *   - original width: 3000px
	 *   - preview width: 300px
	 *   -> factor 10 which means a fuzziness of 10 pixels	 
	 * This means that only about every tenth pixel of the original image is
	 * displayed. Thus if you place the cutout div at pixel 10 it is actually
	 * pixel 100.
	 * Conclusion:
	 *   - you cannot determine the exact position of the div
	 *   - the position of the div will be _nearly_ correct
	 *   - extreme positions (e.g. lower right corner) should be treated separately	 	 	 	 	  	 	 	 	 
	 */	
	for (var i = 0; i < objs.length; i++) {
		var obj = objs[i];
		msg += "img" + i + ": ";
		// width e.g. x / 2000 = 10 / 227
		// x = ( 10 / 227) * 2000
		// 1280 x 2460
		var adjustment = 2;
		var left = 0;
		var top = 0;
		if (obj.get_pre_width() == (adjustment + obj.get_left() + obj.get_cut_width())) {
			// this really puts the cutout to the right border
			left = obj.width - preview100_width;
		} else {
			var cut_left = obj.get_left();
			if (ie()) {
				cut_left += adjustment;
			}
			left = Math.round ( ( cut_left / obj.get_pre_width() ) * obj.width );
		}
		if (obj.get_pre_height() == (adjustment + obj.get_top() + obj.get_cut_height())) {
			// this really puts the cutout to the bottom border
			top = obj.height - preview100_height;
		} else {
			var cut_top = obj.get_top();
			if (ie()) {
				cut_top += adjustment;
			}
			top = Math.round( ( cut_top / obj.get_pre_height() ) * obj.height );
		}
		msg += left + " x " + top;
		msg += "\n";
	}
	
	alert(msg);
}