$(document).ready(function(){    
var thumbsPageMaxPages; // unknown until set by init()
var thumbsRange; // number per page set by examinging thumnails li and looking for one with id of 'newpage'
var thumbsTotal; // total number, set by examinging thumbails li length
var thumbsPage = 0; // current thumbs page starting at zero
var thumbsAreClickable = true; // alternative is hover behavior (deprecated now)
var thumbsExist; // true if there are thumbails li (eg, on an entry page)
var thumbsTreatment = "undefined"; // dependin on UL class, either clicktoshow or hover

// Shortcut functions identifying  items    
function thumbsUL() { return $("#thumnails ul");}
function thumbs() { return $( "#thumnails li")   ; }   
function goLeft () {return $("#goleft")    ;}
function goRight () {return $("#goright");}
function contents() { return $("#txt > div");}

// Indicate if there are more pages to view    
function isGoRight( thumbsPage,  thumbsPageMaxPages) {
    return (thumbsPage != (thumbsPageMaxPages-1) ) ;
}
    
// Indicate if there are previous pages to view    
function isGoLeft( thumbsPage, thumbsPageMaxPages) {
    return (thumbsPage !== 0);
}
    
// Show and hide appropriate thumbs and arrows for this page
function thumbsReset( thumbsPage, thumbsRange) { 
    thumbs().hide();
    thumbs().slice(thumbsPage*thumbsRange, (thumbsPage+1)* thumbsRange ).fadeIn();
    if (isGoRight(thumbsPage, thumbsPageMaxPages)) {goRight().show();} else { goRight().hide();}// show and hide arrows
    if (isGoLeft(thumbsPage, thumbsPageMaxPages)) {goLeft().show();} else { goLeft().hide();}
}
    
// Initialize the thumbnail information
function thumbsInit() { 
    thumbsTotal = thumbs().length;        
    thumbsExist = (thumbsTotal > 0 );
    
    var newpageindex = thumbs().index( $('#newpage')[0] ); // use id newpage to indicate number thumbs on a page
    if (newpageindex>0) { thumbsRange = newpageindex;} // adjust thumbsRange if newpage included
	else { thumbsRange = thumbsTotal; } // newpage not set in html, so give it a value  ... havent worked out best way to evenly spread products, as the thumbnails are all different widths ... hmm
    if (thumbsExist) {
        thumbsPageMaxPages = ( Math.ceil(thumbsTotal/thumbsRange));    // find out how many pages 
        thumbsReset(0, thumbsRange); // hide and show first set of thumbnails and arrows            
    } 
}
    
// return the behavior of a specific thumb li
function getBehavior(el) {
    return(  $(el).hasClass("showimg") ? "showimg" : 
            ($(el).hasClass("showhtml")? "showhtml" : 
                                        "clickthrough"));
}
    
// initially shows only one div, either the background, or the first div on the page
// this way, if you put some content into the contents part of the page then that will be shown
// otherwise the first thumbnail item will be shown
function contentsInit() { 
    contents().hide(); // hide all divs
    contents().eq(0).show(); // show the first div if there is one
    // if there isn't one, then click the first thumbnail to show the first product
    if (contents().size() === 0 && thumbsTreatment=="clicktoshow") { thumbs().eq(0).trigger('click');}
    if (contents().size() === 0 && thumbsTreatment=="clicktoshowiframe") { thumbs().eq(0).trigger('click'); }
}   
    
// -------- BEGIN FUNCTION CONTENTS LOAD ... INITIALIZES THE FIRST PAGE  loads divs in to contents, based on the a links in the thumbnails
function contentsLoad() { 
contents().addClass("txtBackground"); // if there is a div, make it the background

// initialize thumbsTreatment variable
if (thumbsUL().hasClass("clicktoshow")) { thumbsTreatment = "clicktoshow";}     // set behavior for thumbs
else if (thumbsUL().hasClass("hovertoshow")) { thumbsTreatment = "hovertoshow";} 
else if (thumbsUL().hasClass("clicktoshowiframe")) { thumbsTreatment = "clicktoshowiframe"; } // clicktoshow with iframe
else if (thumbsUL().hasClass("clicktoshowtemplate")) { thumbsTreatment = "clicktoshowtemplate";} // clicktoshow with micro template
else {thumbsTreatment = "clicktoshow";} // default is clickt to show, but no iframe

if (thumbsTreatment=="clicktoshow") { // preload the images and contents
    thumbs().each( function(){     //iterate through each thumbnail
            var loadfromhere  = $(this).children("a:first").attr("href"); // get the href of the enclosed a link
            var behavior = getBehavior(this);
            if (behavior == "showimg") {
                $("<img>").attr('src', loadfromhere); // preload the image
            }
            if (behavior == "showhtml") {
                $("<div>").load(loadfromhere); // preload the content
            }
    });
}
} 
// ---------------------------------------end function CONTENTSLOAD


 
                                        
thumbsInit();      //  sets thumbs total, number per page

if (thumbsTotal > 0) {   
	contentsLoad();   // sets 'thumbstreatment' and preloads images or html (but not iframes)                               
	contentsInit();  // either shows the main content, or triggers the first thumbnail
} 



// DETERMINE WHAT TO DO WHEN ITEMS ARE CLICKED OR HOVERED ON    
    // if left arrow clicked
    goLeft().click( 
        function(){ 
            if  (thumbsPage>0) { 
                thumbsReset(--thumbsPage, thumbsRange); 
					 
            } ; return false;
        });
    // if right arrow clicked
    goRight().click( 
        function(){ 
            if  (thumbsPage<thumbsPageMaxPages-1) {
                thumbsReset(++thumbsPage, thumbsRange);
            } ; return false;
        });
	 
    // when a thumbnail is hovered over 
    
	
    if (thumbsTreatment=="clicktoshow") { 
    
            $("#thumnails li").click( function() { 
                var loadfromhere  = $(this).children("a:first").attr("href");
                var behavior = getBehavior(this);
                var divstring = '<img src="'+loadfromhere+'">'; // assume showimg behavior
                var iframe = '<iframe frameborder="0" id="spiframe" scrolling="no" src="'+loadfromhere+'"></iframe>'; // assume showimg behavior        
                        if (behavior == "showimg") {
                            $("#txt").html(divstring); // add the image div
                            return false;
                        }
                        if ( behavior == "showhtml") {
                            $("#txt").load(loadfromhere); //load the div from the link specified by the a in thumb
                            return false;
                        }
                                            
            });
    
    }
	
    if (thumbsTreatment=="clicktoshowiframe") { 
    
            $("#thumnails li").click( function() { 
                var loadfromhere  = $(this).children("a:first").attr("href");
                var behavior = getBehavior(this);
                var divstring = '<img src="'+loadfromhere+'">'; // assume showimg behavior
                var iframe = '<iframe frameborder="0" id="spiframe" scrolling="no" src="'+loadfromhere+'"></iframe>'; // assume showimg behavior    
                
                        if (behavior == "showimg") {
                            $("#txt").html(divstring); // add the image div
                            return false;
                        }
                        if ( behavior == "showhtml") { 
                            $("#txt").html(iframe); // add the iframe
                            return false;
                        }
                                            
            });
    
    }   
});// END OF DOCUMENT READY FUNCTION ---