/*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, 
    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
*/

"use strict";

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

	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"),
				description: images[x].getAttribute("description"),
				link: images[x].getAttribute("link")
			};
			
			this.data.images[x].image = new Image(200, 177);
			this.data.images[x].image.src = '/doc/uploads/' + this.data.images[x].filename;
		}

		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 images = this.data.images,
		slide1Title = this.html(images[0].title),
		slide2Title = this.html(images[1].title),
		slide1Text = this.html(images[0].description),
		slide2Text = this.html(images[1].description),
		slide1Src = images[0].image.src,
		slide2Src = images[1].image.src,
		slide1Link = images[0].link,
		slide2Link = images[1].link,
		scope = this;
/*
		this.data.root.innerHTML =
		'<div id="ROTATEIMAGES-text">' +
			'<div id="ROTATEIMAGES-text-1" style="z-index: 8"><h2 class="BlueSubHeader">' + slide1Title + '<\/h2>' + slide1Text + '<\/div>' +
			'<div id="ROTATEIMAGES-text-2" style="z-index: 7"><h2 class="BlueSubHeader">' + slide2Title + '<\/h2>' + slide2Text + '<\/div>' +
		'<\/div>' +
		'<div id="ROTATEIMAGES-images">' +
			'<img id="ROTATEIMAGES-img-1" style="z-index: 3" src="' + slide1Src + '" width="200" height="177" alt="" \/>' +
			'<img id="ROTATEIMAGES-img-2" style="z-index: 2" src="' + slide2Src + '" width="200" height="177" alt="" \/>' +
		'<\/div>' +
		'<div id="ROTATEIMAGES-buttons">' +
			'<img id="ROTATEIMAGES-prev" src="/Content/RotateImgsHomePg/HHprev.gif" onclick="ROTATEIMAGES.prev()" width="12" height="14" alt="" \/>' +
			'<img id="ROTATEIMAGES-playpause" src="/Content/RotateImgsHomePg/HHpause.gif" onclick="ROTATEIMAGES.playPause()" width="12" height="15" alt="" \/>' +
			'<img id="ROTATEIMAGES-next" src="/Content/RotateImgsHomePg/HHnext.gif" onclick="ROTATEIMAGES.next()" width="12" height="13" alt="" \/>' +
		'<\/div>';
*/

        this.data.root.innerHTML =
		'<div id="ROTATEIMAGES-text">' +
			'<div id="ROTATEIMAGES-text-1" style="z-index: 8"><h2 class="BlueSubHeader">' + slide1Title + '<\/h2><p>' + slide1Text + '</p><\/div>' +
			'<div id="ROTATEIMAGES-text-2" style="z-index: 7"><h2 class="BlueSubHeader">' + slide2Title + '<\/h2><p>' + slide2Text + '</p><\/div>' +
		'<\/div>' +
		'<div id="ROTATEIMAGES-images">' +
			'<img id="ROTATEIMAGES-img-1" style="z-index: 3" src="' + slide1Src + '" width="200" height="177" alt="" \/>' +
			'<img id="ROTATEIMAGES-img-2" style="z-index: 2" src="' + slide2Src + '" width="200" height="177" alt="" \/>' +
		'<\/div>' +
		'<div id="ROTATEIMAGES-buttons">' +
			'<img id="ROTATEIMAGES-prev" src="/Content/RotateImgsHomePg/HHprev.gif" onclick="ROTATEIMAGES.prev()" width="12" height="14" alt="" \/>' +
			'<img id="ROTATEIMAGES-playpause" src="/Content/RotateImgsHomePg/HHpause.gif" onclick="ROTATEIMAGES.playPause()" width="12" height="15" alt="" \/>' +
			'<img id="ROTATEIMAGES-next" src="/Content/RotateImgsHomePg/HHnext.gif" onclick="ROTATEIMAGES.next()" width="12" height="13" alt="" \/>' +
		'<\/div>';
		
		window.setTimeout(function () {
			var data = scope.data;
			data.img1 = $(data.img1);
			data.img2 = $(data.img2);
			data.text1 = $(data.text1);
			data.text2 = $(data.text2);
			data.playPause = $(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.fadeText.onComplete.subscribe(scope.visibleSlideOnTop, scope, true);
			data.current = 1;
			Event.addListener([data.img1, data.img2], 'click', scope.doClick_img, scope, true);
			data.status = 'paused';
			scope.play();
		}, 0);

	},


	doStart: function () {

		// Make sure the animated slide is on top.
		Dom.setStyle(this.data.text1, 'zIndex', '8');
		Dom.setStyle(this.data.text2, 'zIndex', '7');
		Dom.setStyle(this.data.img1,  'zIndex', '3');
		Dom.setStyle(this.data.img2,  'zIndex', '2');

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

	},



	visibleSlideOnTop: function () {

		if (this.data.current === 1) {
			Dom.setStyle(this.data.text1, 'zIndex', '7');
			Dom.setStyle(this.data.text2, 'zIndex', '8');
			Dom.setStyle(this.data.img1,  'zIndex', '2');
			Dom.setStyle(this.data.img2,  'zIndex', '3');
			this.data.current = 2;
		} else {
			Dom.setStyle(this.data.text1, 'zIndex', '8');
			Dom.setStyle(this.data.text2, 'zIndex', '7');
			Dom.setStyle(this.data.img1,  'zIndex', '3');
			Dom.setStyle(this.data.img2,  'zIndex', '2');
			this.data.current = 1;
		}

	},

	swapImages: function (direction) {
		var data = this.data,
		img, txt;

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

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

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

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

		// Swap images out.
		if (data.current === 1) {
			data.text2.innerHTML = '<h3>' + img.title + '<\/h3><p>' + img.description + '</p>';
			data.img2.src = img.image.src;
			data.fade.attributes.opacity.to = 0;
			data.fadeText.attributes.opacity.to = 0;
		} else {
			data.text1.innerHTML = '<h3>' + img.title + '<\/h3><p>' + img.description + '</p>';
			data.img1.src = img.image.src;
			data.fade.attributes.opacity.to = 1;
			data.fadeText.attributes.opacity.to = 1;
		}

	},

	pause: function () {
		if (this.data.status === 'paused') {
			return;
		}
		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';
		this.data.status = 'paused';
	},

	play: function () {
		if (this.data.status === 'playing') {
			return;
		}
		window.clearTimeout(this.data.timer);
		this.data.playPause.src = '/Content/RotateImgsHomePg/HHpause.gif';
		this.data.timer = null;
		this.data.fade.onComplete.unsubscribe(this.wait);
		this.data.fade.onComplete.subscribe(this.wait, this, true);
		this.data.fade.animate();
		this.data.status = 'playing';
	},

	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.status === 'playing') {
			this.pause();
		} else if (this.data.status === 'paused') {
			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();
	},

	doClick_img: function (e) {
		var img = this.data.images[this.data.idx],
		link    = img.link;

		if (link)
		{
			if (link.substring(0,7) === 'onclick')
			{			
				eval(link.substring(8));
			}
			else
			{
				if ( link.substring(0,5) === 'http:')
				{
					window.open(link);
				}
				else
				{
					window.location.href = link;
				}
			
			}
		} 
	}
	
};

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