jQuery.extend({
    BgImageTransitions: []
});

var turns = 0;
var nextImg = "";
var prevImg = "";

jQuery.fn.extend({
    BgImageTransition: function(imgs, links, options) {
        if( !imgs ){ return jQuery; }
		
		$this = $(this);
		var helperElement = null;		// variable for clone
		var imgIndex = 0;
		
		//default plugin settings
        var settings = jQuery.extend({
            effect: {opacity: 'toggle'},
            duration: 3000,
            easing: 'linear',
			interval: 6000,
            callback: function(){
				//alert(nextImg);
				//console.log('nextImg: ' + nextImg);
				//console.log('link: ' + link);
				
				// increment index for imgs and links
				if (imgIndex == imgs.length - 1) {
					imgIndex = 0;
				} else {
					imgIndex++;
				}
				
				//console.log('img: '+imgs[imgIndex]);
				//console.log('link: '+links[imgIndex]);
				if (helperElement.is(':visible')) {
					//console.log('.... helper visible ....');
					$this.css('background-image', 'url('+settings.imgPrefix + imgs[imgIndex] +')');
					$this.find('a.slideLink').attr('href', links[imgIndex]);
				} else {
					helperElement.css('background-image', 'url('+settings.imgPrefix + imgs[imgIndex] +')');
					helperElement.find('a.slideLink').attr('href', links[imgIndex]);
				}
				
				
				
				
				setTimeout(function() {
					helperElement.fadeToggle( settings.duration, settings.callback );
				},settings.interval);
				
			},
            helperElementId: this.attr('id')+'2',
            zindex: parseInt(this.css('zIndex'),10)+1,
			imgPrefix: 'images/'
        }, options);
		
		
		cloneElement(this);
		swapSlides();
		
		//make sure there is a zIndex set - we will the helperElement to be *above* the original one
        if( !this.css('zIndex') ){
            this.css('zIndex',1);
        }

		// !!!!! tempImage.src = src;		
		
        return jQuery;
		
		
		//copy css from the element to the helper element function
        function copyCSS( from, to ){
            jQuery(['border-bottom-color', 'border-bottom-style', 'border-bottom-width', 'border-left-lolor',
            'border-left-style', 'border-left-width', 'border-right-color', 'border-right-style',
            'border-right-width', 'border-spacing', 'border-top-color', 'border-top-style',
            'border-top-width', 'height', 'left', 'margin-bottom', 'margin-left',
            'margin-right', 'margin-top', 'marker-offset', 'max-height', 'max-width', 'min-height',
            'min-width', 'opacity', 'outline-color', 'outline-offset', 'outline-width',
            'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'right',
            'width', 'z-index', 'class']).each( function(i,v){
                jQuery(to).css( v, jQuery(from).css( v ) );				
            });
        }
        
		function cloneElement(el) {
			//check the bgImageTransition array and see whether there is already a helperElement for the original one. Generate one, if not
			
			if( !jQuery.BgImageTransitions[el.attr('id')] ){
				helperElement = el.clone();
				copyCSS( el, helperElement );
				helperElement.css('display', 'none');
				helperElement.css('zIndex', settings.zindex);
				helperElement.attr('id', settings.helperElementId );
				//helperElement.insertAfter(el);
				el.after(helperElement);
				jQuery.BgImageTransitions[el.attr('id')] = helperElement;
			} else {
				helperElement = jQuery.BgImageTransitions[el.attr('id')];
			}
		}
		
		function swapSlides() {
			//load the image file into cache first, so that we get a nice and fast load. Make the transition when the image has been loaded in cache
			var tempImage = new Image();
			console.log('imgIndex: '+imgIndex);
			tempImage.src = settings.imgPrefix + imgs[imgIndex];
			
			jQuery(tempImage).load( function(){
			
				var newImage = ( ( helperElement.is(':visible') ) ? jQuery(el) : jQuery(helperElement) );
				newImage.css('backgroundImage', 'url('+tempImage.src+')');
				newImage.css({
					"top" : $this.offset().top,
					"position" : "absolute",
					"left" : $this.offset().left,
					"background-repeat" : "no-repeat"
				});
				
				$(window).resize(function() {
					newImage.css({
						"top" : $this.offset().top,
						"position" : "absolute",
						"left" : $this.offset().left,
						"background-repeat" : "no-repeat"
					});
				});
				/*
				if (helperElement.is(':visible')) {
					//helperElement.animate( {}, settings.duration, settings.easing, settings.callback );
					helperElement.fadeToggle( settings.duration, settings.easing, settings.callback );
				} else {
					helperElement.animate( settings.effect, settings.duration, settings.easing, settings.callback );
				}
				*/
				
				// setInterval( function(){
					// $("#slideCell2").fadeToggle( settings.duration, settings.callback );
				
				// }, settings.interval);
				// helperElement.animate( settings.effect, settings.duration, settings.easing, settings.callback );		
				helperElement.find('a.slideLink').attr('href', links[imgIndex]);
				helperElement.fadeToggle( settings.duration, settings.callback );
				
				
				
			});
		
		}        

        
    }
});