/*global YAHOO, window, Image, document, Dom, Event*/

var RotateImages = {
	data: {
		json: '',
		fade: null,
		fadeText: null,
		root: 'RotateImages-container',
		textDiv: document.createElement('div'),
		imageDiv: document.createElement('div'),
		lowerButtonDiv: 'lowerButtonDiv',
		lowerButtons: [],
		img1: document.createElement('img'),
		img2: document.createElement('img'),
		text1: document.createElement('div'),
		text2: document.createElement('div'),
		header1: document.createElement('h3'),
		header2: document.createElement('h3'),
		map: document.createElement('map'),
		playPause: document.createElement('area'),
		next: document.createElement('area'),
		prev: document.createElement('area'),
		link: document.createElement('area'),
		idx: 3,
		mapHidden: null,
		hidden: null,
		timer: null,
		delay: 9000,
		current: 1,
		direction: 'forward'
	},

	init: function () {
		this.data.root = Dom.get(this.data.root);
		this.data.lowerButtonDiv = Dom.get(this.data.lowerButtonDiv);
		this.processData();
	},

	load: function () {
		var loader = new YAHOO.util.YUILoader({
			require: ['connection', 'animation'],
			base: '/glibrary/yui_2.8.0r4/build/',

			loadOptional: false, //load all optional dependencies?

			//onSuccess is the function that YUI Loader
			//should call when all components are successfully loaded.
			onSuccess: function () {
				//Once the Rotate Images Control and dependencies are on
				//the page, we'll verify that our target container is
				//available in the DOM and then start working on it
				RotateImages.init();

			}

		});

		loader.insert();
	},

	processData: function () {
		var x, images = this.data.json.images,
		lowerButtons = this.data.json.lowerButtons;

		// Modify the CSS style to match the supplied
		// width and height of this banner
		this.data.root.style.width = this.data.json.width + 'px';
		this.data.root.style.height = this.data.json.height + 'px';

		// Create image element
		for (x = 0; x < images.length; x++) {
			this.data.json.images[x].image =
				new Image(this.data.json.width, this.data.json.height);

			this.data.json.images[x].image.src =
				'/doc/uploads/' + this.data.json.images[x].filename;

			if (lowerButtons) {
				var image = new Image(12, 12);
				image.src = '/Content/RotatingBanner/bannerBTN.gif';
				image.style.cursor = 'pointer';
				Event.addListener(image, 'click', this.lowerButtonClick, { 'index': x }, false);
				this.data.lowerButtons[x] = image;
				this.data.lowerButtonDiv.appendChild(this.data.lowerButtons[x]);
			}
		}

		this.build();
	},

	lowerButtonClick: function (e, o) {
		var index = o.index;
		if (index < 0) {
			index = index + 1;
		}
		if (index >= RotateImages.data.json.images.length) {
			index = index - 1;
		}
		RotateImages.data.idx = index - 1;
		RotateImages.swapLowerButtonImages(index - 1);
		RotateImages.play();
	},

	build: function () {
		var slide1Title = this.data.json.images[0].title,
			slide2Title = this.data.json.images[1].title,
			slide1Text = this.data.json.images[0].description,
			slide2Text = this.data.json.images[1].description,
			slide1Src = this.data.json.images[0].image.src,
			slide2Src = this.data.json.images[1].image.src,
			slide1Link = this.data.json.images[0].link,
			scope = this,
			re = /-/gi;

		// Replace all the dashes with commas
		// 12-12-12-12 --> 12,12,12,12
		this.data.json.linkCoords = this.data.json.linkCoords.replace(re, ',');
		this.data.json.nextCoords = this.data.json.nextCoords.replace(re, ',');
		this.data.json.prevCoords = this.data.json.prevCoords.replace(re, ',');

		// Create html elements that match this structure:
		//
		// <div class="RotateImages-text">
		//     <div style="z-index: 1">
		//         <h3>{slide1Title}</h3> {slide1Text}
		//     </div>
		//     <div style="z-index: 0">
		//         <h3>{slide2Title}</h3> {slide2Text}
		//     </div>
		//  </div>
		//
		// <div class="RotateImages-images">
		//     <img src="{slide1Src}"
		//         usemap="#map"
		//         style="z-index: 3"
		//         width="{this.data.width}"
		//         height="{this.data.height}"
		//         alt="" />
		//      <img src="{slide2Src}"
		//         usemap="#map"
		//         style="z-index: 2"
		//         width="{this.data.width}"
		//         height="{this.data.height}"
		//         alt="" />
		//     <map id="map" name="map">
		//         <area shape="rect"
		//             class="RotateImages-link"
		//             coords="{this.data.linkCoords}"
		//             href="{slide1Link}" />
		//         <area shape="rect"
		//             href="#null"
		//             class="RotateImages-prev"
		//             coords="{this.data.prevCoords}"
		//             onclick="RotateImages.prev();" />
		//         <area shape="rect"
		//             href="#null"
		//             class="RotateImages-next"
		//             coords="{this.data.nextCoords}"
		//             onclick="RotateImages.next();" />
		//      </map>
		// </div>

		// Outer text div
		this.data.textDiv.className = 'RotateImages-text';

		// Inner Text div 1
		this.data.text1.style.zIndex = '1';

		// Inner Text div 1 - Header 1
		this.data.header1.appendChild(document.createTextNode(slide1Title));
		this.data.text1.appendChild(this.data.header1);

		// Inner Text div 1 - Description 1
		this.data.text1.appendChild(document.createTextNode(slide1Text));

		// Inner Text div 2
		this.data.text2.style.zIndex = '0';

		// Inner Text div 2 - Header 2
		this.data.header2.appendChild(document.createTextNode(slide2Title));
		this.data.text2.appendChild(this.data.header2);

		// Inner Text div 2 - Description 2
		this.data.text2.appendChild(document.createTextNode(slide2Text));

		// Outer Images div
		this.data.imageDiv.className = 'RotateImages-images';

		// First image
		this.data.img1.setAttribute('useMap', '#map');
		this.data.img1.style.zIndex = '3';
		this.data.img1.src = slide1Src;
		this.data.img1.width = this.data.json.width;
		this.data.img1.height = this.data.json.height;
		this.data.img1.alt = slide1Title;

		// Create image map if there is one
		if (
			this.data.json.linkCoords.length > 0 ||
				this.data.json.nextCoords.length > 0 ||
				this.data.json.prevCoords.length > 0
		) {

			// Image Map
			this.data.map.id = 'map';
			this.data.map.name = 'map';

			if (this.data.json.linkCoords.length > 0) {

				// Link area
				this.data.link.className = 'RotateImages-link';
				this.data.link.setAttribute('shape', 'rect');
				this.data.link.setAttribute('href', slide1Link);

				this.data.link.setAttribute(
					'coords',
					this.data.json.linkCoords
				);


				// Add link area to image map
				this.data.map.appendChild(this.data.link);
			}

			if (this.data.json.prevCoords.length > 0) {
				// Previous area
				this.data.prev.className = 'RotateImages-prev';
				this.data.prev.setAttribute('shape', 'rect');
				this.data.prev.setAttribute('href', '#null');

				this.data.prev.setAttribute(
					'coords',
					this.data.json.prevCoords
				);

				// Add previous area to image map
				this.data.map.appendChild(this.data.prev);
			}

			if (this.data.json.nextCoords.length > 0) {
				// Next area
				this.data.next.className = 'RotateImages-next';
				this.data.next.setAttribute('shape', 'rect');
				this.data.next.setAttribute('href', '#null');
				this.data.next.setAttribute(
					'coords',
					this.data.json.nextCoords
				);

				// Add next area to image map
				this.data.map.appendChild(this.data.next);
			}

		}

		// Second image
		this.data.img2.setAttribute('useMap', '#map');
		this.data.img2.style.zIndex = 2;
		this.data.img2.src = slide2Src;
		this.data.img2.width = this.data.json.width;
		this.data.img2.height = this.data.json.height;
		this.data.img2.alt = slide2Title;

		// Add two text div to banner text div
		this.data.textDiv.appendChild(this.data.text1);
		this.data.textDiv.appendChild(this.data.text2);

		// Add two images divs to banner images div
		this.data.imageDiv.appendChild(this.data.img1);
		this.data.imageDiv.appendChild(this.data.map);
		this.data.imageDiv.appendChild(this.data.img2);

		this.data.root.appendChild(this.data.textDiv);
		this.data.root.appendChild(this.data.imageDiv);

		// Add listener to "link", "next", "prev" buttons on the image map
		Event.addListener(
			this.data.prev,
			'click',
			RotateImages.prev,
			this,
			true
		);

		Event.addListener(
			this.data.next,
			'click',
			RotateImages.next,
			this,
			true
		);

		this.data.imageDiv.style.width = this.data.json.width;
		this.data.imageDiv.style.height = this.data.json.height;

		window.setTimeout(function () {
			var data = scope.data;
			data.fade = new YAHOO.util.Anim(
				data.img1,
				{
					opacity: { to: 0 }
				},
				1
			);
			data.fadeText = new YAHOO.util.Anim(
				data.text1,
				{
					opacity: { to: 0 }
				},
				1
			);
			data.fade.onStart.subscribe(
				data.fadeText.animate,
				data.fadeText,
				true
			);
			data.fadeText.onStart.subscribe(scope.doStart, scope, true);
			data.hidden = data.img2;
			scope.play();
		}, 100);

	},

	doStart: function () {
		// Swap out the image / text contents.
		this.swapImages(this.data.direction);

	},

	swapImages: function (direction) {
		var img;

		if (direction !== 'backward') {
			direction = 'forward';
		}

		// Increment to the next image in our list.
		if (direction === 'forward') {
			this.data.idx++;
		} else {
			this.data.idx--;
		}

		if (this.data.idx >= this.data.json.images.length) {
			this.data.idx = 0;
		}
		if (this.data.idx < 0) {
			this.data.idx = this.data.json.images.length - 1;
		}

		// Locate the next image that we need.
		img = this.data.json.images[this.data.idx];

		// Swap images out.
		if (this.data.hidden === this.data.img1) {
			this.data.hidden = this.data.img2;
			this.data.fade.attributes.opacity.to = 0;
			this.data.fadeText.attributes.opacity.to = 0;
		} else {
			this.data.hidden = this.data.img1;
			this.data.fade.attributes.opacity.to = 1;
			this.data.fadeText.attributes.opacity.to = 1;
		}

		this.data.hidden.src = img.image.src;
		this.data.link.href = img.link;
		this.swapLowerButtonImages(this.data.idx);

	},

	swapLowerButtonImages: function (index) {
		for (var i = 0; i < RotateImages.data.lowerButtons.length; i++) {
			if (i === index) {
				RotateImages.data.lowerButtons[i].src = '/Content/RotatingBanner/bannerBTN_active.gif';
			}
			else {
				RotateImages.data.lowerButtons[i].src = '/Content/RotatingBanner/bannerBTN.gif';
			}
		}
	},

	play: function () {
		window.clearTimeout(this.data.timer);
		this.data.timer = null;
		this.data.fade.onComplete.unsubscribe(this.wait);
		this.data.fade.onComplete.subscribe(this.wait, this, true);
		this.data.fade.animate();
	},

	wait: function () {
		var scope = this;
		this.data.timer = window.setTimeout(function () {
			scope.data.fade.animate();
		}, this.data.delay);
	},

	playPause: function () {

		// if timer is still going (i.e. we were in Play mode)
		// and we just hit the Pause button, then...
		if (this.data.timer) {
			// stop the timer
			window.clearTimeout(this.data.timer);
			//unsubscribe call to wait function
			this.data.fade.onComplete.unsubscribe(this.wait);
			//set the timer to null
			this.data.timer = null;
			this.data.playPause.src = '/Content/RotatingBanner/HHplay.gif';
			return;
		}

		this.data.playPause.src = '/Content/RotatingBanner/HHpause.gif';
		this.data.direction = 'forward';
		this.play();
	},

	prev: function () {
		this.data.fade.onComplete.unsubscribe(this.wait);
		if (this.data.fade.isAnimated()) {
			this.data.fade.stop(true);
			this.data.fadeText.stop(true);
		}
		window.clearTimeout(this.data.timer);
		this.data.timer = null;
		this.data.direction = 'backward';
		this.data.fade.animate();
	},

	next: function () {
		this.data.fade.onComplete.unsubscribe(this.wait);
		if (this.data.fade.isAnimated()) {
			this.data.fade.stop(true);
			this.data.fadeText.stop(true);
		}
		window.clearTimeout(this.data.timer);
		this.data.timer = null;
		this.data.direction = 'forward';
		this.data.fade.animate();
	}
};

RotateImages.load();