function showBigPic(folder, imageName, imageID, imageDisplay)
{
	
    var currentImage = document.getElementById('currentImage').value;
	if(currentImage != "")
	{
		document.getElementById(currentImage).style.border = "0px none #FFFFFF";
		document.getElementById(currentImage).style.marginTop = "3px";
	}
	
		document.getElementById(imageID).style.border = "3px solid red";
		document.getElementById(imageID).style.marginTop = "0px";
		document.getElementById('currentImage').value = imageID;
	document.getElementById('white_hide').style.display = "none";
	var holder=document.getElementById('image_holder_main');
	var imgElement = document.getElementById('image_holder');
	if (imgElement != null)
	{
		 holder.removeChild(imgElement);
	}
	var newimg=document.createElement('img');
	newimg.src= "images/samples/" + folder + "/" + imageName;
	//newimg.alt=imageName;
	newimg.setAttribute('id','image_holder');
	newimg.height= "200";
	newimg.width= "200";
	newimg.setAttribute('height','200px');
	newimg.setAttribute('width','200px');
	holder.appendChild(newimg);
	document.getElementById('fileName').innerHTML = imageDisplay;
    
}

  function resetI()
  {
  	 
     document.getElementById("image_section_holder").style.display = "block";
    document.getElementById("i").value = 1;
	document.getElementById("plus").style.display = "block";
	document.getElementById("minus").style.display = "block";
	document.getElementById("white_hide").style.display = "block";
    
  }

  function ShowEffect(element){
       
        new Effect.Opacity(element, 
       {duration:1, from:0, to:1.0});
       
   }
   function HideEffect(element){
       
       new Effect.Opacity(element, 
       {duration:1, from:1.0, to:0});
           
   }
   
   function MoveEffect(direction){
		        //variables!!!
		var i = document.getElementById("i").value;
		var total = document.getElementById("total").value;
		var i = parseInt(i);
		var total = parseInt(total);
		
				
		if(i > total)
		{
			var move_1 = "image_" + (total - i);
		}
		else
		{
			var move_1 = "image_" + i;
		}
		
		if((i + 1) > total)
		{
			var move_2 = "image_" + ((i + 1) - total);
		}
		else
		{
			var move_2 = "image_" + (i + 1);
		}
		
		if((i + 2) > total)
		{
			var move_3 = "image_" + ((i + 2) - total);
		}
		else
		{
			var move_3 = "image_" + (i + 2);
		}
		
		if((i + 3) > total)
		{
			var move_4 = "image_" + ((i + 3) - total);
		}
		else
		{
			var move_4 = "image_" + (i + 3);
		}
		
		if((i + 4) > total)
		{
			var move_5 = "image_" + ((i + 4) - total);
		}
		else
		{
			var move_5 = "image_" + (i + 4);
		}
				
		
		//five is based on plus of minus else if! as it could be in wrong place! ie if it is at zero! 65px left, minus means it needs to move to end ....
		if(direction != "minus")
		{
			if((i + 5) > total)
			{
				var move_6 = "image_" + ((i + 5) - total);
			}
			else
			{
				var move_6 = "image_" + (i + 5);
			}
		}
		else
		{
			//if((i + 4) > total)
			//{
			//	var move_5 = "image_" + ((i + 4) - total);
			//}
			//else
			//{
				if((i - 1) == 0)
				{
					var move_6 = "image_" + total;
					document.getElementById(move_6).style.left = "528px";
				}
				else
				{
					var move_6 = "image_" + (i - 1);
					document.getElementById(move_6).style.left = "528px";
				}
			//}
		}
		
		//new Effect.MoveBy(element, {x:20,y:0,)
	    document.getElementById("minus").style.display= "none";
		document.getElementById("plus").style.display= "none";
		
		if(direction == "plus")
	    {
			
			new Effect.Move(move_1, { x: 85, y: 0, mode: 'relative', duration:0.5});
			new Effect.Move(move_2, { x: 85, y: 0, mode: 'relative', duration:0.5});
			new Effect.Move(move_3, { x: 85, y: 0, mode: 'relative', duration:0.5});
			new Effect.Move(move_5, { x: 85, y: 0, mode: 'relative', duration:0.5});
			new Effect.Move(move_6, { x: 85, y: 0, mode: 'relative', duration:0.5});
			new Effect.Move(move_4, { x: 85, y: 0, mode: 'relative', duration:0.5, afterFinish: function() { 
							document.getElementById("minus").style.display= "block";
							document.getElementById("plus").style.display= "block";
							//alert(document.getElementById(move_1).style.left);
							document.getElementById(move_1).style.left = "17px";}});
	    }
		else
	    {
			new Effect.Move(move_1, { x: -85, y: 0, mode: 'relative', duration:0.5});
			new Effect.Move(move_2, { x: -85, y: 0, mode: 'relative', duration:0.5});
			new Effect.Move(move_3, { x: -85, y: 0, mode: 'relative', duration:0.5});
			new Effect.Move(move_5, { x: -85, y: 0, mode: 'relative', duration:0.5});
			new Effect.Move(move_6, { x: -85, y: 0, mode: 'relative', duration:0.5});
			new Effect.Move(move_4, { x: -85, y: 0, mode: 'relative', duration:0.5, afterFinish: function() { 
							document.getElementById("minus").style.display= "block";
							document.getElementById("plus").style.display= "block"; }});
	    }
		
		
		
		if(direction != "minus")
		{
			if(i == total)
			{
				document.getElementById("i").value = 1;
			}
			else
			{
				document.getElementById("i").value = i + 1;
			}
		}
		else
		{
			if((i - 1) == 0)
			{
				document.getElementById("i").value = total;
			}
			else
			{
				document.getElementById("i").value = i - 1;
			}
		}
		
   }