/************************************************************************************************************
*	DHTML modal dialog box
*
*	Created:						August, 26th, 2006
*	@class Purpose of class:		Display a modal dialog box on the screen.
*			
*	Css files used by this script:	modal-message.css
*
*	Demos of this class:			demo-modal-message-1.html
*
* 	Update log:
*
************************************************************************************************************/


/**
* @constructor
*/

DHTML_zoomOutImage = function(width,height)
{	
	var divs_transparentDiv;				// Transparent div covering page content
	var divs_content;						// Modal message div.
	var last_display_td;
	var last_display_img;
	var zoomimg;
	var iframe;								// Iframe used in ie
	
	var existingBodyOverFlowStyle;			// Existing body overflow css
	var dynContentObj;						// Reference to dynamic content object
		
	this.htmlOfModalMessage = '';			// Default message is blank
	this.layoutCss = 'zoom-out-image.css';	// Default CSS file
	this.zoomHeight = height;						// Default height of modal message
	this.zoomWidth = width;						// Default width of modal message
	this.cssClassOfMessageBox = false;		// Default alternative css class for the message box
	this.shadowDivVisible = true;			// Shadow div is visible by default
	this.shadowOffset = 5;					// Default shadow offset.
	this.MSIE = false;
	if(navigator.userAgent.indexOf('MSIE')>=0) this.MSIE = true;
	
	this.bodyHeight = 600;						// Default height of modal message
	this.bodyWidth = 1000;						// Default width of modal message
	this.on_divs_content_child	= false;
	this.on_divs_transparentDiv_child = false;
	this.on_zoom_image = false;
}

