var crop;
var markinit_function = function(){
	
	
	if (!$('mark')) return;
	$('mark').addEvent('click', function(e){
		e.stop();
	
		var partypic=$('partypic');
		if (crop)
		{
			crop.removeOverlay();
			$('mark').innerHTML='Auf dem Foto markieren';
			$('markCont').setStyle('display', 'none');
			$$('.mark').setStyle('display', 'none');
			
			crop=false;
			return;
		}
		$('mark').innerHTML='Abbrechen';
		
		crop = new MooCrop(partypic,{
			maskColor : 'black',
			maskOpacity : '.4',
			handleColor : '#A4C8A4',
			handleWidth : '6px',
			handleHeight : '6px',
			cropBorder : '1px dashed #8E9FA9',
			min : { 'width' : 50, 'height' : 50 },
			showMask : true, // false to remove, helps on slow machines
			showHandles : false, // hide handles on drag
			constrainRatio : false // hide handles on drag
		});
		
		$('markCont').setStyle('display', 'inline');
		$$('.savemarklink').setStyle('display', 'inline');
		$$('.mark').setStyle('display', 'none');
		
	});

	$('saveMark').addEvent('click', function(e){
		e.stop();

		
		var data = new Hash({
			'pic_id': pic_id,
			'mark_user_id' : $('markUserId').get('value')
		});
		data.extend(crop.getCropInfo());
		
		//Update marker
		var mark;
		if($('mark_'+data.mark_user_id))
		{
			
			mark = $('mark_'+data.mark_user_id);
		}
		else
		{
			var html;
			
			if($('mark_sel_'+data.mark_user_id).get('html') != 'Das bin ich!')
				html = $('mark_sel_'+data.mark_user_id).get('html');
			else
				html = username;
			
			mark = new Element('div',{
				'id': 'mark_'+data.mark_user_id,
				'class': 'mark',
				'html': html
			});
			$('marksContainer').adopt(mark);
			mark.addEvent('mouseover', function(){
				$$('.mark').setStyle('display', 'block');
			});
		}	
		
		mark.setStyles({
			'display':'none',
			'position':'absolute',
			'top':data.top,
			'left':data.left,
			'width':data.width,
			'height':data.height
		});

		new Request({
			'url': '/ajax/markeventpic/new/',
			'onComplete': function()
			{
				crop.removeOverlay();

				$('mark').innerHTML='Auf dem Foto markieren';
				$('mark').setStyle('display', 'inline');
				$('markCont').setStyle('display', 'none');
				$$('.mark').setStyle('display', 'none');
			}
		}).send(data.toQueryString());
	});
	
	if($('deleteMark'))
		$('deleteMark').addEvent('click', function(e){
			e.stop();
			
			new Request({
				'url': '/ajax/markeventpic/delete/',
				'onComplete': function()
				{
					$('mark_'+user_id).dispose();
					$('deleteMark').dispose();
				}
			}).send('pic_id='+pic_id);
		});
	
	
	$('partypic').addEvents({
		'mouseover':function()
		{
			$$('.mark').setStyle('display', 'block');
		},
		'mouseout':function()
		{
			$$('.mark').setStyle('display', 'none');
		}
	});
	

	
	$$('.mark').addEvent('mouseover',function(){
		$$('.mark').setStyle('display', 'block');
	});
	
	if($$('.displayMarkedUser'))
		$$('.displayMarkedUser').addEvents({
			'mouseover':function()
			{
				if($('mark_'+this.get('rel')))
					$('mark_'+this.get('rel')).setStyle('display', 'block');
			},
			'mouseout':function()
			{
				if($('mark_'+this.get('rel')))
					$('mark_'+this.get('rel')).setStyle('display', 'none');
			}
		})
	
}

document.addEvent('domready',markinit_function);