// JavaScript Document
// class clsBigImgView
// code by Azer Manafov (azerman[at]hotmail[dot]com)
// ------------------------------- clsBigImgView ----------------------------------- *

function clsBigImgView( helper,clbkNavigate )
{

	/*
    if ( arguments.callee._singletonInstance )     
         return arguments.callee._singletonInstance;   
	arguments.callee._singletonInstance = this;  	
	*/
	var m_helper      = helper;
	var m_onwinresize = null;
	clsBigImgView.BTNNEXT_NONE = 0;
	clsBigImgView.BTNNEXT_OPEN = 1;
	clsBigImgView.BTNPREV_NONE = 2;
	clsBigImgView.BTNPREV_OPEN = 3;

    var randomnumber = Math.floor(Math.random()*10000)+1;
	var m_prop = 
	{  
		imgwidth:  800,
		imgheight: 600,
		
		imgprogress: "images/sys/progress.gif",
		progressid:  "imgProgress" + (Math.floor(Math.random()*10000)+1),

		bigimgholder : "bigView"+randomnumber,
        bigreldiv    : 'bigDivRel'+randomnumber,
		bigimgdiv    : "bigDivImg"+randomnumber,
        bigimgid     : 'bigImage'+randomnumber,
		btnleftimgid : 'buttonLeftImage'+randomnumber,
		btnrightimgid: 'buttonRightImage'+randomnumber,
		btnimgleft   : "images/sys/blank.png",
		btnimgright  : "images/sys/blank.png",
		btnimgindex  : "images/sys/blank.png",
		btnimgnone   : "images/sys/blank.png",
		thumbimg     : "images/sys/kadr.gif",
		thumbtblid   : "albumThumbs"+randomnumber,
		deskbkgclr   : "#333333",
		borderclr    : "#e09132",//D49F55
		titlecolor   : "#ffdd00",
		imgbgclr     : '#000000',
		thumbprefix  : "thumb_",
		semitranspbg : "images/sys/bg_transp_50blk.png",
		backbtnimg   : "images/sys/backbtn.png",
		callbackNav  : (clbkNavigate == undefined)?null:clbkNavigate
		
	};
	
	var m_visibleobj = new Array( );
	
	var m_objects =
	{   holder: null,
	    indiv : null,
		prediv: null,
		nxtdiv: null,
	    imgdiv: null,
		
		slide: null,
		imgpre: null,
		imgnxt: null
	};
	var iprogress = new Image( );
	iprogress.src = m_prop.imgprogress;
	
	function buttonsVisible( ) { viewButtons(true ); }
	function buttonsHidden ( ) { viewButtons(false); }
	this.resize      = doBodyResize2;
	
	this.changeImage = function( path )
	{   if ( !m_objects.slide ) return;
	    if ( m_objects.holder )
		{   var rc = m_helper.getmaxdim( );
		    m_objects.holder.style.width  = rc.width  + 'px';
		    m_objects.holder.style.height = rc.height + 'px';

			m_helper.setVisible(m_objects.holder, true);
			m_helper.setVisible(m_objects.slide,false);
			showProgress(true);
			
			m_objects.slide.onload  = onImgload;
			m_objects.slide.onerror = onImgError;
			m_objects.slide.onabort = onImgAbort; 
			m_objects.slide.src     = urlbase()+path;
        }
		
	}
	
	this.changeNavImg = function( state )
	{   if ( !m_objects.imgnxt ) return;
	    switch( state )
		{   case clsBigImgView.BTNNEXT_NONE: m_objects.imgnxt.src = m_prop.btnimgnone;  break;
		    case clsBigImgView.BTNNEXT_OPEN: m_objects.imgnxt.src = m_prop.btnimgright; break;
			
			case clsBigImgView.BTNPREV_NONE: m_objects.imgpre.src = m_prop.btnimgnone;  break;
		    case clsBigImgView.BTNPREV_OPEN: m_objects.imgpre.src = m_prop.btnimgleft;  break;
		}
    }

	function createBigImgHolder( )
	{
		if ( $(m_prop.bigimgholder) != null  )
		{   m_objects.holder = $(m_prop.bigimgholder);
		    m_objects.indiv  = $(m_prop.bigreldiv);
			m_objects.prediv = $('album_prev');
			m_objects.nxtdiv = $('album_next');
			m_objects.imgdiv = $(m_prop.bigimgdiv);
			m_objects.slide  = $(m_prop.bigimgid);
			m_objects.imgpre = $(m_prop.btnleftimgid);
			m_objects.imgnxt = $(m_prop.btnrightimgid);
		}
		else
		{
			var bod       = document.getElementsByTagName('body')[0];
			var divstyles = 
			{ 'z-index':100,'position': 'absolute', 'visibility':'hidden','left':'0px', 'top':'0px', 'width':'100%','height':'100%',
			  'background-image' : 'url(' + m_prop.semitranspbg + ')', 'background-repeat':'repeat'
			};
			var divinstyles   = { 'display':'block','z-index':'100', 'position':'absolute', 'left':'0px', 'top':'0px', 'width':'1px',  'height':'1px',  'background-color':m_prop.imgbgclr};//,'padding':'5px'};
			var divimgstyles  = { 'display':'block','z-index':'100', 'position':'absolute', 'left':'0px', 'top':'0px', 'width':'1px',  'height':'1px',  'visibility':'hidden' };
//			var btnstyles     = { 'display':'block','z-index':'122', 'position':'relative', 'left':'0px', 'top':'50px','width':'30px', 'height':'30px', 'visibility':'hidden','cursor':'pointer' };
			var btnstyles     = { 'display':'block','z-index':'122', 'position':'absolute', 'left':'0px', 'top':'50px','width':'30px', 'height':'30px', 'visibility':'hidden','cursor':'pointer' };

// main div
			m_objects.holder = document.createElement('div');
			m_helper.setAttributes( m_objects.holder, { 'id':m_prop.bigimgholder});
			m_helper.setStyles    ( m_objects.holder, divstyles);
// internal container for image and buttons		
			m_objects.indiv = document.createElement('div');
			m_helper.setAttributes( m_objects.indiv, {'id':m_prop.bigreldiv});
			m_helper.setStyles    ( m_objects.indiv, divinstyles);
// prev btn. holder		
			m_objects.prediv = document.createElement('div');
			m_objects.prediv.setAttribute( 'id','album_prev');
			m_helper.setStyles( m_objects.prediv, btnstyles);
// next btn holder		
			m_objects.nxtdiv = document.createElement('div');
			m_objects.nxtdiv.setAttribute( 'id','album_next');
			m_helper.setStyles( m_objects.nxtdiv, btnstyles);
// image holder
			m_objects.imgdiv  = document.createElement('div');
			m_objects.imgdiv.setAttribute( 'id',   m_prop.bigimgdiv);
			m_helper.setStyles    ( m_objects.imgdiv, divimgstyles);

			m_objects.slide   = document.createElement("img");
			m_objects.slide.setAttribute( 'id',   m_prop.bigimgid);
			m_helper.setStyles   ( m_objects.slide, {'display':'inline', 'cursor':'pointer','border':'2px solid ' + m_prop.borderclr ,'padding':'5px', 'background-color':m_prop.imgbgclr});
		
			m_objects.imgpre   = document.createElement("img");
			m_objects.imgpre.setAttribute( 'id',  m_prop.btnleftimgid);
			m_objects.imgpre.setAttribute( 'src', m_prop.btnimgleft );
			m_objects.imgpre.setAttribute( 'title', 'Prev');
			m_helper.setStyles   ( m_objects.imgpre, {'display':'inline'});
	
			m_objects.imgnxt   = document.createElement("img");
			m_objects.imgnxt.setAttribute( 'id', m_prop.btnrightimgid);
			m_objects.imgnxt.setAttribute( 'src',m_prop.btnimgright);
			m_objects.imgnxt.setAttribute( 'title', 'Next');
			m_helper.setStyles   ( m_objects.imgnxt, {'display':'inline'});
			
			m_objects.prediv.appendChild( m_objects.imgpre  );
			m_objects.nxtdiv.appendChild( m_objects.imgnxt  );
			m_objects.imgdiv.appendChild( m_objects.slide  );
			
			m_objects.indiv. appendChild( m_objects.prediv );
			m_objects.indiv. appendChild( m_objects.nxtdiv );
			m_objects.indiv. appendChild( m_objects.imgdiv  );
	
			m_objects.holder.appendChild( m_objects.indiv);
			bod.  appendChild( m_objects.holder  );
        }
		
		m_objects.slide.onclick      = doClickBigImg;
		m_objects.slide.onmouseover  = buttonsVisible;
		m_objects.slide.onmouseout   = buttonsHidden;

		m_objects.imgpre.onclick     = onNavBtnClick;
		m_objects.imgpre.onmouseover = buttonsVisible;
		m_objects.imgpre.onmouseout  = buttonsHidden;

        m_objects.imgnxt.onclick     = onNavBtnClick;
		m_objects.imgnxt.onmouseover = buttonsVisible;
		m_objects.imgnxt.onmouseout  = buttonsHidden;
		
		m_onwinresize   = window.onresize;
		window.onresize = doBodyResize2;
		viewButtons( false );
		viewHolders( false );
	}
	
	this.create = function( )
	{
	    createBigImgHolder( );
	}
    function doBodyResize2( )
	{   
        if ( m_onwinresize )
	         m_onwinresize( );

		if ( !m_objects.holder || m_objects.holder.style.visibility != 'visible')
		     return;
			 
		var rBody    = m_helper.getmaxdim();
		var rc       = m_helper.getObjectRect(m_objects.slide);
	    m_objects.holder.style.width  = rBody.width  + 'px';
		m_objects.holder.style.height = rBody.height + 'px';

		var x = Math.round((rBody.width  - rc.width )/2);
		var y = Math.round((rBody.height - rc.height)/2);


		m_objects.indiv.style.left   = x +"px";
		m_objects.indiv.style.top    = y +"px";
        m_objects.indiv.style.width  = (rc.width )+'px';
		m_objects.indiv.style.height = (rc.height)+'px';

        m_objects.prediv.style.top   = '15px';
        m_objects.nxtdiv.style.top   = '15px';
		
		m_objects.prediv.style.left  = '0px';
		if ( browser.isIE )
		     m_objects.nxtdiv.style.left = (rc.width-22)+'px';
		else m_objects.nxtdiv.style.left = (rc.width-26)+'px';
		
	}
	
	function doClickBigImg( )
	{   
	    viewImage  ( false );
        viewButtons( false );
        viewHolders( false );
		
		viewVisibleObjects ( true );
	}
	function onNavBtnClick ( )
	{
	
		var title = this.getAttribute( 'title');
	
	    var dir   = 0;
	    switch( title )
		{   case 'Prev':  dir = -1; break;
			case 'Next':  dir =  1; break;
			default: dir = 0; break;
		}
		
		if ( dir == 0 )
		{   viewHolders( false );
		    viewButtons( false );
			return;
		}
		if ( m_prop.callbackNav )
		{
			m_prop.callbackNav(dir);
		}
	}
	
	
	function onImgload     ( ) 
	{   onComplete(1);
	    scrollLeftTop( );
		
		var w     = this.width;
		var h     = this.height;
		if ( m_prop.bigdimension )
		{   if ( this.style.removeAttribute )
			{   this.style.removeAttribute("height");
				this.style.removeAttribute("width");
			}
			else
			{   this.style.removeProperty ("height");
				this.style.removeProperty ("width");
			}
			this.removeAttribute("height");
			this.removeAttribute("width");
			if ( w < h )
				 this.setAttribute( 'height',m_prop.bigdimension );
			else this.setAttribute( 'width', m_prop.bigdimension );
		}

        viewImage  ( true );
        viewHolders( true  );
		viewButtons( false );

		doBodyResize2( );

        stackVisibleObjects( );
		viewVisibleObjects ( false);
    }
	
	function onImgError    ( ) { onComplete(2); }
	function onImgAbort    ( ) { onComplete(2); }
	function onComplete    ( state ) 
	{   
		viewImage( false );
	    showProgress(false);
		this.state = state; 
	}

    function viewButtons   ( enable )
	{   m_helper.setVisible(m_objects.prediv,enable);
		m_helper.setVisible(m_objects.nxtdiv,enable);
	}
	function viewHolders   ( enable )
	{   m_helper.setVisible(m_objects.holder,enable);
		m_helper.setVisible(m_objects.indiv, enable);
        m_helper.setVisible(m_objects.imgdiv,enable);
    }
	
	function viewImage          ( enable )
	{   if ( m_objects.holder )
		{   m_helper.setVisible(m_objects.holder,enable);
		    m_helper.setVisible(m_objects.slide, enable);
		}
	}
	function showProgress       ( enable )
	{
		var rc  = m_helper.getmaxdim( );
		var x   =  Math.round( rc.width/2  - 16 );
		var y   =  Math.round( rc.height/2 - 16 );
		var opr = $(m_prop.progressid);
		if ( !opr )
		{   var bod  = document.getElementsByTagName('body')[0];
			var imgs = 
			{ 'z-index':257,'position': 'absolute', 'visibility':'hidden','display':'block',
			   'left':(x+'px'), 'top':(y+'px'), 'width':'32px', 'height':'32px'
			};
			opr       = document.createElement('img');
			
			opr.setAttribute  ( 'id', m_prop.progressid);
			opr.setAttribute  ( 'src',m_prop.imgprogress);
		    m_helper.setStyles( opr, imgs );
			bod.   appendChild( opr );
		}
		opr.style.left = x + 'px';
		opr.style.top  = y + 'px';
		m_helper.setVisible(opr,enable);
		
	}
	function stackVisibleObjects( )
	{
		var o = document.getElementsByTagName('object');
		for ( var i = 0; i < o.length; i++)
			if (  m_helper.getStyle(o[i],'visibility',1) == 'visible')
			      m_visibleobj.push(o[i]);
		o = document.getElementsByTagName('embed');
		for ( var i = 0; i < o.length; i++)
			if (  m_helper.getStyle(o[i],'visibility',1) == 'visible')
			      m_visibleobj.push(o[i]);
	}
	function viewVisibleObjects( enable )
	{   for ( var i = 0; i < m_visibleobj.length; i++)
	    {   //m_helper.setVisible(m_visibleobj[i],enable);
		}
	}
	function scrollLeftTop( )
	{   var bod     = document.getElementsByTagName( '*');
		for ( var i = 0; i < bod.length; i++ )
		{   if ( bod[i].scrollTop )
                bod[i].scrollTop = 0;
            if ( bod[i].scrollLeft )
                bod[i].scrollLeft = 0;
				
		}
	}
	this.setProperties = function( prop )
	{   for ( var i in prop )
			  if ( m_prop[i] != undefined ) 
			       m_prop[i] = prop[i];
	}
	
/*
<div id="bigView" onclick="triggerBigView(this);" style="display:block; position:absolute; left:0px; top: 0px; width:90%; height: 90%; background:url(images/sys/bg_transp_50blk.png) transparent repeat 50% 50%; border: 2px solid #e09132;  overflow:hidden; visibility:hidden;">
<img src="images/sys/x.gif" align="left" style="padding:5px; border: 2px solid #e09132; background-color:black;" />
</div>

*/
};