// JavaScript Document
jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
        vertical: true,
        scroll: 5
    });
	
	jQuery("#mycarousel img").click(function() {
	var name = jQuery(this).attr("longdesc");
	var img = new Image();
	$('#photobox').css({background:"none"}).html('loading <img src=\"images/ajax-loader.gif\" alt=\"\"/>');
  
  // wrap our new image in jQuery, then:
  $(img)
    // once the image has loaded, execute this code
    .load(function () {
      // set the image hidden by default    
      //$(this).hide();
	  $('#photobox').hide();
    
      // with the holding div #loader, apply:
      $('#photobox')
	  	.empty()
		.css({ 	background:"url("+name+") top left no-repeat",
			 	fontWeight:"bolder", 
				width:"100%", 
				height:"450px"
				});
        // then insert our image
        //.append(this);
    
      // fade our image in to create a nice effect
      //$(this).fadeIn();
	  $('#photobox').fadeIn();
    })
    
    // if there was an error loading the image, react accordingly
    .error(function () {
      // notify the user that the image could not be loaded
    })
    
    // *finally*, set the src attribute of the new image to our image
    .attr('src', name);

	});
	
});