var ImgBrowser = Class.create
({	
	
	/**
	 * Constructor
	 */
	initialize: function() 
	{			
		if( typeof(lightbox) == 'undefined' ) this.lightbox = 1;
		else this.lightbox = lightbox;
		
		this.create();
		
		this.cur = 0;		
	},
	
	
	createNav: function()
	{	
		// Generate nav squares
		for( i = this.images.length-1; i >= 0; i-- )
		{
			nav = document.createElement('div');
			nav.id = 'imgnav' + i;
			nav.style.width = '12px';
			nav.style.height = '12px';
			nav.style.backgroundColor = '#cab801';
			nav.style.marginBottom = '1px';
			
			$('left').appendChild(nav);
			Event.observe( nav, 'click', this.changeImg.bindAsEventListener(this, i) );
			
			if( i == 0 ) $('imgnav0').morph('background-color: #2d95c3;');
		}
		
		
		// static div for move
		navdiv = document.createElement('div');
		navdiv.id = 'imgnav';
		$('left').appendChild(navdiv);
		
		// creating a new div to align top and bottom buttons because of continual changing wishes...
		sd = document.createElement('div');
		sd.id = 'imgnav_static';
		sd.style.position = 'absolute';
		sd.style.bottom = '-31px';
		
		$('imgnav').appendChild(sd);
		
		
		
		// Append static up-arrow
		nav = document.createElement('img');
		nav.id = 'imgnav_up';
		nav.src = 'fileadmin/templates/js_imgswitch/nav_up.png';
		
		$('imgnav_static').appendChild(nav);
		Event.observe( nav, 'click', this.changeImg.bindAsEventListener(this, 'up') );
		
		
		// Append static down-arrow
		nav = document.createElement('img');
		nav.id = 'imgnav_down';
		nav.src = 'fileadmin/templates/js_imgswitch/nav_down.png';
		$('imgnav_static').appendChild(nav);
		Event.observe( nav, 'click', this.changeImg.bindAsEventListener(this, 'down') );
		
		
		
	},
	
	
	create: function()
	{
		this.images = images.split(',');
		
		// Images
		if( this.images.length == 1 )
		{
			// Not using standalone substring because IE won't support negative indexes... 
			//if( this.images[0].substr(-3) == 'swf' ) this.el = 'swf';
			//else this.el = 'img';
			
			if( this.images[0].substr(this.images[0].lastIndexOf('.') ) == '.swf' ) this.el = 'swf';
			else this.el = '';
		}
		
		
		if( this.el == 'swf' ) this.createFlash();
		else
		{
			
			this.createImg();
			
			if( this.images.length > 1 ) 
			{
				this.createNav();
			
				if( navigator.userAgent != 'Microsoft Internet Explorer' )
				{
					/** What a pity to expect that IE works fine with javascript.. -.- **/
					this.autoslide = window['set' + 'Interval']( function(thisObj) { thisObj.changeImg(this, 'up'); }, 5000, this);
				}
			}	
		}
		
	},
	
	
	createFlash: function()
	{
		
		this.lightbox = 0;
		
		if (document.all && !window.opera)
		{
			// Internet Explorer cannot handle createElement with objects 
			$('imgcon').innerHTML = '<object type="application/x-shockwave-flash" width="624" height="365" data="' + imgpath + this.images[0] + '"> <param name="movie" value="' + imgpath + this.images[0] + '" /> </object>';
		}
		
		else
		{
			obj = document.createElement('object');
			obj.type = 'application/x-shockwave-flash';
			obj.data = imgpath + this.images[0];
			obj.style.width = '624px';
			obj.style.height = '365px';
			
			param1 = document.createElement('param');
			param1.name = 'movie';
			param1.value = imgpath + this.images[0];
			
			param2 = document.createElement('param');
			param2.name = 'bgcolor';
			param2.value = '#f2f2f2';
			
			obj.appendChild(param1);
			obj.appendChild(param2);
			
			$('imgcon').appendChild(obj);
	
		}
	},
	
	
	createImg: function()
	{
		for( i = 0; i < this.images.length; i++ )
		{
			img = document.createElement('img');
			img.id = 'img' + i;
			img.src = imgpath + this.images[i];
			img.style.width = '624px';
			img.style.height = '365px';
			img.style.display = 'none';
			
			if( this.lightbox )
			{
				a = document.createElement('a');
				a.href = imgpath + this.images[i];
				a.setAttribute('rel', 'lightbox[ref]');
			
				a.appendChild(img);
				$('imgcon').appendChild(a);
				Event.observe( a, 'click', this.stopSlideshow.bindAsEventListener(this) );
			}
			
			else
			{
				$('imgcon').appendChild(img);
			}
			
			if( i == 0 ) $('img0').appear({duration: 0});
		}
	},
	
	
	/**
	 * Changes image
	 *
	 * A little bit tricky because in current version, this.cur is not accessable in
	 * the inline function in fade() so i had to use i. Thus i had to manipulate i in this
	 * method instead of this.cur. Also take care of i because it can also be a string 'up' or 'down'.
	 */
	changeImg: function( )
	{	
		if( arguments[0] == '[object MouseEvent]' ) this.stopSlideshow();
		
		i = arguments[1];
		this.prev = this.cur;
		
		if( i == 'down' )
		{
			if( this.prev == 0 ) i = this.images.length - 1;
			else i = this.prev - 1;
		}
		
		if( i == 'up' )
		{
			if( this.prev == this.images.length - 1 ) i = 0;
			else i = this.prev + 1;
		}
		
		$('img' + this.prev).fade( {	duration: 0.5, 
								  		afterFinish:	function()
										{
											$('img' + i).appear({duration: 0.5});	
										}
								} );
		
		this.cur = i;
		
		$('imgnav' + this.cur).morph('background-color: #2d95c3;');
		$('imgnav' + this.prev).morph('background-color: #cab801;');
	},
	
	stopSlideshow: function()
	{
		window.clearInterval(this.autoslide);
	}
	
	
});