var carousel={
	init:function(container_id, content) {
		this.container_id = container_id; //image container
		this.carousel_content = content; //content stored in data structure
		//get list of IDs from JSON
		this.carousel_content_list = new Array();
		for(var objname in this.carousel_content) {
			this.carousel_content_list.push(objname);
		}
		this.carousel_content_current = this.carousel_content_list[0];
		this.carousel_periodical = null;
	},
	createPauseLink:function(id,start_state) {
	    //add pause link through JS, without JS would perform no function
	    var play_pause_link = $(id);
	    play_pause_link.setHTML(start_state);
	},
	setupCarouselImages:function() {
	    //function loads and adds images to the page using the paths in the data structure (carousel_content)
		var img_container = $(this.container_id);
		//the first should already exist in the page
		var temp_image_path = null;
		var temp_image_object = null;
		var add_this = false;
		for(var objname in this.carousel_content) {
			if(add_this) {
				temp_image_path = this.carousel_content[objname][0];
				temp_image_object = new Asset.image(temp_image_path['image'], {'id': ('img_'+objname), 'alt': temp_image_path['image_alt'], 'class': 'image_absolute'})
				img_container.appendChild(temp_image_object);
			}
			else {add_this = true;}
		}
		//start playing carousel
		this.playPauseCarousel();
	},
	showCarouselContent:function (id, callingElement) {
	    //used for menu links, transition to id
		$clear(this.carousel_periodical);//clears periodical to pause
		this.carousel_periodical = null;
		return this.setCarouselContent(id, callingElement);
	},
	setCarouselContent:function (id, callingElement) {
		var img_container = $(this.container_id);
		var callingElement = $(callingElement);
		if(!callingElement.hasClass('current')){
			//get dataset for this id
			var hero = this.carousel_content[id][0];
	
			//get current .current 
			var menu_li_list = $$('.overlay .menu a.current');
			//set the correct current
			menu_li_list[0].setProperty('class', '');
			callingElement.addClass('current');
			this.carousel_content_current = id;
			
			/*create new*/
			var title = new Element('p', {'class': 'headline'});
			title.setHTML(hero['title']);
			var text = new Element('p');
			text.addClass('lead_text');
			text.setHTML(hero['text']);
			if (hero['link'] != '#') {
			    var link = new Element('p');
			    link.setHTML('<a href="'+hero['link']+'\" class=\"button\">'+hero['linkText']+'</a>');
			}
			
			var overlay_content = $('overlay_content');
			
			/*clear text*/
			overlay_content.empty();
			/*append*/
			overlay_content.appendChild(title);
			overlay_content.appendChild(text);
			if (hero['link'] != '#') {
			    overlay_content.appendChild(link);
			}
			
			/*image transition*/
			var images = $(img_container).getChildren();
			var image = null;
			for (var i=0; i<images.length; i++) {
				//stop effects
				if(images[i].fx){ 
					images[i].fx.stop();
				}
				//if its the chosen picture, opacity zero and place infront
				if(images[i].getProperty('id').substr(4) == id){
					image = images[i];
					image.setOpacity(0);
					image.setProperty('class', 'image_absolute current_image');
				}
				//set the previous current iamge to previous
				else if(images[i].hasClass('current_image')){
					images[i].setProperty('class', 'image_absolute previous_image');
				}
				//reset all other cases
				else {
					images[i].setProperty('class', 'image_absolute');
				}
			}
			if (image) {
				image.fx = image.effect('opacity', {duration: 1000}).start(1);
			}
		}
		return false;
	},
	playCarousel: function() {
		//get index PLUS ONE of current images 
		var index = this.carousel_content_list.indexOf(this.carousel_content_current) + 1;
		//allow loop.
		if (index == this.carousel_content_list.length) {
			index = 0;
		}
		var id = this.carousel_content_list[index];
		//transition using setCarouselContent
		this.setCarouselContent(id, ('link_'+id));
	},
	playPauseCarousel: function() {
	    var play_pause_link = $('pause_link');
		if ($defined(this.carousel_periodical)){
			$clear(this.carousel_periodical);
			this.carousel_periodical = null;
			play_pause_link.setHTML('PLAY');
		}
		else {
			this.carousel_periodical = this.playCarousel.periodical(5000,this);
			play_pause_link.setHTML('PAUSE');
		}
		return false;
	}
}