var controlWidth = 0;
var lastImage = 0;
    
$(document).ready( function() {
        $("#controls").removeClass("hidden");
        
        var frame_1 = $("#frame_1");
//        frame_1.cycle( { fx: "fade" } );

        
        var frame_2 = $("#frame_2");
        frame_2.cycle( { fx: "fade",
                         pager: "#slides",
                         prev: "#prevButton",
                         next: "#nextButton" } );

        lastImage = frame_2.children("img").size() - 1;
        if (lastImage < 0) lastImage = 0;

        $("#stopButton").click( function() {
            frame_2.cycle("pause");
            iconSelected(this);
            $('#slides').addClass('stopped');
        });
        $("#playButton").click( function() {
            frame_2.cycle("resume",true);
            iconSelected(this);
            $('#slides').removeClass('stopped');
        });
        $("#prevButton,#nextButton").click( function() {
            frame_2.cycle("pause");
            iconSelected(this);   
        });
        $("#startButton").click( function() {
            frame_2.cycle("pause");
            frame_2.cycle(0);
            iconSelected(this);
        });
        $("#endButton").click( function() {
            frame_2.cycle("pause");
            frame_2.cycle(lastImage);
            iconSelected(this);
        });
        
        var frame_3 = $("#frame_3");
//        frame_3.cycle( { fx: "fade" } );
        
        $('#slides').not('.stopped').find('a').click(function(){
          $('#frame_2').cycle('pause');
          $('#slides').addClass('stopped');
          return false;
        });
        
        
        frame_1.removeClass("hidden");
        frame_2.removeClass("hidden");
        frame_3.removeClass("hidden");
        
});
        

function iconSelected(img)
{
   $('#controls > img').each( function() {
       this.src = this.src.replace( /_blue/, '' );
   });
   img.src = img.src.replace( /.png$/,'_blue.png' );
}