jQuery(function($) {
	$("#carousel").show();
    
    var $console = $("#console");
    
    function log(str) {
        $('<p/>').html(str).appendTo($console);
    }
    
    ////////////////////////////////////////////////////////////////////////////
        
    var $carousel = $("#carousel");    
    var $hint = $("#hint");
    var $hintText = $("#hint-text");
    var HINT_SPACING = 35;
    var CAROUSEL_ROTATE_DELAY = 60000;
    
    // This initialises carousels on the container elements specified, in this case, carousel1.
    $carousel.CloudCarousel({			
        xPos: 480,
        yPos: 130,
        xRadius: 420,
        yRadius: 230,
        mouseWheel: true,
        bringToFront: false,
        autoRotate: 'right',
        autoRotateDelay: CAROUSEL_ROTATE_DELAY
    });
        
    $carousel.find('img').bind({
        mouseenter: function() {
            var $item = $(this);
            
            //var hintText = $item.attr('title').toString();
			var hintText = $item.attr('title');
            if (hintText.length == 0) {
                return ;
            }
            $hintText.html(hintText);
            var hintHeight = $hint.outerHeight();            
            var posX = $item.offset().left + $item.outerWidth() - HINT_SPACING;
            var posY = $item.offset().top - hintHeight + HINT_SPACING;
            
            $hint.show().offset({
                'left': posX,
                'top' : posY
            });
        },
        mouseleave: function() {
            $hint.hide();
        }
    });
    
});