ONEHAT.widget.imageCycler = {
	init: function() {
		var oThis = this;
		
		this.cacher = Ext.get('cacher'); // for preloading images only
		this.pic1 = Ext.get('pic1');
		this.pic2 = Ext.get('pic2');
		
		
		/* NOTES TO KEITH
		Don't forget to put commas after the closing brackets on all objects except for the last one.
		Don't forget to put commas after the url attribute
		If you don't want the banner to be a link, put 'false' (without quotes) 
		...instead of the actual url (which DOES need single quotes)
		*/
		this.images = [
			
										
			
			
			{
				url: 'http://wbnh.org/store.php',
				image: 'images/home/banners/saragroves.jpg'
			},
			{
				url: 'http://wbnh.org/store.php',
				image: 'images/home/banners/saragroves.jpg'
			},
			{
				url: 'http://wbnh.org/audio/',
				image: 'images/home/banners/audiofeeds2.jpg'
			},
			{
				url: 'http://wbnh.org/audio/',
				image: 'images/home/banners/audiofeeds2.jpg'
			}
			
						
			
						
			
		];
		
		this.cachedImages = [];
		
		// set initial states
		this.pic1.setVisibilityMode(Ext.Element.VISIBILITY);
		this.pic2.setVisibilityMode(Ext.Element.VISIBILITY);
		this.pic1.setOpacity(0);
		this.pic2.setOpacity(0);
		this.currentImage = -1;
		this.initialized = false;
		this.paused = false;
		this.cachedImages[0] = this.cacher.src = this.images[0].image; // preload first image into cache
		
		// Assign event handlers
		this.pic1.on('click', function(e) {
			oThis.handleClick(e);
		});
		this.pic2.on('click', function(e) {
			oThis.handleClick(e);
		});
		
		setTimeout(function() { // delay this so cacher has enough time to load the first pic
			oThis.next();
		}, 1000);
	},
	
	next: function() {
		var oThis = this;

		if (!this.paused || !this.initialized) {
			var anim, pic, fadeIn;
			
			this.currentImage = (this.currentImage == this.images.length -1) ? 0 : this.currentImage +1; // shift the currentImage value

			if (!this.initialized) { // first time through, fade in pic1
				
				this.initialized = true;
				this.pic1.dom.src = this.images[this.currentImage].image;
				setTimeout(function() { // delay this so cacher has enough time to load the next pic
					oThis.pic1.animate(
						{
							opacity: {
								from: 0,
								to: 1
							}
						},
						2,
						function() {} // callback
					);
				}, 250);
		//		setTimeout(function() {
		//			oThis.cacher.removeClass('hide');
		//		}, 5000);
	
			} else { // all other times, fade in/out anim2
				
				if (this.pic2.getStyle('opacity') == 1) {
					this.pic1.dom.src = this.images[this.currentImage].image;
					setTimeout(function() { // delay this so cacher has enough time to load the next pic
						oThis.pic2.animate( // hide
							{
								opacity: {
									from: 1,
									to: 0
								}
							},
							2,
							function() { } // callback
						);
					}, 250);
				} else {
					this.pic2.dom.src = this.images[this.currentImage].image;
					setTimeout(function() { // delay this so cacher has enough time to load the next pic
						oThis.pic2.animate( // show
							{
								opacity: {
									from: 0,
									to: 1
								}
							},
							2,
							function() { } // callback
						);
					}, 250);
				}
				
			}
	
	
			// prefetch next image
			if (!this.cachedImages[this.currentImage +1] && // not in cache
				this.currentImage < this.images.length -1) { // not out of range
					this.cachedImages[this.currentImage +1] = this.cacher.dom.src = this.images[this.currentImage +1].image;
			}

		}
				
		setTimeout(function() {
			oThis.next();
		}, 5500);
	},
	
	// called externally
	pause: function() {
		this.paused = !this.paused;
	},
	
	handleClick: function(e) {
		var el, url, n, reg;
		e.stopEvent();
		
		opacity = this.pic2.getStyle('opacity');
		
		// If we're mid-transition, don't let the link go anywhere
		if (opacity > 0 && opacity < 1) {
			return;
		}
		
		if (opacity < 1) {
			el = this.pic1;
		} else {
			el = this.pic2;
		}
//debugger;	
		// loop through the images array and see which one we're dealing with
		for (n = 0; n < this.images.length; n++) {
			reg = new RegExp(this.images[n].image);
			if (el.dom.src.match(reg)) {
				url = this.images[n].url
				break;
			}
		}
		
		if (url) { window.location = url; }
	}
};

ONEHAT.widget.imageCycler.init();