(function($){  

    $.fn.slideImage = function(vars) {       
        
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var transition 	= (vars.transition != undefined) ? vars.transition : 1000;
        var bkgImgs 	= new Array();
        
        $("img", "#sliderImageContent").each(function(i){
        	bkgImgs[i] = [$(this).attr('src'), $(this).attr('width'), $(this).attr('height')];
        });
        
        var i = 0;
        var l = bkgImgs.length-1;
        var imgs = function(i){
         return {
          background: 'url(' + bkgImgs[i][0] + ') no-repeat center center',
          width:      bkgImgs[i][1],
          height:     bkgImgs[i][2],
          left:       $('#slider').width()/2 - bkgImgs[i][1]/2,
          top:        $('#slider').height()/2 - bkgImgs[i][2]/2
         }
        }
        
        var first = function() {
        	$('.display2').css(imgs(0)).show();
        }
        
        var next = function() {
         var oldpic = imgs(i);
         i++;
         if (i > l) i = 0;
         var newpic = imgs(i);
         $('.display2').css(oldpic).show();
         $('.display1').hide().css(newpic).fadeIn(transition);
         $('.display2').fadeOut(transition);
         setTimeout( function(){ next() }, timeOut );
        }
        if (bkgImgs.length > 0) first();
        if (bkgImgs.length > 1) setTimeout( function(){ next() }, timeOut );

    };  

})(jQuery);
