$(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 > .entry img').attr("style", "display: none");
    
            
    // we loop thru for ever instance of class entry
    for(i = 0; i < $('.entry').length; i++)
    {
        //show first image
        $(".entry").eq(i).contents().find("img").eq(0).attr("style", "display: inline");
        
        //assign function to image_next class
        $(".entry").eq(i).contents().find('a.image_next').click(function() {
        



    
            //find all imgs within entry class
            var numofimgs = $(this).parents(".entry").contents().find("img").length;
            var shownimage = -1;

            for(i = 0 ; i < numofimgs ; 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(".entry").contents().find("img").eq(i).attr("style") == "display: inline" || $(this).parents(".entry").contents().find("img").eq(i).attr("style") == "display: inline;" || $(this).parents(".entry").contents().find("img").eq(i).css("display") == "inline"  || $(this).parents(".entry").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(".entry").contents().find("img").eq(bla).attr("style", "display: none");
            $(this).parents(".entry").contents().find("img").eq(shownimage).attr("style", "display:none");

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


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

        //find all imgs within entry class
        var numofimgs = $(this).parents(".entry").contents().find("img").length;
        var shownimage = -1;
        
        for(i =0 ; i < numofimgs ; i++)
        {
                if($(this).parents(".entry").contents().find("img").eq(i).attr("style") == "display: inline" || $(this).parents(".entry").contents().find("img").eq(i).attr("style") == "display: inline;" || $(this).parents(".entry").contents().find("img").eq(i).css("display") == "inline"  || $(this).parents(".entry").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(".entry").contents().find("img").eq(shownimage).attr("style", "display:none");
        
        // inc our var
        shownimage--;
        if(shownimage < 0)
        {
            shownimage = (numofimgs - 1);
        }
        
        // show the next one
        $(this).parents(".entry").contents().find("img").eq(shownimage).attr("style", "display:inline");
        

         return false;
         });
        
        
    }
   

    


});