iona.overlay_carousel = (function(){
		var api = {};
		var data, dom, currentIndex, slider;
		var init = function(){
			currentIndex = 0;
			iona.overlay.set_markup("<div id='overlay-carousel'></div>");
			dom = $("div#overlay-carousel");
		};
		
		var renderMarkup = function(){
			var markup = [];
			markup.push("",
			"<div class='character-overlay'>",
			"	<div class='top-bar'>",
			"		<div class='title detail-font-header'>","</div>",
			"		<div class='description'>","</div>",
			"		<div class='pagination'>",
			"			<a href='#' class='close-btn'></a>",
			"");

			if(data.length > 1){
				markup.push("",
				"			<a href='#' class='right-btn'></a>",
				"			<a href='#' class='left-btn'></a>",
				"");
			}
			
			markup.push("",
			"			<a href='#' class='cart-btn'>",
			"				<img src='/static/images/add_icon.png' /> ADD TO CART",
			"			</a>",
			"			<a href='#' class='in-cart-btn'>",
			"				ADDED TO CART",
			"			</a>",
			"		</div>",
			"	</div>",
			"	<div class='overlay-carousel-window'>",
			"		<div class='overlay-carousel-wide'>",
			"");
			
			/*
			var image, video;
			for(var i=0; i<data.length; i++){
				video = "";
				image = "";
				if(!data[i].video){
					for(var j=0; j<data[i].children.length; j++){
						if(data[i].children[j].name == "big_image")
							image = data[i].children[j].value;
						else if(data[i].children[j].name == "video")
							video = data[i].children[j].value;
					}
				} else {
					video = data[i].video;
				}
				
				if(video.length > 0)
					markup.push("<div class='slide'>",video.replace(/\&lt\;/g,"<").replace(/\&gt\;/g,">"),"</div>");
				else
					markup.push("<div class='slide'>","<img src='",image,"' />","</div>");
			}
			*/
			markup.push("",
			"	<div class='slide prev'>a</div>",
			"	<div class='slide active'>b</div>",
			"	<div class='slide next'>c</div>",
			"");
			
			markup.push("",
			"		</div>",
			"	</div>",
			"</div>",
			"");
			dom.html(markup.join(''));
			
			dom.find("a.close-btn").click(function(){
				api.hide();
				return false;
			});
			
			dom.find("a.cart-btn").click(function(){
				iona.cart.addItem(data[currentIndex]);
				$(this).parent().addClass("in_cart");
				return false;
			});
			
			dom.find("a.in-cart-btn").click(function(){
				return false;
			});
			
			dom.find("a.left-btn").click(function(){
				gotoLeft();
				return false;
			});
			
			dom.find("a.right-btn").click(function(){
				gotoRight();
				return false;
			});
			
            slider = $("div.overlay-carousel-wide");
            slider.find("div.slide").click(function(){
                if($(this).hasClass("prev"))
                    gotoLeft();
                else if($(this).hasClass("next"))
                    gotoRight();
                return false;
            });

			// -- center wide thinger:
			var wider = dom.find("div.overlay-carousel-wide");
			var x = (10000 - $("body").width()) / 2;
			wider.css("left", -1 * x)
		};
		
		api.setData = function(d){
			data = d;
			renderMarkup();
		};
		
		api.gotoId = function(id){
			for(var i=0; i<data.length; i++){
				if(data[i].id == id)
					currentIndex = i;
			}
			showElement();
		};
		
		api.showNewElement = function(e){
			var d = {};
			d.video = e.video;
			d.title = e.title;
			d.description = e.description;
			d.id = "NEW";
			d.video = ["",
			"	<iframe src='http://player.vimeo.com/video/",d.video,"' width='600' height='340' frameborder='0'></iframe>",
			""].join('');
			api.setData([d]);
			currentIndex = 0;
			api.show();
			dom.find("div.title").html(decodeURIComponent(d.title));
			dom.find("div.description").html("<em>"+decodeURIComponent(d.description)+"</em>");
			dom.find("div.pagination a").not(".close-btn").hide();
			dom.find("div.slide.active").html(d.video);
			dom.find("div.slide.prev, div.slide.next").empty();
			Cufon.refresh();
		};
		
		var showElement = function(){
			if(!currentIndex)
				currentIndex = 0;
			var element = data[currentIndex];
			var header, description, big_image, cartable, video;
			for(var i=0; i<element.children.length; i++){
				if(element.children[i].name == "header")
					header = element.children[i].value;
				else if(element.children[i].name == "description")
					description = element.children[i].value;
				else if(element.children[i].name == "big_image")
					big_image = element.children[i].value;
				else if(element.children[i].name == "video")
					video = element.children[i].value;
				else if(element.children[i].name == "can_be_added_to_cart")
					cartable = (element.children[i].value == "YES");
			}

			dom.find("div.title").html(header);
			dom.find("div.description").html("<em>"+description+"</em>");
			
			var html;
			if(video.length > 0)
				html = video.replace(/\&lt\;/g,"<").replace(/\&gt\;/g,">");
			else
				html = "<img src='" + big_image + "' />";

			dom.find("div.slide.active").html(html);
			Cufon.refresh();
			
			var id = element.id+"";
			var cart = iona.state.getState();
			dom.find("div.pagination").show().removeClass("in_cart");
			//dom.find("div.pagination a").show();
			for(var i=0; i<cart.length; i++){
				if(cart[i].id == id)
					dom.find("div.pagination").addClass("in_cart");
			}

			if(!cartable)
				dom.find("div.pagination").addClass("no_cart");
			else
				dom.find("div.pagination").removeClass("no_cart");
			
			var prev, next;
			if(currentIndex > 0)
				prev = data[currentIndex - 1];
			else
				prev = data[data.length - 1];
			
			if(currentIndex == data.length - 1)
				next = data[0];
			else
				next = data[currentIndex + 1];
			
			var spacerHtml = "<div class='click-handler' style='display:block;height:500px;width:1000px;overflow:hidden;background:transparent;position:absolute;top:0;'></div>";
			// -- render prev:
			html = "";
			for(var i=0; i<prev.children.length; i++){
				if(prev.children[i].name == "big_image")
					html = "<img src='" + prev.children[i].value + "' />";
				else if(prev.children[i].name == "video" && prev.children[i].value.length > 0)
					html = (prev.children[i].value).replace(/\&lt\;/g,"<").replace(/\&gt\;/g,">");
			}
			dom.find("div.slide.prev").html(html + spacerHtml);
			// -- render next:
			html = "";
			for(var i=0; i<next.children.length; i++){
				if(next.children[i].name == "big_image")
					html = "<img src='" + next.children[i].value + "' />";
				else if(next.children[i].name == "video" && next.children[i].value.length > 0)
					html = (next.children[i].value).replace(/\&lt\;/g,"<").replace(/\&gt\;/g,">");
			}
			dom.find("div.slide.next").html(html + spacerHtml);
			
			// -- shift slider to correct point:
            slider.find("div.slide.prev img, div.slide.next img").css("opacity",0.25);
			dom.find("iframe").css({'height':340, 'width':600});
		};
		
		api.show = function(){
			window.scrollTo(0,0);
			iona.overlay.show();
		};
		
		var gotoLeft = function(){
			if(currentIndex == 0)
				currentIndex = data.length;
			currentIndex--;
			showElement();
		};
		
		var gotoRight = function(){
			if(currentIndex == data.length - 1)
				currentIndex = -1;
			currentIndex++;
			showElement();
		};
		
		api.hide = function(){
			iona.overlay.hide();
		};
		
		init();
		return api;
	})();