// -----------------------------------------------------------------------------------
//
// ImageFader v1
// by Travis Beck - http://www.wholewheatcreative.com
// Last Modification: 1/3/09 | Gary Evans
// Requires MooTools v1.2 - http://mootools.net/
//
// =========USAGE=========
// 
// =========PUBLIC FUNCTIONS=========
//
// =========CALLBACKS=========
// -----------------------------------------------------------------------------------

var ImageFader = new Class({
   Implements: [Options, Events],
   options: {
		fadeIndexObj: "headerIndex",
		fadeImageClass: "fadeImage",
		containerElement: "home-feature",
		xmlToLoad: "/xml/headrotate.xml",
		scrubber: 'scrubber',
		pauseOnHover: false,
		hideKeyIndex: true,
		savePosition: true,
		preloadObj: 'faderLoader',
		duration: 1000, /* the duration in milliseconds of the transition */
		interval: 7000 /* the duration in milliseconds between transitions */
   },
   initialize: function(options){
      this.setOptions(options);
      this.options.containerElement = $(this.options.containerElement);
      this.options.fadeIndexObj = $(this.options.fadeIndexObj);
      this.options.scrubber = $(this.options.scrubber);
      this.options.preloadObj = $(this.options.preloadObj);
      if(!(this.options.containerElement)){return false;}//do nothing
      this.loadXML();
   },
   
   parseXML: function(xml){//Added for IE compatibility - Gary
      var doc;
      if (Browser.Engine.trident ){
         doc = new ActiveXObject('Microsoft.XMLDOM');
         doc.async = false;
         doc.loadXML(xml);
      } else {
         doc = new DOMParser().parseFromString(xml, 'text/xml');
      }
         return doc;
	},
   
   handleXML: function(rtext, rxml){//Changed for IE compatibility - Gary
   	var _tdoc = this.parseXML(rtext);
   	this.preloadImages.delay(500,this,_tdoc);//delay for IE
	},
	   
   preloadImages: function(_tdoc){
	 
   	var imgArry = [];
   	var pct;
		//Changed for IE compatibility - Gary
		
	   /*ORIGINAL
	   _links.each(function(link){
			imgArry.push(link.getElement('a').getElement('img').get('src'));
		});
	   
	   */
		var _links = _tdoc.getElementsByTagName("image");

		for(i=0; i<_links.length; i++){
			imgArry.push(_links[i].childNodes[0].nodeValue); 
			//console.info(_links[i].childNodes[0].nodeValue);
		}
		loadAssets.delay(2000);//delay for IE once again. L2 make a browser
		var that = this;
		function loadAssets(){
   		new Asset.images(imgArry, {
   		   onProgress: function(counter,index) {  
   				pct = ((counter + 1) * (100 / imgArry.length));
   				//console.info(pct);
   		   },  
   		   onComplete: function() {
   				that.injectElements(_tdoc);
   		   }  
   		});
	   }
   },
	
	injectElements: function(_tdoc){
		var _links = _tdoc.getElementsByTagName("image");
		var _img = "";
		var _href = "";
		var _title = "";
		var _width = "";
		var _height = "";
		var _className = this.options.fadeImageClass;
		var _className2 = "";
		var that = this;
		var j = 0;
		//Changed for IE compatibility - Gary
			for(i=0; i<_links.length; i++){
				_img = _links[i].childNodes[0].nodeValue;
				_title = _tdoc.getElementsByTagName("title")[i].childNodes[0].nodeValue;
				_href = _tdoc.getElementsByTagName("href")[i].childNodes[0].nodeValue;
				_width = _tdoc.getElementsByTagName("width")[i].childNodes[0].nodeValue;
				_height = _tdoc.getElementsByTagName("height")[i].childNodes[0].nodeValue;
				//build and append the dom elements
				var _style = "background: url("+ _img + "); width: "+ _width +"px; height:"+ _height + "px; overflow: hidden; text-indent: -9000px;";
				var anchor = new Element('a', {
					'href': _href,
					'class': _className,
					'title': _title,
					'style': _style,
					'html': _title
				});
				that.options.containerElement.adopt(anchor);
				_className2 = "key keyIndex" + i;
				var indexAnchor = new Element('a', {
					'href':'#',
					'class': 'key',
					'id':'keyIndex'+i,
					'html':_title
				});
				indexAnchor.inject(that.options.fadeIndexObj);
				j++;
			
		}
		
 	 /*ORIGINAL	
   		_links.each(function(link){			
			_href = link.getElement('a').get('href');
			_title = link.getElement('a').get('title');
			_img = link.getElement('a').get('img').get('src');
			_width = link.getElement('a').get('img').get('width');
			_height = link.getElement('a').get('img').get('height');
			//build and append the dom elements
			var _style = "background: url("+ _img + "); width: "+ _width +"px; height:"+ _height + "px; overflow: hidden; text-indent: -9000px;"
			var anchor = new Element('a', {
				'href': _href,
				'class': _className,
				'title': _title,
				'style': _style,
				'html': _title
			});
			that.options.containerElement.adopt(anchor);
			_className2 = "key keyIndex" + i;
			var indexAnchor = new Element('a', {
				'href':'#',
				'class': 'key',
				'id':'keyIndex'+i,
				'html':_title
			});
			indexAnchor.inject(that.options.fadeIndexObj);
			i++;
   	});*/
   	this.options.pctWidth = 100/j;
   	this.options.totalElements = j;
   	this.config();
   },
   
   config: function(){
      var o = this.options;
      o.itemIndex = 0;
      o.elements = $$('a.'+o.fadeImageClass);
      o.elements.each(function(obj, index){
         $(obj).setStyle("z-index", o.elements.length - index);
      });
      var that = this;
      o.intervalID = this.doFade.periodical(this.options.interval, this);
      //add click event to keyIndexes
      $$('.key').each(function(obj, index){
      	obj.keyIndex = index;
         obj.addEvent("click", that.navigateTo.bindWithEvent(that));
         obj.setStyle('width', o.pctWidth+'%');
      });
      //fade out the scrubber
      //o.fadeIndexObj.setStyle('opacity', 1);
      $('keyIndex0').addClass('activeKey');
      o.containerElement.addEvent("mouseover", this.mouseOver.bindWithEvent(this));
      o.containerElement.addEvent("mouseout", this.mouseOut.bindWithEvent(this));
		this.setupScrubber();
		if(o.hideKeyIndex){
			o.fadeIndexObj.setStyle('bottom', -63);
			o.fadeIndexObj.set('tween', {duration: 'short'});
		}
		if(o.savePosition){
			this.getCookie();
		}
		//fade the preload Obj out
		if(this.options.preloadObj){
			this.options.preloadObj.set('tween', {
				duration: '300',
				onComplete: function(obj){
					obj.destroy();
				}
			});
			this.options.preloadObj.tween('opacity', 0);
		}
   },
   
   getCookie: function(){
   	this.options.savedIndex = Cookie.read('faderIndex') || this.setInitialCookie();
   	this.options.savedIndex = parseFloat(this.options.savedIndex);
		if(this.options.savedIndex > 0){
			this.doNavigate(this.options.savedIndex);
		}
	},
	
	setInitialCookie: function(){
		Cookie.write('faderIndex', '0', {duration: 30}); 
		return '0'; 
	},
	
	setCookie: function(){
		Cookie.write('faderIndex', this.options.itemIndex, {duration: 30});
	},
   
   setupScrubber: function(){
   	//clone and swap the buffer so that it is at the bottom
   	o = this.options;
   	if(!(o.scrubber)){return false;};
      var buffer = o.scrubber.getParent().clone(true, true);
      o.scrubber.getParent().destroy();
      buffer.inject(o.fadeIndexObj);
      o.scrubber = $('scrubber');
      this.startScrubbing();
   },
   
   startScrubbing:function(){
		var o = this.options;
		var _dur = ((o.totalElements - o.itemIndex) * o.interval);
		if(!(o.scrubber)){return false;}
   	o.scrubber.set('tween', {
   		duration: _dur,
   		unit:'%',
   		link: 'cancel',
   		transition: 'linear'
		});
		var startPct = o.itemIndex * o.pctWidth;
		o.scrubber.tween('left', [startPct ,99]);
   },
   
   doFade: function(skipAnimation){
      var o = this.options;
      itemIndex = this.iterate();
      var that = this;
      var obj = $(o.elements[itemIndex.cur]);
      obj.setStyle('z-index', o.elements.length + 1);
      $(o.elements[itemIndex.nex]).setStyle('z-index', o.elements.length);
      if(!skipAnimation){
      	obj.set('tween', {
         	onComplete: that.cleanup.bind(that).pass({'el':obj, 'index':itemIndex.nex}),
         	duration: that.options.duration
   		});
   		obj.tween('opacity', 0);
      }else{
         this.cleanup(obj, itemIndex.nex);
      }
      if(o.savePosition){
      	this.setCookie();
      }
   },
   
   iterate: function(){
      var o = this.options;
      var returnObj = {};
      returnObj.cur = o.itemIndex;
      o.itemIndex++;
      if(o.itemIndex >= o.elements.length){
         o.itemIndex = 0;
         //reset scrubbing
         this.startScrubbing();
      }
      returnObj.nex = o.itemIndex;
      return returnObj;
   },
   
   cleanup: function(obj){
   	obj.el.setStyle('z-index', 1);
      obj.el.fade('show');
      $$('.key').each(function(obj){
         $(obj).removeClass('activeKey');
      });
      $('keyIndex'+obj.index).addClass("activeKey");
   },

   mouseOver: function(){
		if(this.options.pauseOnHover){
   		$clear(this.options.intervalID);
		}
		if(this.options.hideKeyIndex){
			this.options.fadeIndexObj.tween('bottom', 0);
		}
   },
   
   mouseOut: function(){
		if(this.options.pauseOnHover){
			this.options.intervalID = this.doFade.periodical(this.options.interval, this);
		}
		if(this.options.hideKeyIndex){
			this.options.fadeIndexObj.tween('bottom', -63);
		}
   },
   
   navigateTo: function(evt){
   	var event = new Event(evt);
   	event.stop();
      var o = this.options;
      var _class = event.target.getProperty("id");
      var _tIndex = _class.indexOf('keyIndex') + 8;
      var _index = _class.substring(_tIndex, _tIndex + 1);
      o.itemIndex = parseFloat(_index);
      this.doNavigate();
   },
   
   doNavigate:function(index){
   	var o = this.options;
      var _index = index || o.itemIndex;
      o.itemIndex = _index;
   	$$(o.elements).each(function(obj){
         obj.setStyle('z-index', 1);
      });
      $(o.elements[_index]).setStyle('z-index', o.elements.length + 1);
      
      $$('.key').each(function(obj){
         obj.removeClass('activeKey');
      });
      $('keyIndex'+_index).addClass("activeKey");
      //clear periodical
      $clear(o.intervalID);
      o.intervalID = this.doFade.periodical(o.interval, this);
      this.startScrubbing();
      this.setCookie();
   },
   
	loadXML: function(){
		var myRequest = new Request({url: this.options.xmlToLoad, method: 'get', onComplete: this.handleXML.bindWithEvent(this) }).send();
	}
});