/*
* Requires the scriptaculous library
*
document.write('<script type="text/javascript" src="/sharedlibraries2/assets/js/scriptaculous/prototype.js"></script>');
document.write('<script type="text/javascript" src="/sharedlibraries2/assets/js/scriptaculous/scriptaculous.js"></script>');
*/



/*
*	Universal vars
*/
var _displayImgID = "DisplayImgDetailDiv";
var _displayImgCount = 0;
var _displayImg_zIndex = 1000;


/* 
* creates a thumbnail of an image in the DOM 
*/
function displayImgDetail( e, src, id, cap, xOffset, yOffset, createNew, makeDraggable, showCloseBtn, fadeDuration )
{
	// check if the Prototype library is present
	checkPrototypeExists();
	
	// get the Mouse Position from Utils.js
	//var pos = getMouseXY(e);
	var posX = Event.pointerX(e);
	var posY = Event.pointerY(e);
	
	// set the offset to default values if nothing was passed
	var _xOffset = (xOffset!=null)? xOffset: 5 ;
	var _yOffset = (yOffset!=null)? yOffset: 5 ;
	// default to reseting the id position
	var _createNew = (createNew!=null)? createNew: true;
	var _makeDraggable = (makeDraggable!=null)? makeDraggable: true;
	var _showCloseBtn = (showCloseBtn!=null)? showCloseBtn: true;
	var _fadeDuration = (fadeDuration!=null)? fadeDuration: 0.4;
	// sets the id to the default id and increments the counter
	var _id = (id!=null)? id: _displayImgID +'_'+_displayImgCount ;
	// increment the image count
	++_displayImgCount;
	
	// check if there is an existing element with this ID
	var _isExistingID = (document.getElementById(_id) != null )? true: false;
	// if there is an existing ID and the position is to be reset, then delete the existing ID and recreate it
	if (_isExistingID && _createNew) {
		removeImgDetail(_id);
		_isExistingID = false;
	}
	
	// the nodes to add to the detail
	var closeElement = '';
	var capElement = '';
	var imgElement =  '';
	if (_showCloseBtn)
		closeElement = Builder.node('p', {style: 'text-align: right; margin: 0px; padding: 2px 1em; background-color: #f3f3f3;'}, [Builder.node('a', {href: 'javascript:;', onclick: "removeImgDetail('"+_id+"',"+(_fadeDuration/2)+");", className: 'button small'}, 'Close' )]  );
	if (src != null) 
		imgElement= Builder.node('img', {src: src, style: "border: 5px solid white; border-bottom: 15px solid white;"});
	if (cap != null) 
		capElement = Builder.node('div', {className:'small', style:"padding: 0px 1em;"}, cap );
	
	// styles for the div
	var thumbDivStyles = "background: white; border: 1px solid #aaa;";
	var _newID = '';
	if ( !_isExistingID ) {
		thumbDivStyles += "position: absolute; top: "+(posY+_yOffset)+"px; left:"+(posX+_xOffset)+"px; z-index: "+_displayImg_zIndex+"; opacity: 0; filter: alpha(opacity=0); ";
		_newID = _id;
	}
	
	// create a div with the image detail in it and place it by the thumb
	var thumbDiv = Builder.node('div', {id:_newID, style: thumbDivStyles }, [
			closeElement,
			imgElement, 
			capElement
			]	
		);
	
	// add the div to either the existing element or the document body
	var thisElem = document.getElementById(_id);
	if ( _isExistingID ) {
		thisElem.innerHTML = '';
		thisElem.appendChild( thumbDiv );
	} else {
		thisElem = document.getElementsByTagName('body')[0].appendChild(thumbDiv);
		// make it appear
		new Effect.Opacity( thisElem, {duration:_fadeDuration, from:0, to:1} );
	}
	
	
	// make the new element draggable
	if (_makeDraggable){
		new Draggable( _id );
		// signal that it is draggable by giving them a move cursor
		thisElem.style.cursor = 'move';
	}
	
	// return a reference to this img detail
	return thisElem;
}


/*
* Removes the thumbnail image
*/
function removeImgDetail( id, duration )
{
	var _id = (id!=null)? id: _displayImgID+'_'+(_displayImgCount-1) ;
	var _duration = (duration!=null)? duration: 0 ;
	if ( document.getElementById(_id)!= null) 
		// if the duration is valid then fade out then delete
		if (_duration>0 && _duration <=1){
			new Effect.Opacity( _id, {duration: _duration, from:1, to:0, afterFinish: function(){Element.remove(_id)} } );
		} 
		// otherwise just delete directly
		else {
			Element.remove(_id);
		}
		
}


function checkPrototypeExists()
{
		if((typeof Prototype=='undefined') || 
       (typeof Element == 'undefined') || 
       (typeof Element.Methods=='undefined') ||
       parseFloat(Prototype.Version.split(".")[0] + "." +
                  Prototype.Version.split(".")[1]) < 1.5)
       throw("DisplayImageDetail requires the script.aculo.us and Prototype JavaScript framework >= 1.5.0");
}