/**
 * Javascript image gallery
 * require prototype.js and scriptaculous.js
 * @author Marius Axinte <m_v_axinte@yahoo.com>
 * @since 2007-07-16
 * @version $Id$
 */
 
/**
 * Creates a new iamge gallery
 * @access private
 * @param array of images 
 * this gallery must have a div called margin in html template, and two buttons - leftNav, rightNav
 */ 
var GalleryDebug = true;
var Gallery = function(){};
var current_previewed_image = '';
Gallery.prototype.initialize = function(ImagesArray)
{
	try
  	{
	  	Gallery.MarginDivName = 'galleryThumbs';
	  	
	  	Gallery.SupportDivWidth = 0;
	  	Gallery.SupportDivHeight = 0;
	    Gallery.MarginDiv  = $(Gallery.MarginDivName);
	    Gallery.SupportDiv  = Builder.node('div', {id: 'Suport'});
	    Gallery.ImagesArray  = ImagesArray;
	    
	    /**
	     * navigation buttons
	     * */
	     Event.observe('leftNav', 'click', function(){Gallery.moveImage('r')});
	     Event.observe('rightNav', 'click', function(){Gallery.moveImage('l')});
	     $('leftNav').className = 'inactive';
	     /**
	      * settings
	      * */
	     //set this number to show how many images you want to be displayed
         Gallery.imagesToDisplay = 3;
	     Gallery.status = null;
	     Gallery.totalImages = ImagesArray.length;
	     
	     if (ImagesArray.length <= Gallery.imagesToDisplay)
	     {
	     	$('rightNav').className = 'inactive';
	     }
	     
	     //set different refresh timing for different browsers
	     var pixelsToMove = 6;//or whatever ..
	     var milliseconds = 10;
		if (!navigator);
		else 
			if (navigator.appName.indexOf('Netscape') != -1) 
			{
				pixelsToMove = 10;
			}

	     
	     Gallery.firstImageIndex = 0;
	     Gallery.distanceToMove = 0;
	     Gallery.refreshTime = milliseconds;//time to recall the function that moves the images div
	     Gallery.imagePixelsToMove = pixelsToMove;
	     //output the gallery
	     Gallery.SupportDiv.style.left = 0+'px';
   	     Gallery.imageWidth = 92;
   	     Gallery.imageHeight = 70;
	     Gallery.createGallery();
	     
  	}
  	catch(Ex)
  	{
  		if (GalleryDebug)
  			alert(Ex.message+' on Gallery.initialize function')
  	}
}

Gallery.createGallery = function()
  {
  	if (Gallery.ImagesArray.length)
  	{
  		for (var i=0; i< Gallery.ImagesArray.length; i++)
  		{
  			Img = Builder.node('img', {src: Gallery.ImagesArray[i]});
  			Img.onclick = function(){Gallery.previewImage(this)}
  			if (i == 0 && !Gallery.imageWidth)
  			{
  				Gallery.imageWidth = Img.width
  			}
  			Img.width = Gallery.imageWidth;
  			Img.height = Gallery.imageHeight
			Gallery.SupportDiv.appendChild(Img);
			Gallery.SupportDivWidth += Gallery.imageWidth+6;//images width + padding width
		}
		Gallery.distanceToMove = Gallery.imageWidth+6;
		Gallery.SupportDiv.style.width = Gallery.SupportDivWidth+'px';
		if (Gallery.imagesToDisplay > 0)
		{
			Gallery.MarginDiv.style.width = Gallery.imagesToDisplay*(Gallery.distanceToMove)+'px';
		}
  		$(Gallery.MarginDivName).innerHTML = '';		
	  	Gallery.MarginDiv.appendChild(Gallery.SupportDiv);
  	}
  	else
  	{
  		DivNoImages = Builder.node('label', 'No images for this item');
  		$(Gallery.MarginDivName).innerHTML = '';
  		Gallery.MarginDiv.appendChild(DivNoImages);
  	}
  }
  
Gallery.moveImage = function(direction)
{
	try
	{
		if (Gallery.status == 'working')
		return;
		
		Gallery.status = 'working';
//		alert(Gallery.ImagesArray[Gallery.firstImageIndex])		
//		alert(parseInt(Gallery.SupportDiv.style.left));
		switch (direction) {
			case 'l':
			if (Gallery.firstImageIndex < Gallery.totalImages - Gallery.imagesToDisplay)
			{
				var distance = 0;
				Gallery.moveLInt = window.setInterval(function(){
					if (distance >= Gallery.distanceToMove)
					{
						var diff = distance-Gallery.distanceToMove
						if (diff != 0)
							Gallery.SupportDiv.style.left = (parseInt(Gallery.SupportDiv.style.left)+diff)+'px';
						window.clearInterval(Gallery.moveLInt);
						Gallery.status = '';
						return;
					}
					distance+=Gallery.imagePixelsToMove
					Gallery.moveItem('l');
				}, Gallery.refreshTime);
				Gallery.firstImageIndex ++;
				if (Gallery.firstImageIndex == (Gallery.totalImages - Gallery.imagesToDisplay)) $('rightNav').className = 'inactive';
				$('leftNav').className = 'active';
			}
			else
			{
				Gallery.status = '';
			}
			break;
			case 'r':
			if (Gallery.firstImageIndex != 0)
			{
				var distance = 0;
				Gallery.moveRInt = window.setInterval(function(){
					if (distance >= Gallery.distanceToMove)
					{
						var diff = distance-Gallery.distanceToMove
						if (diff != 0)
							Gallery.SupportDiv.style.left = (parseInt(Gallery.SupportDiv.style.left)-diff)+'px';
						window.clearInterval(Gallery.moveRInt);
						Gallery.status = '';
						return;
					}
					distance+=Gallery.imagePixelsToMove
					Gallery.moveItem('r');
				}, Gallery.refreshTime);
				Gallery.firstImageIndex --;
				if (Gallery.firstImageIndex == 0) $('leftNav').className = 'inactive';
				$('rightNav').className = 'active';
			}
			else
			{
				Gallery.status = '';
			}			
			break;

			default:
			break;
		}
	}
	catch(Ex)
	{
		if (GalleryDebug)
		alert(Ex.message+' on Gallery.moveImage function');
	}
}

Gallery.previewImage = function(Img)
{
	try
	{
		Images = $F('MotoJSONImages').evalJSON();
		for (var i=0; i< Images.length; i++)
		{
			if (Img.src.indexOf(Images[i]) > 20)
			{
				$('ImageMotoPreview').src = 'http://marcusmoto.ro/images/uploaded/medium/'+Images[i];
				$('aPreImage').href = 'http://marcusmoto.ro/images/uploaded/normal/'+Images[i];
//				$('aPreImage').href = 'images/uploaded/normal/'+Images[i];
				return;
			}
		}

	}
	catch(Ex)
	{
		if (GalleryDebug)
			alert(Ex.message+' on Gallery.previewImage');
	}
}

Gallery.moveItem = function(direction, distance)
{
	
	switch (direction) {
		case 'r':
			Gallery.SupportDiv.style.left = (parseInt(Gallery.SupportDiv.style.left)+Gallery.imagePixelsToMove) + 'px';
			break;
		case 'l':
			Gallery.SupportDiv.style.left = (parseInt(Gallery.SupportDiv.style.left)-Gallery.imagePixelsToMove) + 'px';			
			break;

		default:
			break;
	}
}