var Marquee = {
	
	toString: function() {
		return "Marquee";
	},
	
	init: function(mainDiv, contentDiv, navDiv, buttonsDiv, info) {
		
		this.LIGHT = "light";
		this.DARK = "dark";
		this.rotateCount = 0;
		this.mainDiv    = mainDiv;
		this.contentDiv = contentDiv;
		this.navDiv     = navDiv;
		this.buttonsDiv = buttonsDiv;
		this.info       = info;
		
		this.initObjects();
		this.initEvents();
		// this.navDiv.setStyle({"visible": "true"});
		// this.navDiv.hide();
		
	},
	
	initObjects: function() {
		
		this.nextArrow = this.navDiv.getElementsBySelector("div#marqueeNext")[0];
		this.prevArrow = this.navDiv.getElementsBySelector("div#marqueePrev")[0];
		// this.nextArrow.hide();
		// this.prevArrow.hide();
		
		this.buttons = [];
		var len = this.info.length;
		this.len = len;
		for (var i=0; i < len; i++) {
			var obj = this.info[i];
			var btn = new Element("div").update(obj.listCta);
			btn.addClassName("marqueeButton");
			this.buttonsDiv.insert(btn);
			this.buttons.push(btn);
		};
		this.buttonGroup = new ButtonGroup(this.buttons);
	},
	
	initEvents: function() {
		this.buttonGroup.addEventListener("click", this, this.onButtonClick);
		this.nextArrow.observe("click", this.onNextClick.bind(this));
		this.prevArrow.observe("click", this.onPrevClick.bind(this));
		// I think if we want to hide/show the arrows we'll have to track the mouse position:
		// this.mainDiv.observe("mouseover", this.onNavOver.bind(this));
		// this.mainDiv.observe("mouseout", this.onNavOut.bind(this));
		this.buttonGroup.triggerButton(0);
		var self = this;
		this.rotateID = setInterval(function(){self.rotate();}, 6000);
	},
	
	rotate: function() {
		this.rotateCount++;
		if (this.rotateCount == this.len) this.rotateCount = 0;
		//console.log(this + " rotate: " + this.rotateCount);
		this.buttonGroup.selectButton(this.rotateCount);
		this.onMarqueeSelect();
	},
	
	populateMarquee: function() {
		var obj = this.info[this.index];
		obj.loaded = true;
		var path = obj.background;
		//this.mainDiv.setStyle({"background-image":"url("+path+")", "background-position":"center", "background-repeat":"no-repeat"});
		//this.mainDiv.setStyle("background-image", path);
		this.mainDiv.setStyle({background:"url("+path+") top center no-repeat"}); 
		this.clearMarquee();
		
		//var titleString = (obj.tout_display_header) ? "" : obj.tout_display_header;
		this.title = new Element("h1").update(obj.tout_display_header.split("®").join("<sup>®</sup>").split("™").join("<sup>™</sup>"));
		this.description = new Element("p").update(obj.description);
		this.cta = new Element("a").update(obj.cta+" »");
		this.cta.setAttribute('href', obj.url);
		this.cta.addClassName("marqueeCta");
		
		// add light class if theme is light, otherwise dark is default:
		this.setTheme(obj.theme.toLowerCase());
		
		this.contentDiv.insert(this.title);
		this.contentDiv.insert(this.description);
		this.contentDiv.insert(this.cta);
		
		// fade in the elements:
		this.mainDiv.appear({duration:1});
		this.contentDiv.appear({duration:.5, delay:1});
		if (!this.firstRunComplete) {
			this.navDiv.appear({duration:.5, delay:1.5});
			this.firstRunComplete = true;
		}
		//<h1>LG-412<br>LASERGUARD</h1>
	},
	
	clearMarquee: function() {
		var children = this.contentDiv.childElements();
		var len = children.length;
		for (var i=0; i < len; i++) {
			children[i].remove();
		};
	},
	
	setTheme: function(theme) {
		// grab all the elements to toggle the light/dark theme:
		var elements = this.buttons.slice(0);
		elements.push(this.title);
		elements.push(this.description);
		elements.push(this.buttonsDiv);
		elements.push($("marqueePrev"));
		elements.push($("marqueeNext"));
		var element;
		var len = elements.length;
		for (var i=0; i < len; i++) {
			element = elements[i];
			if (theme == this.LIGHT) {
				if (!element.hasClassName(this.LIGHT)) element.addClassName(this.LIGHT);
			} else {
				if (element.hasClassName(this.LIGHT)) element.removeClassName(this.LIGHT);
			}
		};
	},
	
	loadBackground: function(path) {
		this.hideElements();
		var img = new Element("img", {src:path});
		Event.observe(img, "load", this.onBackgroundLoad.bind(this));
	},
	
	hideElements: function() {
		this.mainDiv.hide();
		this.contentDiv.hide();
	},
	
	invalidateArrows: function() {
		
		if (this.index == 0) {
			this.disableElement(this.prevArrow);
		} else {
			this.enableElement(this.prevArrow);
		}
		
		if (this.index == this.info.length-1) {
			this.disableElement(this.nextArrow);
		} else {
			this.enableElement(this.nextArrow);
		}
	},
	
	disableElement: function(element) {
		if (!element.hasClassName("disabled")) element.addClassName("disabled");
	},
	
	enableElement: function(element) {
		if (element.hasClassName("disabled")) element.removeClassName("disabled");
	},
	
	onBackgroundLoad: function(e) {
		//console.log(this + " onBackgroundLoad");
		this.populateMarquee();
	},
	
	onButtonClick: function() {
		clearInterval(this.rotateID);
		this.onMarqueeSelect();
	},
	
	onMarqueeSelect: function() {
		this.index = Number(this.buttonGroup.selectedIndex);
		var obj = this.info[this.index];
		if (!obj.loaded) {
			this.loadBackground(obj.background);
		} else {
			// background image is already in cache, just populate:
			this.hideElements();
			this.populateMarquee();
		}
		this.invalidateArrows();
	},
	
	onNextClick: function() {
		console.log("this.index: "+(this.index+1));
		if (this.index < this.info.length-1) this.buttonGroup.triggerButton(this.index+1);
	},
	
	onPrevClick: function() {
		if (this.index > 0) this.buttonGroup.triggerButton(this.index-1);
	},
	
	onNavOver: function() {
		console.log("onNavOver");
	},
	
	onNavOut: function() {
		console.log("onNavOut");
	}
}