//This function based on the menu item selected manipulates the styles of the links and sets the path 
//for the images accordingly
function getfiles(categoryValue)
{
   
    //alert(document.getElementById('hdndesignPath').value)
    //document.getElementById("imgWebsites").value = "Gov-Center.jpg"
    document.getElementById('hdnSelectedValue').value = "";
    var smallImages,imgValue = "",imagePath="",imageZoomPath="";
    
    if(categoryValue == "DES")
    {
        //Get the path of the design category
        
        imgValue  = document.getElementById('hdndesignPath').value;
        imagePath = "images/DanceNiteOut/Small/";
        imageZoomPath = "images/DanceNiteOut/Zoom/";
        document.getElementById("DES").className = "MainTxtSelected";
        document.getElementById("WEB").className = "MainTxt";
        document.getElementById("WORKSHOP").className = "MainTxt";
    }
       if(categoryValue == "WEB")
    {
        //Get the path of the websites category
        imgValue  = document.getElementById('hdnwebsites').value; 
        imagePath = "images/DanceNiteOut5Sept/Small/";
        imageZoomPath = "images/DanceNiteOut5Sept/Zoom/";
        document.getElementById("WEB").className = "MainTxtSelected";
        document.getElementById("DES").className = "MainTxt";
        document.getElementById("WORKSHOP").className = "MainTxt";
    }    
        if(categoryValue == "WORKSHOP")
    {
        //Get the path of the websites category
        imgValue  = document.getElementById('hdnparisWorkshop').value; 
        imagePath = "images/ParisWorkshop/Small/";
        imageZoomPath = "images/ParisWorkshop/Zoom/";
        document.getElementById("WORKSHOP").className = "MainTxtSelected";
        document.getElementById("WEB").className = "MainTxt";
        document.getElementById("DES").className = "MainTxt";
    }    
    document.getElementById("hdnScroll").value = imgValue;
    
    ///resha reset the bottom scrollbar with left spacing = 0 
	document.getElementById("photoScroll").scrollLeft = 0;

   
    //Function to populate the image containers based on the category selected
    populateImages(imgValue,imagePath,imageZoomPath)
}

//Populates the small images inthe strip at the bottom
function populateImages(imgValue,imagePath,imageZoomPath)
{

    var getPaths = "",zoomPath = "";
  //  alert("This is the image value(Hidden Variable Value): " + imgValue);
   // alert("This is the image Path: " + imagePath)
    
    //split the values inside the hidden variable based on comma
    smallImages = imgValue.split(",")
   // alert(//imgValue)
    
    for(var i=0; i<smallImages.length; i++)//For Every item after the split
    {
        //document.getElementById("divZoomImages").innerHTML = '<img src="images/Webapplication/zoom/Applied02.jpg"' + '" width="564" height="348"/>'
        imgValue = smallImages[i] //Assign the path of the images to a variable
        //alert(i)
        zoomPath = smallImages[0]
       // alert(imgValue)
                
        if(imgValue != "Thumbs.db") //Check if the file name contains Thumbs.db, then do nothing
        {
            var tableId = imgValue.replace('.jpg','');
            if(getPaths != "") //Check if the variable has been processed or not
            {   
                //Yes the variable has been processed so we have to append the images tag to the already rendered images
                //document.getElementById("divSmallImages").innerHTML = document.getElementById("divSmallImages").innerHTML + '<img onclick="JavaScript:zoomImages(this.src)" src="' + imagePath + imgValue + '" width="73" height="50" class="imagePadding"/>'
                //alert(getPaths)
                document.getElementById("divSmallImages").innerHTML = document.getElementById("divSmallImages").innerHTML + '<table style="display:inline;" height="94px" width = "140px" border="0" cellpadding="0" cellspacing="0"><tr height="94px" width ="140px"><td id="' + tableId + '" align="center" height="94px" width ="140px"><img onclick="JavaScript:zoomImages(this.src)"  onmouseover="JavaScript:mouseOver(this.src);"  onmouseout="Javascript:mouseOverOut(this.src); " src="' + imagePath + imgValue + '" width="120" height="74"/></td></tr></table>'
            
            }
            else
            {
                //The variable is being processed for the first time so we just render the image here
                //document.getElementById("divSmallImages").innerHTML = '<img onclick="JavaScript:zoomImages(this.src)" src="' + imagePath + imgValue + '" width="73" height="50" class="imagePadding"/>'
               // alert("First Time" + getPaths)
                document.getElementById("divSmallImages").innerHTML = '<table style="display:inline;" height="94px" width = "140px" border="0" cellpadding="0" cellspacing="0"><tr height="94px" width ="140px"><td id="' + tableId + '" align="center" height="94px" width ="140px"><img onclick="JavaScript:zoomImages(this.src)"  onmouseover="JavaScript:mouseOver(this.src);" onmouseout="Javascript:mouseOverOut(this.src); " src="' + imagePath + imgValue + '" width="120" height="74"/></td></tr></table>'
                getPaths = "Processed"
            }
          
        }
    }
    //alert(document.getElementById('divSmallImages').innerHTML);
   document.getElementById("divZoomImages").innerHTML = '<img id = "zoomImage" src="' + imageZoomPath + zoomPath + '" width="564" height="349"/>'
    //By default, we have the first image selected in the strip so we need to highlight the same
    highLightImages(imagePath + smallImages[0])
}


