/*global ROTATEIMAGES: true, YAHOO, window, console, $, Image, document, Event*/
/*members Anim, Connect, animate, area, asyncRequest, attributes, build, 
    clearTimeout, console, current, data, delay, description, direction, doStart, fade, fadeText, failure, 
    filename, getAttribute, getElementById, getElementsByTagName, hidden, href,
    html, idx, image, images, img1, img2, importXML, init, innerHTML, 
    isAnimated, length, link, log, mapHidden, 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,
*/

ROTATEIMAGES = {
	data: {
		images:    [],
		xml:       '/xml/Generated/home-DOCG00243.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")
			};
			this.data.images[x].image = new Image(508, 240);
			this.data.images[x].image.src = '/doc/uploads/' + this.data.images[x].filename;
			this.data.images[x].image.link = this.data.images[x].link;

			// The banner immediately increments to the next idx, so make the starting idx the last item on the list.
			this.data.idx = x;
		}

		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 () {
		//Note that slide1 and slide2 variabels have duplicate values.
		//This is in anticipation of their being only 1 image for the slide.
		//If there is, we simply create a duplicate of the image's data and
		//let the banner cycle through two copies of the same image as
		//per normal.  Kind of dirty, but it's the easiest way to fit it
		//into the present framework.
		//While this is the edge case, it is more suscinct to code this way.
		var slide1Title = this.html(this.data.images[0].title),
			slide2Title = this.html(this.data.images[0].title),
			slide1Text = (this.data.images[0].description === null) ? "" : this.data.images[0].description,
			slide2Text = (this.data.images[0].description === null) ? "" : this.data.images[0].description,
			slide1Src = this.data.images[0].image.src,
			slide2Src = this.data.images[0].image.src,
			slide1Link = this.data.images[0].image.link,
			slide2Link = this.data.images[0].image.link,
			scope = this;
		// This is the typical behavior, 
		// there being more than one image we cycle through.
		if (this.data.images.length > 1) {
			slide2Title = this.html(this.data.images[1].title);
			slide2Text = (this.data.images[1].description === null) ? "" : this.data.images[1].description;
			slide2Src = this.data.images[1].image.src;
			slide2Link = this.data.images[1].image.link;
		}

		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="508" height="240" alt="" \/>' +
				'<map id="map" name="map">' +
				'<area shape="rect" coords="435,208,465,239" href="#null" style="z-index: 100" onclick="ROTATEIMAGES.prev()">' +
				'<area shape="rect" coords="470,208,501,239" href="#null" style="z-index: 100" onclick="ROTATEIMAGES.next()">' +
				'<area shape="rect" id="ROTATEIMAGES-area" coords="0,0,508,240" style="z-index: 4" href="' + slide1Link + '">' +
				'</map>' +
				'<img id="ROTATEIMAGES-img-2" usemap="#map" style="z-index: 2" src="' + slide2Src + '" width="508" height="240" alt="" \/>' +
			'<\/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) {
		var img = null;

		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.
		img = this.data.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.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/RotateImgs/HHplay.gif';
			return;
		}

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