$.fn.image = function(src, f){ 
  return this.each(function(){ 
     var i = new Image(); 
     i.src = src; 
     i.onload = f; 
     this.appendChild(i);
   }); 
}
/*$("#container").image("image.jpg",function(){
alert("image loaded");
});*/

$(document).ready(function() {
    $('#archive ~ li').hide();
    
    $('#archive.selected ~ li').slideDown('fast');
    $('#archive').click(function(){
        if(!$(this).hasClass('selected')){
            $('#archive ~ li:hidden').slideDown('fast');
            $(this).addClass('selected');
        }else{
            $(this).removeClass('selected');
            $('#archive ~ li:visible').slideUp('fast');
        }
        return false;
    });


    $('a[href^="http://"]').attr({
        target: "_blank"
    });
    
    
	var selector = "#homecalendar li.date"; //modify this line to set the selectors
	var speed = "normal"
	
	var bgcolor = "#fff";
							
	$(selector).each(function(){ 
		$(this).css("position","relative");
		var html = $(this).html();
		$(this).html("<span class=\"one\">"+ html +"</span>");
		$(this).append("<span class=\"two\">"+ html +"</span>");		
		if($.browser.msie){
			//$("span.one",$(this)).css("background",bgcolor);
			//$("span.two",$(this)).css("background",bgcolor);	
			$("span.one",$(this)).css("opacity",1);			
		};
		$("span.two",$(this)).css("opacity",0);		
		$("span.two",$(this)).css("position","absolute");		
		$("span.two",$(this)).css("top","0");
		$("span.two",$(this)).css("left","0");		
		$(this).hover(
			function(){
				//$("span.one",this).fadeTo(speed, 0);				
				$("span.two",this).fadeTo(speed, 1);
			},
			function(){
				//$("span.one",this).fadeTo(speed, 1);	
				$("span.two",this).fadeTo(speed, 0);
			}			
		)
        $(this).click(function() {
             window.location.href = $("dt a",this).attr('href')
        });
	});
    
    
    $('#mycarousel').jcarousel({
        vertical: true,
        scroll: 2
    });
    
    $("#jcarousel-detail").before("<div id='contentLoader'></div>");
	$('#mycarousel .jcarousel-item a.media_jpg').click(function(){
        $('#jcarousel-detail').addClass('loading');
		var toLoad = $(this).attr('href');
          var img = new Image();
          
          // 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();
            
              // with the holding div #loader, apply:
              $('#jcarousel-detail')
                // remove the loading class (so no background spinner), 
                .removeClass('loading')
                // then insert our image
                .html('')
                .append(this);
            
              // fade our image in to create a nice effect
              $(this).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', toLoad).attr('width', '550');
		return false;
	});
    $('#mycarousel .jcarousel-item a.media_jpg:first').click()
});