//Function to populate the zoom images container based on the smalll image selected
function zoomImages(imgPath)
{
	
	
	highLightImages(imgPath);
    //alert(imgPath)
    var zommValue = imgPath.replace('Small','Zoom');
    //alert(zommValue)
    //alert(imgPath)
    document.getElementById("divZoomImages").innerHTML = '<img id = "zoomImage" src="' + zommValue + '" width="564" height="349"/>'
	mouseOverOut("");
    
}

//Function to highlight the small images in the strip based on what gets shown in the zoom container
function highLightImages(imgPath)
{
    //alert(imgPath)
    var imgValue = imgPath.replace('.jpg','');
	//alert(imgValue.substring(imgValue.lastIndexOf('/')+1));
	
	imgValue = imgValue.substring(imgValue.lastIndexOf('/')+1)
	
	//alert(document.getElementById('hdnSelectedValue').value )
	//alert(imgValue)
	document.getElementById(imgValue).className = "imageRollOver";
	
	//document.getElementById(imgValue).focus();
	
	//alert(document.getElementById('hdnSelectedValue').value)
	var previousValue = document.getElementById("hdnSelectedValue").value 
	
	if(document.getElementById("hdnSelectedValue").value != imgValue)
	{
	    document.getElementById("hdnSelectedValue").value = imgValue;
	    if(previousValue != "")
	    {
	        document.getElementById(previousValue).className = "imageRollOverOut";
	    }
	    
	    
	}
	else
	{
	     document.getElementById("hdnSelectedValue").value = imgValue;
	}
}



// Function to scroll image to left on click of left arrow buttons and 
// Function to scroll image to right on click of right arrow buttons
		document.onkeydown = 
							function (evt)
							{
								var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
								var eventTarget = evt ? evt.target : event.srcElement;
								if (keyCode == 37 && (eventTarget.id != 'txtAddress') && (eventTarget.id != 'txtComment'))
									{
										scrollZoomImages('leftImage');
										
									}
								else if	(keyCode == 39 && (eventTarget.id != 'txtAddress') && (eventTarget.id != 'txtComment'))
									{
										scrollZoomImages('rightButton');
										
									}
							}


