var LinkEnabled = false;
var FirstExecution = true;

/**
 * A little manager that allows us to swap the image dynamically
 *
 */
var CropImageManager = 
{
	/**
	 * Holds the current Cropper.Img object
	 * @var obj
	 */
	curCrop: null,
	
	/**
	 * Initialises the cropImageManager
	 *
	 * @access public
	 * @return void
	 */
	init: function() 
	{
		this.attachCropper();
	},
	
	/**
	 * Handles the changing of the select to change the image, the option value
	 * is a pipe seperated list of imgSrc|width|height
	 * 
	 * @access public
	 * @param obj event
	 * @return void
	 */
	onChange: function( e ) 
	{
		var vals = $F( Event.element( e ) ).split('|');
		this.setImage( vals[0], vals[1], vals[2] ); 
	},
	
	/**
	 * Sets the image within the element & attaches/resets the image cropper
	 *
	 * @access private
	 * @param string Source path of new image
	 * @param int Width of new image in pixels
	 * @param int Height of new image in pixels
	 * @return void
	 */
	setImage: function( imgSrc, w, h ) 
	{
		$( 'imageid' ).src = imgSrc;
		$( 'imageid' ).width = w;
		$( 'imageid' ).height = h;
		this.attachCropper();
	},
	
	/** 
	 * Attaches/resets the image cropper
	 *
	 * @access private
	 * @return void
	 */
	attachCropper: function() 
	{
		if(this.curCrop == null )
			this.curCrop = new Cropper.Img( 'imageid', { onEndCrop: OnEndCrop } );
		else 
			this.curCrop.reset();
	},
	
	/**
	 * Removes the cropper
	 *
	 * @access public
	 * @return void
	 */
	removeCropper: function() 
	{
		if( this.curCrop != null ) 
		{
			this.curCrop.remove();
		}
	},
	
	/**
	 * Resets the cropper, either re-setting or re-applying
	 *
	 * @access public
	 * @return void
	 */
	resetCropper: function() 
	{
		this.attachCropper();
	}
};


// setup the callback function
function OnEndCrop( coords, dimensions ) 
{
	$( 'x' ).value = coords.x1;
	$( 'y' ).value = coords.y1;
	$( 'width' ).value = dimensions.width;
	$( 'height' ).value = dimensions.height;
}

function IsLinkEnabled()
{
	return LinkEnabled;
}

function ActivateTags()
{
	if ($('TagForm').style.display == 'none') 
	{ 
		$('TagForm').style.display = 'block';
		LinkEnabled = false;
		$('TagSwitch').firstChild.data = 'CANCEL';
		
		if (FirstExecution) {
			CropImageManager.init();
			FirstExecution = false;
		} else {
			CropImageManager.resetCropper();
		}
	} 
	else 
	{ 
		$('TagForm').style.display = 'none';
		LinkEnabled = false;
		$('TagSwitch').firstChild.data = 'ADD TAG';		
		CropImageManager.removeCropper();
	}
}

function ShowTag(id)
{
	$(id + '_anchor').style.border = "1px";
	$(id + '_anchor').style.borderStyle = "solid";
	$(id + '_anchor').style.borderColor = "#F00";
	$(id + '_div').style.position = "relative";
	$(id + '_div').style.display = "block";
	$(id + '_div').style.border = "1px solid #000";
	$(id + '_div').style.background = "#fff";
	$(id + '_div').style.padding = "5px";
	$(id + '_div').style.filter = "alpha(opacity=80)";
	$(id + '_div').style.opacity = "0.8";
	$(id + '_div').style.zIndex = "1";
}

function HideTag(id)
{
	$(id + '_anchor').removeAttribute('style');	
	$(id + '_div').removeAttribute('style');
}