$(document).ready(function() {
/*
when page loads, hide all imgs that are childen of entry class divs except the first one and assign next and previous links to show the next in the list and cycle through them.

so we need to find the index of the visible image within the total number of images within the div
we get the total number of images

*/

    //hide all images on page
    $('div > .catentry img').attr("style", "display: none");
    
            
    // we loop thru for ever instance of class entry
    for(i = 0; i < $('.catentry').length; i++)
    {
        //show first image
        var starter = 0;
        var len = $(".catentry").eq(i).contents().find("img").length;
        if(len > 1)
        {

        starter = Math.floor(Math.random() * len);
        //alert(starter);
        }
        $(".catentry").eq(i).contents().find("img").eq(starter).attr("style", "display: inline");
        
        //assign function to image_next class
        

        $(".catentry").eq(i).contents().find('a.image_next').click(function() {
        



    
            //find all imgs within entry class
            var len = $(this).parents(".catentry").contents().find("img").length;

            var shownimage = -1;
            for(i = 0 ; i < len ; i++)
            {   
                // amazingly safari doesn't include the semi colon but FF does.  I probably could unify this but we cast a wide net ;(
                if($(this).parents(".catentry").contents().find("img").eq(i).attr("style") == "display: inline" || $(this).parents(".catentry").contents().find("img").eq(i).attr("style") == "display: inline;" || $(this).parents(".catentry").contents().find("img").eq(i).css("display") == "inline"  || $(this).parents(".catentry").contents().find("img").eq(i).css("display") == "inline;")
                {   
                    // this is how we identify which image is showing.  i know. really bad
                    shownimage = i;
                }
    
            }

            // turn that image off
            $(this).parents(".catentry").contents().find("img").eq(shownimage).attr("style", "display:none");

            // inc our var
            shownimage++;
            if(shownimage >= len)
            {
                shownimage = 0;
            }
            
            // show the next one
            $(this).parents(".catentry").contents().find("img").eq(shownimage).attr("style", "display:inline");


        
        
        return false;
        });
         
         
        
        //assign function to image prev class 
        $(".catentry").eq(i).contents().find('a.image_prev').click(function() {

        var len = $(this).parents(".catentry").contents().find("img").length;
        var shownimage = -1;
        for(i =0 ; i < len ; i++)
        {
                if($(this).parents(".catentry").contents().find("img").eq(i).attr("style") == "display: inline" || $(this).parents(".catentry").contents().find("img").eq(i).attr("style") == "display: inline;" || $(this).parents(".catentry").contents().find("img").eq(i).css("display") == "inline"  || $(this).parents(".catentry").contents().find("img").eq(i).css("display") == "inline;")
            {   
                // this is how we identify which image is showing.  i know.
                shownimage = i;
            }

        }

        // turn that image off
        $(this).parents(".catentry").contents().find("img").eq(shownimage).attr("style", "display:none");
        
        // inc our var
        shownimage--;
        if(shownimage < 0)
        {
            shownimage = (len - 1);
        }
        
        // show the next one
        $(this).parents(".catentry").contents().find("img").eq(shownimage).attr("style", "display:inline");
        

         return false;
         });
        
        
    }
   

    


});