//Function to scroll back forth between the images
function scrollZoomImages(scrollID)
{
   //alert(scrollID)
   // alert(document.getElementById('hdnScroll').value)
   //alert(document.getElementById('zoomImage').src)
	
      
   var zoomImages = "",currentImage,nextImage;
    
    currentImage = document.getElementById('zoomImage').src;
    
    zoomImages = document.getElementById("hdnScroll").value
    zoomImages = zoomImages.replace(',Thumbs.db','')
    zoomImages = zoomImages.split(",")
    
    for(var i=0; i<zoomImages.length; i++)//For Every item after the split
    {
        //alert(zoomImages[i])
        if(zoomImages[i] != "Thumbs.db") //Check if the file name contains Thumbs.db, then do nothing
        {
            
            nextImage = currentImage.indexOf(zoomImages[i])
          //  alert(nextImage)
            if(nextImage != -1)
            {
                //alert("In Next Image")
                //alert(zoomImages[i])
                //alert(currentImage)
                if(scrollID == "rightButton")
                {
                    
                   // alert(currentImage)
                    
                   // alert(zoomImages[i+1])
                    //alert("In next image: " + currentImage);
                    if(zoomImages[i+1] == undefined) //Check if the file name contains Thumbs.db, then do nothing
                    {
                       // alert(zoomImages[i])
                        //alert(zoomImages[0])
                       //alert(currentImage)
					   
					   	///resha reset the bottom scrollbar with left spacing = 0 on click of right navigation button
					    document.getElementById("photoScroll").scrollLeft = 0;

                    	currentImage = currentImage.replace(zoomImages[i],zoomImages[0])
                        highLightImages(currentImage)
                        //alert(currentImage)
                        document.getElementById("divZoomImages").innerHTML = '<img id = "zoomImage" src="' + currentImage + '" width="564" height="349"/>'
                        break;
                    }
                    else
                    {
						//alert("In Else Loop")
						//alert(zoomImages[i])
						//alert(zoomImages[i+1])
						//alert("Current" + currentImage )
						
						//resha slide the bottom scrollbar image as per the selection of image on click of right navigation button
                            if (i > 0)
                            {	
                                if (((i+1)%4) == 0)
                                 {
                                  document.getElementById("photoScroll").scrollLeft = 140*(i+1);
                                 }
                    	    }
                    	    
                        currentImage = currentImage.replace(zoomImages[i],zoomImages[i+1])
                        //alert(currentImage)
                        highLightImages(currentImage)
                        document.getElementById("divZoomImages").innerHTML = '<img id = "zoomImage" src="' + currentImage + '" width="564" height="349"/>'
                        break;
                    }
                }
                else
                {
                    //currentImage = currentImage.replace(zoomImages[i],zoomImages[i-1])
                    //alert(currentImage)
                    //alert(zoomImages[i-1])
                    if(zoomImages[i-1] == undefined) //Check if the file name contains Thumbs.db, then do nothing
                    {
                        //alert(zoomImages[i])
                        //alert(zoomImages[0])
                       //alert(currentImage)
					   
					   ///resha reset the bottom scrollbar with maximum left spacing on click of left navigation button
					   document.getElementById("photoScroll").scrollLeft = (zoomImages.length-1)*140;
					  
                        currentImage = currentImage.replace(zoomImages[i],zoomImages[zoomImages.length-1])
                        highLightImages(currentImage)
                        //alert(currentImage)
                        document.getElementById("divZoomImages").innerHTML = '<img id = "zoomImage" src="' + currentImage + '" width="564" height="349"/>'
                        break;
                    }
                    else
                    {
						
						///resha slide the bottom scrollbar image as per the selection of image on click of left navigation button
						if(i > 0)
						    {
						          if(((i)%4) == 0)
						            {
						                document.getElementById("photoScroll").scrollLeft = (i-4)*140;
						            }  
						          /*if(((i+1)%4) == 0)
						            {
						                document.getElementById("photoScroll").scrollLeft = (i-4)*140;
						            }*/          
						    }
						
                        currentImage = currentImage.replace(zoomImages[i],zoomImages[i-1])
                        highLightImages(currentImage)
                        document.getElementById("divZoomImages").innerHTML = '<img id = "zoomImage" src="' + currentImage + '" width="564" height="349"/>'
                        break;
                    }
                }
            }
        }
    }
    
}

//When ever a mouse pointer is taken over a small image strip, we need to highlight the small image such that it seems to be selected
function mouseOver(tableId)
{

	var imgValue = tableId.replace('.jpg','');
	//alert(imgValue.substring(imgValue.lastIndexOf('/')+1));
	
	imgValue = imgValue.substring(imgValue.lastIndexOf('/')+1)
	//alert(imgValue)
	
	document.getElementById(imgValue).className = "imageRollOver";
	
	//alert(document.getElementById('divSmallImages').innerHTML);
	
/*	var test = document.getElementById("test").id
	//alert(test)
	
	document.getElementById("test").className = "imageRollOver";
*/
}

//When ever a mouse pointer is taken out a small image strip, we need to highlight the small image such that it seems to be selected
function mouseOverOut(tableId)
{

    var imgValue = "";
    //alert(document.getElementById('hdnSelectedValue').value)
    if(tableId != "")
    {
        imgValue = tableId.replace('.jpg','');
	    
    	
	    imgValue = imgValue.substring(imgValue.lastIndexOf('/')+1)
    	
    	
	    //var previousValue = document.getElementById("hdnSelectedValue").value
	}
	else
	{
	    imgValue = document.getElementById("hdnSelectedValue").value
	}
	
	
/*	var test = document.getElementById("test").id
	//alert(test)
	*/
	//alert(document.getElementById('hdnSelectedValue').value)
	if(document.getElementById("hdnSelectedValue").value != imgValue)
	{
	    document.getElementById(imgValue).className = "imageRollOverOut";
	}
	
}