var HomeSlideshow = Class.create({
	/* // slide data example:
	{
		tileTitle: "Christopher Cross" - required
		tileContent: "blah blah blah" - optional
		tileLgImage: "img/homeSlideshow/homeSlideshowTest1_large.jpg" - required
		tileThumbnail: "img/homeSlideshow/homeSlideshowTest1_small.jpg" - required
		tileDateRange: "October 20 - October 29" - required
		tileLearnMoreLink: "www.google.com" - required
	}
	*/
  
	FORCE_DIR_LEFT: 1,
	FORCE_DIR_RIGHT: 2,
	DEFAULT_VID_WIDTH: 551,
	DEFAULT_VID_HEIGHT: 358,
  
	// element references
	slidesContainer: null,
	controlsContainer: null,
	controlLeft: null,
	controlRight: null,
	controlsContainer: null,
	controls: [],
	currSlide: null,
  
	currIndex: 0,
	isTransitioning: false,
  
	slideDataArray: null,
	autoplayExecuter: null,
  
	initialize: function(slideDataJSON) {
			
		this.slideDataArray = slideDataJSON;
		
		this.slidesContainer   = $("homeSlideshowSlidesContainer");
		this.controlsContainer = $("homeSlideshowControls");
		
		var hiddenDiv = new Element("div", {style: 'display: none;'});
		
		var i = 0;
		this.slideDataArray.each(function(dataObject) {
			dataObject.customId = "slide" + i;
			
			if (i > 0) {
				this.controlsContainer.insert(this.controlForCustomId(dataObject.customId));
			}
			
			var imgThumb = new Element("img", {src: dataObject.tileThumbnail});
			var imgLarge = new Element("img", {src: dataObject.tileLgImage});
			hiddenDiv.insert({bottom: imgThumb});
			hiddenDiv.insert({bottom: imgLarge});
			
			i++;
		}.bind(this));
		
		this.currSlide = this.slideForCustomId('slide0');
		this.autoplayExecuter = new PeriodicalExecuter(this.doAutoplayExecuter.bind(this), 5);
		this.slidesContainer.update(this.currSlide);
		
		HomeSlideshow.currSlideshow = this;
	},
	
	doAutoplayExecuter: function() {
		var nextUp;
		
		if (this.currIndex + 1 == 4) {
			nextUp = 0;
		} else {
			nextUp = this.currIndex + 1;
		}
		
		this.doAutoUpdate($('slide' + nextUp));
		
		this.currIndex = nextUp;
	},
	
	stopAutoplay: function() {
		if (this.autoplayExecuter) {
			this.autoplayExecuter.stop();
			this.autoplayExecuter = null;
		}
	},
	
	doAutoUpdate: function(element) {
		if (!this.isTransitioning) {
			this.isTransitioning = true;
			
			var currSlideId = $('homeSlideshowSlidesContainer').down().identify();
			
			this.fadeOut(currSlideId, element);
		}
	},
	
	doControlClick: function(event, element) {
		this.stopAutoplay();
		
		if (!this.isTransitioning) {
			this.isTransitioning = true;
			
			var currSlideId = this.currSlide.identify();
			
			this.fadeOut(currSlideId, element);
		}
	},
	
	fadeOut: function(currSlideId, element) {
		var elementId = element.identify();
		new Effect.Parallel([
			new Effect.Opacity(currSlideId, {sync: true, from: 1, to: 0}), 
			new Effect.Opacity(elementId, {sync: true, from: 1, to: 0}) 
		], { 
			duration: 0.4,
			delay: 0.1, 
			afterFinish: this.toggleSlideAndControl.bind(this, currSlideId, element)
		});
	},
	
	toggleSlideAndControl: function(currSlideId, element) {
		var elementId = element.identify();
		var newControl = this.controlForCustomId(currSlideId).setOpacity(0);
		var newCurrSlide = this.slideForCustomId(elementId).setOpacity(0);
		
		this.currSlide.remove();
		this.currSlide = newCurrSlide;
		this.slidesContainer.insert(this.currSlide);
		
		element.insert({after: newControl});
		element.remove();
		
		this.fadeIn(currSlideId, element);
	},
	
	fadeIn: function(currSlideId, element) {
		var elementId = element.identify();
		new Effect.Parallel([
			new Effect.Opacity(currSlideId, {sync: true, from: 0, to: 1}), 
			new Effect.Opacity(elementId, {sync: true, from: 0, to: 1}) 
		], { 
			duration: 0.4,
			delay: 0.1
		});
		
		this.isTransitioning = false;
	},
	
	slideDataForCustomId: function(customId) {
		return this.slideDataArray.detect(function(object) {
			return object.customId == customId;
		});
	},
	
	controlForCustomId: function(customId) {
		var slideData = this.slideDataForCustomId(customId);
		
		var img = new Element("img", {src: slideData.tileThumbnail});
			
		var details = this.layersForSlideData(slideData);
	  	
		var thisControl = new Element("div", {id: slideData.customId}).addClassName("homeSlideshowControl");
		thisControl.insert({bottom: img});
		thisControl.insert({bottom: details});
		thisControl.on("click", ".homeSlideshowControl", this.doControlClick.bind(this));
		
		return thisControl;
	},
	
	slideForCustomId: function(customId) {
		
		var slideData = this.slideDataForCustomId(customId);
		
		var element = new Element("div", {id: slideData.customId}).addClassName("homeSlideshowItem").setStyle({
			backgroundImage: "url('" + slideData.tileLgImage + "')"
		});
		
		var promoContent = new Element("div").addClassName("promoTitleAndContent");
		
		var promoTitle = new Element("h1");
		promoTitle.update(slideData.tileTitle);
		promoContent.insert({bottom: promoTitle});
		
		var promoDate = new Element("p").addClassName("promoDate");
		promoDate.update(slideData.tileDateRange);
		promoContent.insert({bottom: promoDate});
		
		if (slideData.tileContent) {
			var promoDescription = new Element("div").addClassName("promoDescription");
			promoDescription.update(slideData.tileContent);
			promoContent.insert({bottom: promoDescription});
		};
		
		if (slideData.tileLearnMoreLink) {
			var promoButton = new Element("button");
			promoButton.setAttribute("type", "button");
			promoButton.setAttribute("onclick", "window.location='" + slideData.tileLearnMoreLink + "'");
			promoButton.update("Learn More");
			promoContent.insert({bottom: promoButton});
		};
		
		if (slideData.tileYouTubeID) {
			var promoVideo = new Element("button");
			promoVideo.setAttribute("type", "button");
			promoVideo.setAttribute("onclick", "HomeSlideshow.showVideoInDialog('" + escape(slideData.tileYouTubeID) + "', '" + escape(slideData.tileTitle) + "'); return false;");
			promoVideo.update("Watch Video");
			promoContent.insert({bottom: promoVideo});
		};
		
		element.insert({bottom: promoContent});
		
		return element;
	},
	
	layersForSlideData: function(slideData) {
		
		var element = new Element("div").addClassName("homeSlideshowControlDetails");
		
		var promoContent = new Element("div").addClassName("promoTitleAndContent");
		
		var promoTitle = new Element("h1");
		promoTitle.update(slideData.tileTitle);
		promoContent.insert({bottom: promoTitle});
		
		var promoDate = new Element("p").addClassName("promoDate");
		promoDate.update(slideData.tileDateRange);
		promoContent.insert({bottom: promoDate});
		
		if (slideData.tileContent) {
			var promoDescription = new Element("div").addClassName("promoDescription");
			promoDescription.update(slideData.tileContent);
			promoContent.insert({bottom: promoDescription});
		};
		
		if (slideData.tileLearnMoreLink) {
			var promoButton = new Element("button");
			promoButton.setAttribute("type", "button");
			promoButton.setAttribute("onclick", "window.location='" + slideData.tileLearnMoreLink + "'");
			promoButton.update("Learn More");
			promoContent.insert({bottom: promoButton});
		};
		
		if (slideData.tileYouTubeID) {
			var promoVideo = new Element("button");
			promoVideo.setAttribute("type", "button");
			promoVideo.setAttribute("onclick", "HomeSlideshow.showVideoInDialog('" + escape(slideData.tileYouTubeID) + "', '" + escape(slideData.tileTitle) + "'); return false;");
			promoVideo.update("Watch Video");
			promoContent.insert({bottom: promoVideo});
		};
		
		element.insert({bottom: promoContent});
		
		return element;
	}
});

HomeSlideshow.showVideoInDialog = function(escapedVideoId, escapedModalTitle) {
	console.log(escapedVideoId);
	videoId = unescape(escapedVideoId);
	
	HomeSlideshow.currSlideshow.stopAutoplay();
	
	new LDialog({
		title: unescape(escapedModalTitle),
		content: new Element("div"),
		ajax: {
			url: "/h/nso/HomeSlideshowVideo",
			options: {
				evalScripts: true,
				parameters: {
					videoId: videoId
				}
			}
		}
	});
};