
(function($){
	$.fn.V3ImageRotator = function(options){
		//////////////////////////////////////////////////////
		///////SET UP DEFAULT SETTINGS FOR PLUGIN////////////
		//////////////////////////////////////////////////////
		options = $.extend(        //DEFAULT SETTINGS FOR THE PLUGIN
		{
			xml: "/js/v3/assets/xml/v3rotator.content.xml",
			thumbnailClass: "thumbCont",
			mainImageClass: "mainImageCont",
			descriptClass: "descriptionText",
			highlightClass: "highlighter",
			pause: 2,
			duration: 0.5,
			autoplay: true,
			startingIndex: 1,
			animation: "crossfade",
			action: "init",
			randomOrder: false,
			leftOffset:10
		}, options)
		
		////////////////////////////////////////////
		///////SET UP ANIMATION METHODS ////////////
		////////////////////////////////////////////
		var animations = {
			crossfade: function(){
			
				//setTimeout("animations[options.animation]()",options.pause/1000);
				return this.each(function(){
					var $this = $(this), data = $this.data("data"), startingIndex = (data.index) % data.num, nextIndex, clicked = false;
					//////figure ending index
					clearTimeout(data.timeout);
					if (data.clickIndex > -1) {
						
						nextIndex = data.clickIndex;
						data.clickIndex = null;
						clicked = true;
						data.autoplay = false;
					}
					else 
						if (data.randomOrder) {
							//random next image
							nextIndex = Math.floor(Math.random() * data.num);
						} else 
							nextIndex = (data.index + 1) % data.num;
					
					var nowItem = $($this.children("." + data.mainImageClass).children("li")[startingIndex]);
					var thenItem = $($this.children("." + data.mainImageClass).children("li")[nextIndex]);
					
					var nowText = $($this.children("." + data.descriptClass).children("li")[startingIndex]);
					var thenText = $($this.children("." + data.descriptClass).children("li")[nextIndex]);
					
					var highlight = $this.children("div." + data.highlightClass);
					
					var nowThumb = $($this.children("." + data.thumbnailClass).children("li")[startingIndex]);
					var nextThumb = $($this.children("." + data.thumbnailClass).children("li")[nextIndex]);
					
					var parWidth = nowText.parent().outerWidth(), prevPos = nowText.position();
					//move stuff around
					nowThumb.fadeTo(data.duration * 1000, .5);
					nextThumb.fadeTo(data.duration * 1000, 1);
					nowText.animate({
						left:  nowText.offset().left + parWidth
					}, data.duration * 1000, function(){
						nowText.hide();
					});
					
					thenText.parent().children().not(nowText).css("left", 0 - parWidth);
					thenText.show().animate({
						left: data.leftOffset
					}, data.duration * 1000);
					
					highlight.animate({
						top: nextThumb.position().top + nextThumb.offsetParent().position().top,
						left: nextThumb.position().left + nextThumb.offsetParent().position().left
					}, data.duration * 1000);
					
					
					if (startingIndex < nextIndex) {
						thenItem.parent().children().hide();
						thenItem.show();
						nowItem.show().fadeOut(data.duration * 1000, function(){
							nowItem.hide();
							data.index = nextIndex;
							if (data.autoplay && !clicked) 
								data.timeout = setTimeout(function(){
									$this.V3ImageRotator({
										action: "animate"
									});
								}, data.pause * 1000);
							data.isLocked = false;
							$this.data("data", data);
						   
						});
					}
					else {
					
						thenItem.fadeIn(data.duration * 1000, function(){
							thenItem.parent().children().hide();
							thenItem.show();
							data.index = nextIndex;
							data.isLocked = false;
							$this.data("data", data);
							
							if (data.autoplay && !clicked) 
								 data.timeout = setTimeout(function(){
									$this.V3ImageRotator({
										action: "animate"
									});
								}, data.pause * 1000);
								data.isLocked = false;
								 $this.data("data", data);
						});
					}
					
					
					
				});
			}
		};
		
		var methods = {
		
			init: function(){
				return this.each(function(){
					////////////////////////////////////////////
					///////BIND ARBITRARY DATA FOR ANIMATION USE
					////////////////////////////////////////////
					var $this = $(this), data = {};
					data.numLoaded = 0;
					$this.data("data", data)
					////////////////////////////////////////////
					///////CREATE VIEW HTML/////////////////////
					////////////////////////////////////////////
					//set each matching item up for the content
					$this.addClass("V3ImageRotaterContainer");
					$this.html("<ul class='" + options.mainImageClass + "'></ul><ul class='" + options.descriptClass + "'></ul><ul class='" + options.thumbnailClass + "'></ul> <div class='" + options.highlightClass + "' ></div>")
					//store data so we can recall it as we need for animation porposes
					$.get(options.xml, function(d){
						//preloading images
						var cache = [];
						var childs = $(d.documentElement).children();
						for (var i = 0; i < childs.length; i++) {
							var child = $(childs[i]);
							var image = child.children("img#full");
							var thumb = child.children("img#thumb");
							var description = child.children("description");
							var url = child.attr("href");
							cache.push($("<img src='" + thumb.attr("src") + "' alt='" + thumb.attr("alt") + "' width='1' height='1' style='width:1, height:1'>").prependTo("body").load(function(){
								var dat = $this.data("data");
								dat.numLoaded++;
								dat.num = childs.length;
								if (dat.numLoaded == dat.num) {
									$.get(options.xml, function(data){
										var childs = $(data.documentElement).children();
										//preloading images
										for (var i = 0; i < childs.length; i++) {
											var child = $(childs[i]);
											var image = child.children("img#full");
											var thumb = child.children("img#thumb");
											var description = child.children("description");
											var url = child.attr("href");
											
											
											
											//populate the top images
											var newImageElement = $("<li style='display:none; z-index: " + (childs.length - i) + ";'><img src='" + image.attr("src") + "' alt='" + image.attr("alt") + "' /></li>");
											$this.children("." + options.mainImageClass).append(newImageElement);
											
											//populate the thumbnails
											var newThumbElement = $("<li style=' z-index: " + (i) + ";'><img src='" + thumb.attr("src") + "' alt='" + thumb.attr("alt") + "' class='thumb' /></li>").css("opacity", 0.5);
											newThumbElement.click(function(){
												var dat = $this.data("data");
												if (!dat.isLocked && $(this).index() != data.index) {
													//alert($(this).css("z-index"));
								
													dat.clickIndex = $(this).index();
													clearTimeout(dat.timeout);
													$this.removeData();
													$this.data("data", dat);
													$this.V3ImageRotator({
														action: "animate"
													});
												}
											});
											$this.children("." + options.thumbnailClass).append(newThumbElement);
											
											//populate descriptions
											newDescElement = $("<li  style='display:none'>" + description.text() + "</li>")
											$this.children("." + options.descriptClass).append(newDescElement);
											
											//hide things that aren't up first
											if (i == options.startingIndex - 1) {
												newImageElement.show();
												newDescElement.show();
											}
										}
										var firstThumb = $($this.children("." + options.thumbnailClass).children("li")[options.startingIndex - 1]);
										firstThumb.css("opacity", 1);
										
										var highlighter = $this.children("." + options.highlightClass);
										var borderDim = parseInt(highlighter.css("border-left-width"));
										highlighter.width(firstThumb.width() - borderDim * 2).height(firstThumb.height() - borderDim * 3).css({
											top: firstThumb.position().top + firstThumb.offsetParent().position().top,
											left: firstThumb.position().left + firstThumb.offsetParent().position().left
										});
										data = {};
										data.num = childs.length;
										data.pause = options.pause;
										data.index = options.startingIndex - 1;
										data.borderDim = borderDim
										data.isLocked = false;
										data.clickIndex = -1;
										$.extend(data, options);
										$this.data("data", data);
										
										////////////////////////////////////////////
										/////// AUTOSTART ANIMATION ////////////////
										////////////////////////////////////////////
										if (options.autoplay) {
											options.action = "animate";
											data.timeout = setTimeout(function(){
												$this.V3ImageRotator({
													action: "animate"
												});
											}, options.pause * 1000);
										}
										
									});

									for (i = 0; i < cache.length; i++) 
										cache[i].remove();
								}
								$this.detach("data", dat);
							}));
						}
					});
					
					
				});
			//end init
			},
			animate: function(){
				return this.each(function(){
					$this = $(this);
					var data = $this.data("data");
					data.isLocked = true;
					animationType = $this.data("data").animation;
					if ($.isFunction(animations[animationType])) {
						$.proxy(animations[animationType], $this)();
					}
				});
			}
		//end methods	
		};
		
		////this actually starts off all the code
		var data = this.data();
		if (options.action == "init") 
			return $.proxy(methods.init, this)();
		else 
			return $.proxy(methods[options.action], this)();
		
	}
	
})(jQuery)
