    //Global variables used for the hi-res image viewer
    var imageIndex = 0;
    var totalHiResImages = -1;
    var hiResImageSRCArray = new Array();
    var pageLoaded = false;
    var product_tabs = '';     
        
    document.observe("dom:loaded", function() {	
        //Load the image viewer when the DOM is finished loading.
        new Ajax.Request('hires-image-viewer.asp',{
		        method: 'get',
		        parameters:{
		            sku: sku,
		            image: 0
		        },			    
		        onSuccess: function(transport){
		            setLightboxContent(transport.responseText);
		            
		            $$('#hires_thumbs > a').each(function(s, index){
			            s.stopObserving();			             
			            s.observe('click', function(event){
                            event.stop();
			            });
			        });
			        
			        if($('lightbox_close_button')){
			            $('lightbox_close_button').observe('click', function(event){
			                hideLightBox();
			            });
			        }
		        }
	        });
	        
	    /********
	    LOAD TABS
	    ********/    
	    product_tabs = new tabs('active_tab', 'tab_container', 'ul li');
		
        // If JS is enabled show the power review tab.
        $$('.review').each(function(s){
			s.setStyle({display : 'inline'});
		});
		
		product_tabs.showTab(window.location.hash.toString().replace('#','').parseQuery().tab); 
		
	    pageLoaded = true;
    });
    
    //Grab the hires image HTML via AJAX call, load it onto the lightbox content div, and display it.
    function displayHiResImageViewer(sku, index){
        /*
            I was having issues with the JavaScript displaying incorrectly when the dom was half loaded.
            This if block prevents this from breaking.
	*/	       
	
        if(!pageLoaded)
            return false;
            
        imageIndex = parseInt(index); 
        totalHiResImages = -1;
        keyIndex = index;
		
        new Ajax.Request('hires-image-viewer.asp',{
			    method: 'get',
			    parameters:{
			        sku: sku,
			        image: index
			    },
			    onSuccess: function(transport){
			    setLightboxContent(transport.responseText);       
			        //Add javascript functions to all anchor elements in the hires_thumbs div.
			        $$('.hires_thumb_link').each(function(s, index){
		                totalHiResImages = totalHiResImages + 1;			            
                          
			            s.stopObserving();
			            
			            fileName =  s.firstDescendant().src.split("/");
		                fileName = fileName[fileName.length - 1];
		                
		                newPath = $('hires_image_img').src.split("/");
		                newPath[newPath.length -1] = fileName;
		                newURI = '';
		                		                
		                newPath.each(function(s){
		                    newURI = newURI + s + '/';
		                });
		                newURI = newURI.substring(0, (newURI.length - 1));
                        
                        hiResImageSRCArray.push(newURI);                        
                        
			            s.observe('click', function(event){
			                s.blur();
			                $('hires_image_img').src = hiResImageSRCArray[index];			                
			                imageIndex = index;	
			                highlightCurrentImageThumbnail(imageIndex);
			                updateImageButtons();			                
                            event.stop();			                
			            });			          
			        });
			        
			        highlightCurrentImageThumbnail(imageIndex);
			        updateImageButtons();
			        //If the close button is clicked, hide the lightbox div.
			        if($('lightbox_close_button')){
			            $('lightbox_close_button').show();
			            $('lightbox_close_button').observe('click', function(event){
			                hideLightBox();
			            });
			        }
			    }			    			    
		    });	
		displayLightbox();

	document.observe('keyup', function(event){		
		if(event.keyCode == 27)
			hideLightBox();			
		/*if(event.keyCode == 37){
			highlightCurrentImageThumbnail(index);
			$('hires_image_img').src = hiResImageSRCArray[index];
			updateImageButtons();
		}
		
		if(event.keyCode == 39){
			highlightCurrentImageThumbnail(index + 1);
			$('hires_image_img').src = hiResImageSRCArray[index + 1];
			updateImageButtons();
		}*/
	});
        return false;
    }
    
    function updateImageButtons(){ 
        if($('hires_next_image_button')){            
            if(imageIndex < totalHiResImages){
                $('hires_next_image_button').show();
                $('hires_next_image_button').stopObserving();
                $('hires_next_image_button').observe('click', function(event){
                    $('hires_image_img').src = hiResImageSRCArray[imageIndex + 1];
                    imageIndex++;
                    highlightCurrentImageThumbnail(imageIndex);
                    updateImageButtons();                    
                    event.stop();
                });                
                
                if(imageIndex > totalHiResImages)
                    $('hires_next_image_button').hide();
                if(totalHiResImages > 0)
                    $('hires_prev_image_button').show();
            }
            else
                $('hires_next_image_button').hide();
        }

        if($('hires_prev_image_button')){            
            if(imageIndex > 0){                
                $('hires_prev_image_button').show();
                $('hires_prev_image_button').stopObserving();
                $('hires_prev_image_button').observe('click', function(event){
                    $('hires_image_img').src = hiResImageSRCArray[imageIndex - 1];
                    imageIndex--;
                    highlightCurrentImageThumbnail(imageIndex);
                    updateImageButtons();                    
                    event.stop();
                });
                
                if(imageIndex > totalHiResImages)
                    $('hires_next_image_button').hide();
                if(totalHiResImages > 0)
                    $('hires_prev_image_button').show();
            }
            else
                $('hires_prev_image_button').hide();
        }
    }
    
    function highlightCurrentImageThumbnail(imgIndex){
        $$('.hires_thumbs_image').each(function(s, index){
            if(index != imgIndex)
                s.setStyle({border: 'solid 1px black'});
            else
                s.setStyle({border: 'solid 2px #F1CA80'});
        });
        
        //Handle paging through the images.
        if(totalHiResImages > 4){
            lowEnd = imgIndex - 2;
            highEnd = imgIndex + 2;
            
            if(lowEnd < 0){
                lowEnd = 0;
                highEnd = highEnd + (lowEnd * -1);
            }
            
            if(highEnd > totalHiResImages){
                highEnd =  totalHiResImages;
                lowEnd = lowEnd - (highEnd - totalHiResImages);
            }
            
            if(lowEnd == 0)
                highEnd = 4;
            
            if(highEnd == totalHiResImages)
                lowEnd = (totalHiResImages - 4);
            
            $$('.hires_thumb_link').each(function(s, index){
                if(lowEnd <= index && index <= highEnd)
                    s.show();
                else
                    s.hide();
            });
        }
    }
