/*extern $, Event, Image, YAHOO, console, document, window */
/*global ROTATEIMAGES */
/*members Anim, Connect, animate, asyncRequest, attributes, build, 
    clearTimeout, console, data, description, fade, fadeText, failure, 
    filename, getAttribute, getElementById, getElementsByTagName, hidden, 
    html, idx, image, images, img1, img2, importXML, init, innerHTML, 
    isAnimated, length, log, next, onComplete, onDOMReady, onStart, opacity, 
    play, playPause, prev, processXML, replace, responseXML, root, scope, 
    setTimeout, src, stop, subscribe, success, swapImages, text1, text2, 
    timer, title, to, toString, unsubscribe, util, wait, xml
*/



var ROTATEIMAGES = {
	data: {
		images:    [],
		xml:       '/xml/Generated/DOCG00094.xml',
		fade:      null,
		fadeText:  null,
		root:      'ROTATEIMAGES-container',
		img1:      'ROTATEIMAGES-img-1',
		img2:      'ROTATEIMAGES-img-2',
		text1:     'ROTATEIMAGES-text-1',
		text2:     'ROTATEIMAGES-text-2',
		area:	   'ROTATEIMAGES-area',
		playPause: 'ROTATEIMAGES-playpause',
		idx:       2,
		mapHidden: null,
		hidden:    null,
		timer:     null,
		delay:     9000,
		current:   1,
		direction: 'forward'
	},

	init: function () {
		this.importXML();
	},

	importXML: function () {

		YAHOO.util.Connect.asyncRequest('GET', this.data.xml, {
			scope:   this,
			failure: function () {
				if (window.console) {
					console.log('Unable to load xml file.');
				}
				return false;
			},
			success: function (o) {
				this.processXML(o.responseXML);
			}
		});

		this.data.root = $(this.data.root);
	},

	processXML: function (xml) {
		var x, images = xml.getElementsByTagName('Image');

		// Read the XML into an array
		this.data.images = [];
		for (x = 0; x < images.length; x++) {
			this.data.images[x] = {
				title: images[x].getAttribute("Title"),
				filename: images[x].getAttribute("Filename"),
				link: images[x].getAttribute("Link"),
				description: images[x].getAttribute("Description"),
				alt: images[x].getAttribute("ImgAlt")
			};
			this.data.images[x].image = new Image(306, 159);
			this.data.images[x].image.src = '/doc/uploads/' + this.data.images[x].filename;
			this.data.images[x].image.link = this.data.images[x].link;
			this.data.images[x].image.alt = this.data.images[x].alt;
		}

		this.build();
	},

	/** Prepare a string for introduction into the DOM through innerHTML */
	html: function (s) {
		if (s === null || s === undefined) {
			return '';
		}
		return s.toString().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
	},

	build: function () {
		var slide1Title = this.html(this.data.images[0].title),
		slide2Title = this.html(this.data.images[1].title),
		slide1Text = this.data.images[0].description,
		slide2Text = this.data.images[1].description,
		slide1Src = this.data.images[0].image.src,
		slide2Src = this.data.images[1].image.src,
		slide1Link = this.data.images[0].image.link,
		slide2Link = this.data.images[1].image.link,
		slide1Alt = this.data.images[0].image.alt,
		slide2Alt = this.data.images[1].image.alt,
		scope = this;

		this.data.root.innerHTML =
		'<div id="ROTATEIMAGES-text">' +
			'<div id="ROTATEIMAGES-text-1" style="z-index: 1"><h3>' + slide1Title + '<\/h3>' + slide1Text + '<\/div>' +
			'<div id="ROTATEIMAGES-text-2" style="z-index: 0"><h3>' + slide2Title + '<\/h3>' + slide2Text + '<\/div>' +
		'<\/div>' +
		'<div id="ROTATEIMAGES-images">' +
			'<img id="ROTATEIMAGES-img-1" usemap="#map" style="z-index: 3" src="' + slide1Src + '" width="306" height="159" alt="' + slide1Alt + '" \/>' +
			'<map id="map" name="map">' +
			'<area shape="rect" id="ROTATEIMAGES-area" coords="152,140,199,158" href="' + slide1Link + '">' +
			'<area shape="rect" coords="208,140,220,158" href="#null" onclick="ROTATEIMAGES.prev()">' +
			'<area shape="rect" coords="223,140,236,158" href="#null" onclick="ROTATEIMAGES.next()">' +
			'</map>' +
			'<img id="ROTATEIMAGES-img-2" usemap="#map" style="z-index: 2" src="' + slide2Src + '" width="306" height="159" alt="' + slide2Alt + '" \/>' +
		'<\/div>';

		window.setTimeout(function () {
			var data = scope.data;
			data.img1 = document.getElementById(data.img1);
			data.img2 = document.getElementById(data.img2);
			data.area = document.getElementById(data.area);
			data.playPause = document.getElementById(data.playPause);
			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();
		}, 0);

	},


	doStart: function () {

		// Swap out the image / text contents.
		this.swapImages(this.data.direction);

	},


	swapImages: function (direction) {

		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.images.length) {
			this.data.idx = 0;
		}
		if (this.data.idx < 0) {
			this.data.idx = this.data.images.length - 1;
		}

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

		// 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.hidden.alt = img.image.alt;
		this.data.area.href = img.image.link;

	},

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

		this.data.playPause.src = '/Content/RotateImgsHomePg/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();
	}
};

Event.onDOMReady(ROTATEIMAGES.init, ROTATEIMAGES, true);