/**
* scriptaculous alapú képmegjelenítő.
* fűggőségei: 
* prototype.js
* scriptaculous.js
*
* használata : 
* gpg = new gpGallery(true,true);
* 
* <span clas="gallery">
* <img src="img/2.jpg"  onclick="gpg.showImage('img/1.jpg');">
* <img src="img/4.jpg"  onclick="gpg.showImage('img/3.jpg');">
* </span>
*
*
* <div id="galleryframediv" class="galleryframediv" style="display : none; padding : 0px; background-color : white; border : 1px solid" class="jsgallery">
* <img src="img/close.png" style="margin : 4px; position : absolute; cursor : pointer" align="right"  onclick="new Effect.Fade(this.parentNode);" alt="close"  >
* <img id="galleryimage" style="margin : 2px;  width : 100%; height : 100%; cursor : move">
* </div>
*
* <img id="gpg_progressbar" src="img/ajax-loader.gif" style="position : absolute; display : none">
**/

function gpGallery(multipleframes, resizeimages)
{
	this.framedivwidth 		= 400;
	this.framedivheight		= 300;
	this.frameborderwidth 	= 4;
	this.frameborderheight	= 4;
	this.progressbarheight	= 20;
	this.progressbarwidth	= 220;
	this.elementcount 		= 0;
	
	this.multipleframes		= multipleframes;
	this.resizeimages		= resizeimages;
	this.showImage 			= gpG_showImage;
	this.getWindowSize		= gpG_getWindowSize
	
}

function gpG_showImage(path)
{
	this.elementcount++;
	
	var windowwidth		= this.getWindowSize().width;
	var windowheight	= this.getWindowSize().height;
	var screentop 		= document.viewport.getScrollOffsets().top;
	var screenleft		= document.viewport.getScrollOffsets().left;
	
	var framedivtop				= screentop+((windowheight-(this.framedivheight))/2)
	var framedivleft			= screenleft+((windowwidth-(this.framedivwidth))/2)
	
	
	
	//Több képet lehet megynitni egyszerre
	if (this.multipleframes)
	{ 
		
		//Eltolja a div pozíciót
		framedivtop = framedivtop+(this.elementcount*10);
		framedivleft = framedivleft+(this.elementcount*10);
		
		
		var	framediv =  $('galleryframediv').cloneNode(true);
		
		document.body.appendChild(framediv);
		framediv.id = 'gpgs_'+this.elementcount;
	
		//A "homokóra" megjelenítése
		var progressbartop = screentop+((windowheight-(this.progressbarheight))/2)
		var progressbarleft = screenleft+((windowwidth-(this.progressbarwidth))/2)
	
		$('gpg_progressbar').style.top = progressbartop+'px';
		$('gpg_progressbar').style.left = progressbarleft+'px';
		$('gpg_progressbar').style.display = 'block';
	
		var img = framediv.getElementsByTagName('img')[1];
		
		framediv.style.position='absolute';
		framediv.style.top = framedivtop+'px';
		framediv.style.left= framedivleft+'px';
	
		img.src=path;
		
	
		if (this.resizeimages)
		{
			framediv.style.height = this.framedivheight+'px';
			framediv.style.width  = this.framedivwidth+'px';
			img.style.width = this.framedivwidth-this.frameborderwidth+'px';
			img.style.height = this.framedivheight-this.frameborderheight+'px';
		}
		
	 	Event.observe(img, 'load', function (event) {
			new Effect.Appear(framediv,{direction:'center'});
			new Draggable(framediv.id);
			new Effect.Fade($('gpg_progressbar'));
			Event.stopObserving(img,'load');
			});
	}
	else
	{ //Egyszerre csak egy kép nézhető
		var	framediv =  $('galleryframediv');
				
		document.body.appendChild(framediv);
		
	
		//A "homokóra" megjelenítése
		var progressbartop = screentop+((windowheight-(this.progressbarheight))/2)
		var progressbarleft = screenleft+((windowwidth-(this.progressbarwidth))/2)
	
		$('gpg_progressbar').style.top = progressbartop+'px';
		$('gpg_progressbar').style.left = progressbarleft+'px';
		
	
		var img = framediv.getElementsByTagName('img')[1];
		
		//Csak akkor pozicionálja az ablakot, ha még nem látható
		if (framediv.style.display=='none')
			{
			$('gpg_progressbar').style.display = 'block';
			framediv.style.position='absolute';
			framediv.style.top = framedivtop+'px';
			framediv.style.left= framedivleft+'px';
			//framediv.style.height = this.framedivheight+'px';
			//framediv.style.width  = this.framedivwidth+'px';
			Event.observe(img, 'load', function (event) {
				new Effect.Appear(framediv,{direction:'center'});
				new Effect.Appear(img,{direction:'center', duration : 0.5});
				new Draggable(framediv.id);
				new Effect.Fade($('gpg_progressbar'));
				Event.stopObserving(img,'load');
				});	
			img.src=path;
			}
			else
			{//Ha az ablak már látható volt, a képet kell efektelni
			 if (img.src.search(path)==-1)
			 {
			 	framediv.getElementsByClassName('closebutton')[0].style.display="none";
				new Effect.Fade(img,{duration : 0.3, afterFinish : function () {
					Event.observe(img, 'load', function (event) {
						new Effect.Appear(framediv,{direction:'center'});
						new Effect.Appear(img,{direction:'center', duration : 0.5});
						new Draggable(framediv.id);
						new Effect.Fade($('gpg_progressbar'));
						Event.stopObserving(img,'load');
						framediv.getElementsByClassName('closebutton')[0].style.display="block";
						});	         
						
					img.src=path;	  
					} } );
			 }
				
			}
			
		//Akkor adja hozzá az effektet a kép betöltéséhez, ha változott a kép, vagy nem látszott semmi	
		if (this.resizeimages)
		{
			framediv.style.height = this.framedivheight+'px';
			framediv.style.width  = this.framedivwidth+'px';
			img.style.width = this.framedivwidth-this.frameborderwidth+'px';
			img.style.height = this.framedivheight-this.frameborderheight+'px';
		}
	
	 	
	}
}

function gpG_getWindowSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  size = {'width' : myWidth, 'height' : myHeight};
  //size.w = 
  //size.h = myHeight;
  
  return size;
}