DHTML_zoomOutImage.prototype = {
	// {{{ setHtmlContent(newHtmlContent)
    /**
     *	Setting static HTML content for the modal dialog box.
     * 	
     *	@param String newHtmlContent = Static HTML content of box
     *
     * @public	
     */		
	setHtmlContent : function(newHtmlContent)
	{
		this.htmlOfModalMessage = newHtmlContent;
	}
	// }}}		
	,
	// {{{ setSize(width,height)
    /**
     *	Set the size of the modal dialog box
     * 	
     *	@param int width = width of box
     *	@param int height = height of box
     *
     * @public	
     */		
	setSize : function(width,height)
	{
		if(width)this.width = width;
		if(height)this.height = height;		
	}
	// }}}		
	,		
	// {{{ setCssClassMessageBox(newCssClass)
    /**
     *	Assign the message box to a new css class.(in case you wants a different appearance on one of them)
     * 	
     *	@param String newCssClass = Name of new css class (Pass false if you want to change back to default)
     *
     * @public	
     */		
	setCssClassMessageBox : function(newCssClass)
	{
		this.cssClassOfMessageBox = newCssClass;
		if(this.divs_content){
			if(this.cssClassOfMessageBox)
				this.divs_content.className=this.cssClassOfMessageBox;
			else
				this.divs_content.className='zoomOutImage_contentDiv';	
		}
					
	}
	// }}}		
	,	
	// {{{ setShadowOffset(newShadowOffset)
    /**
     *	Specify the size of shadow
     * 	
     *	@param Int newShadowOffset = Offset of shadow div(in pixels from message box - x and y)
     *
     * @public	
     */		
	setShadowOffset : function(newShadowOffset)
	{
		this.shadowOffset = newShadowOffset
					
	}
	// }}}		
	,	
	// {{{ display()
    /**
     *	Display the modal dialog box
     * 	
     *
     * @public	
     */		
	display : function(e, currentTD)
	{
		if (currentTD!=this.last_display_td) {
			this.last_display_td = currentTD;
			if(!this.divs_transparentDiv){
				this.__createDivs(currentTD);
			}	
		// Redisplaying divs
			this.divs_transparentDiv.style.display='block';
			divW = currentTD.offsetWidth;
			divH = currentTD.offsetHeight;
			
			this.divs_content.style.marginLeft = '-11px';
			this.divs_content.style.width = (currentTD.offsetWidth-22) + 'px';
			this.divs_content.style.height = (divH-12) + 'px';
			this.divs_content.style.marginTop = '-' + (currentTD.offsetHeight-11) + 'px';
			begindiv = currentTD.innerHTML.lastIndexOf("<div");
			if (begindiv==-1)
				begindiv = currentTD.innerHTML.lastIndexOf("<DIV");
			this.divs_content.innerHTML = currentTD.innerHTML.substring(0,begindiv);
			d = this.divs_content.getElementsByTagName("img");
			for (i=0;i<d.length;i++) {
				if (d[i].id.indexOf("img")>=0) {
					this.addEvent(d[i],'mouseover',function(e){ window.refToModMessage.zoomOutImage(e,this); });
				}
			}

			this.divs_shadow.style.marginLeft = (-11 + this.shadowOffset + 2) + 'px';
			this.divs_shadow.style.marginTop = '-' + ((currentTD.offsetHeight-11) - this.shadowOffset - 2) + 'px';
			this.divs_shadow.style.width = (currentTD.offsetWidth-22) + 'px';
			this.divs_shadow.style.height = (divH-12) + 'px';
			currentTD.appendChild(this.divs_shadow);
			
			
			currentTD.appendChild(this.divs_content);


			this.divs_shadow.style.display='block';
			this.divs_content.style.display='block';
			this.addEvent(this.divs_content,'mouseout',function(e){ setTimeout(function(){window.refToModMessage.close(e,this);},5); });
			this.addEvent(this.divs_transparentDiv,'mouseover',function(e){ window.refToModMessage.checkAndCloseContentDiv(e,this); });
			this.addEvent(this.divs_transparentDiv,'mouseout',function(e){ setTimeout(function(){window.refToModMessage.closeTransparent(e,this);},10); });
			this.addEvent(document,'mouseover',function(e){ window.refToModMessage.checkAndCloseTransparentDiv(e,this); });
		} else {
			if (this.divs_content.style.display != 'block') {
				this.divs_shadow.style.display='block';
				this.divs_content.style.display='block';
				this.divs_transparentDiv.style.display='block';
			}
		}
		
		if (!e)
		e = window.event;
		if (e.target) 
          source = e.target;
		else if (e.srcElement) 
          source = e.srcElement;
		if (source != this.divs_content){
			this.on_divs_content_child = true;
			this.on_divs_transparentDiv_child = true;
		}
		

//		window.refToThisModalBoxObj = this;		
	}
	// }}}		
	,
	// {{{ ()
    /**
     *	Display the modal dialog box
     * 	
     *
     * @public	
     */
	setShadowDivVisible : function(visible)
	{
		this.shadowDivVisible = visible;
	}
	// }}}		
	,
	// {{{ ()
    /**
     *	Display the modal dialog box
     * 	
     *
     * @public	
     */
	zoomOutImage : function(e, currentIMG)
	{
		if (currentIMG!=this.last_display_img) {
			if (!this.zoomimg) {
				largeur = ((currentIMG.style.width.replace('px','')/1) + 100) + 'px';	
				hauteur = ((currentIMG.style.height.replace('px','')/1) + 90) + 'px';	
				this.zoomimg = document.createElement('img'); 
				this.zoomimg.style.width = largeur;
				this.zoomimg.style.height = hauteur;
				this.zoomimg.style.display = 'block';
				this.zoomimg.style.position = 'absolute';
				this.zoomimg.style.marginLeft = '-'+ (50) + 'px';
				this.zoomimg.style.marginTop = '-'+ (currentIMG.offsetHeight+1) + 'px';
				this.zoomimg.style.border = '2px solid #000000';
				this.addEvent(this.zoomimg,'mouseout',function(e){ window.refToModMessage.zoomInImage(e,this); });
				currentIMG.parentNode.appendChild(this.zoomimg);
			} else {
				this.zoomimg.src = currentIMG.src; 
				currentIMG.parentNode.appendChild(this.zoomimg);
				this.zoomimg.style.display = 'block';
			}
		} else {
			this.zoomimg.style.display = 'block';
		}
	}
	// }}}		
	,
	// {{{ ()
    /**
     *	Display the modal dialog box
     * 	
     *
     * @public	
     */
	zoomInImage : function(e, currentIMG)
	{
		if (!this.on_zoom_image)
			this.zoomimg.style.display = 'none';
	}
	// }}}	
	,
	// {{{ close()
    /**
     *	Close the modal dialog box
     * 	
     *
     * @public	
     */		
	checkAndCloseTransparentDiv : function(e, currentTD)
	{
		if (this.divs_transparentDiv.style.display != 'none') {
			if (!e)
			e = window.event;
			if (e.target) 
			source = e.target;
			else if (e.srcElement) 
			source = e.srcElement;
			close = true;
			while(source!=document) {
				if (source==document.getElementById("DHTML_AreaToShadow"))
					close = false;
				source = source.parentNode;
			}
			if (close){
				this.divs_transparentDiv.style.display='none';
				this.divs_shadow.style.display='none';
				this.divs_content.style.display='none';
//				this.last_display_td = null;
			}
		}
	}	
	// }}}	
	,
	// {{{ close()
    /**
     *	Close the modal dialog box
     * 	
     *
     * @public	
     */		
	checkAndCloseContentDiv : function(e, currentTD)
	{
		if (this.divs_content.style.display != 'none') {
			if (!e)
			e = window.event;
			if (e.target) 
			source = e.target;
			else if (e.srcElement) 
			source = e.srcElement;
			if (source == this.divs_transparentDiv){
				this.divs_shadow.style.display='none';
				this.divs_content.style.display='none';
//				this.last_display_td = null;
			}
		}

		if (e.target) 
          source = e.target;
		else if (e.srcElement) 
          source = e.srcElement;
		if ((source != this.divs_transparentDiv) && (source.id.indexOf('td')>=0)) {
			this.on_divs_transparentDiv_child = true;
		}
		
	}	
	// }}}	
	,
	// {{{ close()
    /**
     *	Close the modal dialog box
     * 	
     *
     * @public	
     */		
	close : function(e, currentTD)
	{
		if (!e)
		e = window.event;
		if (e.target) 
          source = e.target;
		else if (e.srcElement) 
          source = e.srcElement;
		if (source == this.divs_content){
			if (!this.on_divs_content_child) {
				this.divs_shadow.style.display='none';
			this.divs_content.style.display='none';
//			this.last_display_td = null;
			}
		} else {
			this.on_divs_content_child = false;
			this.on_divs_transparentDiv_child = false;
		}

		
	}	
	// }}}	
	,
	// {{{ close()
    /**
     *	Close the modal dialog box
     * 	
     *
     * @public	
     */		
	closeTransparent : function(e, currentTD)
	{
		if (!e)
		e = window.event;
		if (e.target) 
          source = e.target;
		else if (e.srcElement) 
          source = e.srcElement;
		if (source == this.divs_transparentDiv){
			if (this.divs_content.style.display=='none') {
				if (!this.on_divs_transparentDiv_child) 
					this.divs_transparentDiv.style.display='none';
			}
		} else {
			this.on_divs_transparentDiv_child = false;
		}
	}	
	// }}}	
	,
	// {{{ __addEvent()
    /**
     *	Add event
     * 	
     *
     * @private	
     */		
	addEvent : function(whichObject,eventType,functionName,suffix)
	{ 
	  if(!suffix)suffix = '';
	  if(whichObject.attachEvent){ 
	    whichObject['e'+eventType+functionName+suffix] = functionName; 
	    whichObject[eventType+functionName+suffix] = function(){whichObject['e'+eventType+functionName+suffix]( window.event );} 
	    whichObject.attachEvent( 'on'+eventType, whichObject[eventType+functionName+suffix] ); 
	  } else 
	    whichObject.addEventListener(eventType,functionName,false); 	    
	} 
	// }}}	
	,
	// {{{ __createDivs()
    /**
     *	Create the divs for the modal dialog box
     * 	
     *
     * @private	
     */		
	__createDivs : function(currentTD)
	{
		// Creating transparent div
		this.divs_transparentDiv = document.createElement('DIV');
		this.divs_transparentDiv.className='zoomOutImage_transparentDivs';
		this.divs_transparentDiv.style.left = '0px';
		this.divs_transparentDiv.style.top = '0px';
		this.divs_transparentDiv.style.position = 'absolute';
		this.divs_transparentDiv.style.zIndex = '10000';		
		this.divs_transparentDiv.style.width = (document.getElementById("DHTML_AreaToShadow").offsetWidth-2) + 'px';
		this.divs_transparentDiv.style.height = (document.getElementById("DHTML_AreaToShadow").offsetHeight-2) + 'px';
		document.getElementById("DHTML_AreaToShadow").appendChild(this.divs_transparentDiv);

		d = document.getElementById("DHTML_AreaToShadow").getElementsByTagName("td");
		for (i=0;i<d.length;i++) {
			if (d[i].id.indexOf("td")>=0) {
				td_div = document.createElement('DIV');
				td_div.id = 'td_div'+i;
				td_div.style.zIndex = '90000';
				td_div.style.position = 'absolute';
				td_div.style.marginLeft = '-11px';
				td_div.style.width = (d[i].offsetWidth-22) + 'px';
				td_div.style.height = (d[i].offsetHeight-12) + 'px';
				td_div.style.marginTop = '-' + (d[i].offsetHeight-11) + 'px';
				td_div.style.backgroundColor = 'transparent';
				td_div.className = 'boutiques';
				d[i].appendChild(td_div);
			}
		}
		
		// Creating content div
		this.divs_content = document.createElement('DIV');
		this.divs_content.className = 'zoomOutImage_contentDiv';
		this.divs_content.id = 'DHTMLSuite_zoomBox_contentDiv';
					
		// Creating shadow div
		this.divs_shadow = document.createElement('DIV');
		this.divs_shadow.className = 'zoomOutImage_contentDiv_shadow';
		window.refToModMessage = this;

	}
}