window.addEvent('domready', function()
{
	/*
		This message is for the editor that wants to modify the animation:
			The i_time_keepslide is the time in seconds the slide is shown to the user.
			The i_fadeduration is the time in seconds that it takes to fadein or fadeout.
			The arr_slides is the object that contains the slides informations.

		To add new slides inside the animation, you first need to add the xhtml into the index.html file.  To do so...
			* find the div with a class named: list-slideshows
			* create a new div, and add a class of your choice to that div.  It must be a class name not in used currently.  Then put the xhtml of your slide in it.
			* if you want to add a menu into that slide, simply create a new div and add a new class to it as well, then put the xhtml of your button, that will appear in the menu.

			* at last, you need to add your new slides into our slides array: arr_slides.  Each line that is between brackets {} is 1 slide.  
				The fullcontainerclass is the class that you want to put to the div that contains all the slides.  If you are unsure, leave this blank.
				The container is the slides itself.
				The menu is the button you want to be associated with your slide.  If you do not have any buttons, leave this blank.

			Please note that the slides on the website are in the same order as in the arr_slides array... so if you want to add a new slide after the first one, simply add it after the first one in the arr_slides array as well.
	*/
	/* Removed i_time_keepslide and replaced with a per-slide time.
	var i_time_keepslide = 5;	*/
	var i_fadeduration = 0.5;

	var arr_slides = Array(
		{'time': 6, 'fullcontainerclass': 'inner-page3', 'container': '#content .secondcontainer', 'menu': '#content .secondmenu'},
		{'time': 12, 'fullcontainerclass': 'inner-page2', 'container': '#content .fifthcontainer',  'menu': '#content .fifthmenu'},
		{'time': 6, 'fullcontainerclass': 'inner-page1', 'container': '#content .sixthcontainer',  'menu': '#content .sixthmenu'},
		{'time': 6, 'fullcontainerclass': 'inner-page',  'container': '#content .seventhcontainer','menu': '#content .seventhmenu'}
	);

	/*
		End edit
	*/

	var arr_mainbox = $$('#content .main-box');
	var arr_menu = $$('#content .indication-bar');
	var arr_slideshows = $$('#content .list-slideshows');
	if (
		(arr_mainbox.length == 1) && 
		(arr_menu.length == 1) && 
		(arr_slideshows.length == 1) && 
		$('content')
	)
		new teldon_slideshow($('content'), arr_mainbox[0], arr_menu[0], arr_slideshows[0], i_fadeduration, arr_slides);
});

var teldon_slideshow = new Class(
{
	mi_timekeepslide: 0,
	mi_slideinout_time: 0,
	mobj_full_container: null,
	mobj_container: null,
	mobj_menu: null,
	marr_slides: Array(),
	mi_timerid: null,
	mobj_container_slider: null,
	mi_slide_index: 0,
	mb_slidechanged: false,
	mb_menuchanged: false,
	mobj_tween_menu: null,
	ms_cookie_key: 'teldon_slideshow',
	mb_lastslidein: false,
	marr_slidesdata: Array(),
	mb_finished_show: false,
	transition: null,
	initialize: function(_obj_fullcontainer, _obj_container, _obj_menu, _obj_slideshowlist, _i_duration, _arr_slidesdata)
	{
		//we set our params:
		this.marr_slidesdata = _arr_slidesdata;
		//this.mi_timekeepslide = _i_time_keepslide * 1000;
		this.mi_slideinout_time = _i_duration * 1000;
		this.mobj_container = _obj_container;
		this.mobj_full_container = _obj_fullcontainer;
		this.mobj_menu = this.find_resursive_child(_obj_menu, 'tag', 'ul');
		if (!this.mobj_menu)
			return;

		//we then set our slides object:
		if (!this.set_slides_data(_obj_slideshowlist))
			return;

		//we set our tween menu:
		var obj_this = this;
//		this.mobj_tween_menu = new Fx.Tween(this.mobj_menu, {'onComplete': function(){obj_this.change_menu();}});

		//we create our slide object that will slide our main container:
		this.mobj_container_slider = new Fx.Tween(this.mobj_container, {
											'onComplete': function(){obj_this.change_slide();}, 
											'duration': this.mi_slideinout_time, 
											'link': 'cancel'
										}
		);

		//we set our menu links inactive:
		this.set_menulink_active(true);
		
		//we then begin sliding:
		this.mi_timerid = this.slide.delay(this.marr_slides[0].time * 1000, this);

	},
	set_menulink_active: function(_b_isactive)
	{
		var obj_this = this;
		if (!_b_isactive)
		{
			$$('#content .indication-bar ul li a').removeEvents('click');
			$$('#content .indication-bar ul li a').addEvent('click', function(_evt){
				_evt = new Event(_evt).stop();
			});
			return;
		}

		$$('#content .indication-bar ul li a').removeEvents('click');
		$$('#content .indication-bar ul li a').addEvent('click', function(_evt)
		{
			//we stop our event:
			_evt = new Event(_evt).stop(); 
						
			//we set our new index:
			obj_this.mi_slide_index = this.getParent().get('class').toInt();
			
			obj_this.mb_slidechanged = false;

			//we change our slide:
			obj_this.slidein(true);
			
			if (obj_this.mi_slide_index == 0) {
				// Trigger the slideshow from 1a to 1b, then stop.
				obj_this.mi_timerid = obj_this.slide.delay (obj_this.marr_slides[0].time * 1000, obj_this);
			}
			
			obj_this.mb_finished_show = true;

			//we set our current link active:
			$$('#content .indication-bar ul li a').removeClass('active');
			this.addClass('active');
		});
	},
	isinrightview: function()
	{
		//we get the position of our container:
		var arr_container_size = this.mobj_container.getSize();

		//we then get where our visitor is currently located:
		var arr_screen = window.getScroll();

		//if the container is not in our screen, we return false:
		if (
			(arr_screen.x > arr_container_size.x) ||
			(arr_screen.y > arr_container_size.y)
		)
			return false;

		return true;
	},
	slide: function()
	{
		//we make sure our container is currently in the right view, otherwise we just return:
		if (!this.isinrightview())
			return;

		// Make sure that we only transition 1a to 1b if the show is finished
		if (this.mb_finished_show && this.mi_slide_index != 0) {
			return;
		}
		
		//we first verify our index is not the last not... if it is yes, we stop our timer and return:
		if ((this.mi_slide_index + 1) >= this.marr_slides.length)
		{
			//we just finished our animation, so we set our links active and clear our timer:
			$clear(this.mi_timerid);
//			this.set_menulink_active(true);
			this.mb_finished_show = true;
			return;
		}
		
		this.continueSlide ();
	},
	continueSlide: function () {
		// If this is the first slide, try to transition just a portion of
		// this to a portion of slide 1b.
		//we toggle:
		this.slidein(!this.mb_lastslidein);
		
		//we change our slide index:
		this.mi_slide_index++;

//		if (!this.mb_finished_show) {
			//we set this new index inside our cookie:
//			Cookie.write(this.ms_cookie_key, this.mi_slide_index);
//		}

		//we change our flag to false:
		this.mb_slidechanged = false;
		
		this.mi_timerid = this.slide.delay (this.marr_slides[this.mi_slide_index].time * 1000, this);
	},
	slidein: function(_b_slidein)
	{
		this.mb_lastslidein = _b_slidein;
		
		//if (this.mi_slide_index != 1) {
			$$(".indication-bar ul li a").removeClass ("active");
			$$(".indication-bar ul li." + this.mi_slide_index + " a").addClass ("active");
		//}

		if (!_b_slidein)
			return this.mobj_container_slider.start('opacity', 0, 1);
		this.mobj_container_slider.start('opacity', 1, 0);
	},
	change_slide: function()
	{
		//we make sure our flag is set to false:
		if (this.mb_slidechanged)
			return;

		
		//we then change the stuff inside our slide:
		this.change_slide_now();

		//we then slide out:
		this.slidein(false);

		//we set our flag to true:
		this.mb_slidechanged = true;
		
		if ((this.mi_slide_index) >= this.marr_slides.length) {
			this.mb_finished_show = true;
		}
		
		this.change_menu ();
	},
	change_slide_now: function()
	{
		//we remove what we currently have in our container:
		this.mobj_container.empty();

		//we then clone the data inside our new container and insert it in our container:
		var arr_children = this.marr_slides[this.mi_slide_index].container.getChildren();
		for(var i = 0; i < arr_children.length; i++)
			arr_children[i].clone().inject(this.mobj_container);

		//we then set our full container class:
		this.mobj_full_container.set('class', this.marr_slides[this.mi_slide_index].fullcontainerclass);
	},
	change_menu: function()
	{
		this.set_menulink_active(true);
	},
	set_slides_data: function(_obj)
	{
		//we then set our arrays of data:
		for(var i = 0; i < this.marr_slidesdata.length; i++)
		{
			var arr_container = $$(this.marr_slidesdata[i].container);
			var arr_menu = $$(this.marr_slidesdata[i].menu);
			if (
				(arr_container.length != 1)
			)
				return false;

			this.marr_slides[this.marr_slides.length] = {
									'time': this.marr_slidesdata[i].time,
									'fullcontainerclass': this.marr_slidesdata[i].fullcontainerclass, 
									'container': arr_container[0], 
									'menu': arr_menu[0]
			};
		}

		return true;
	},
	find_resursive_child: function(_obj, _s_method, _s_method_value)
	{
		//we get our children:
		var arr_children = _obj.getChildren();
		for(var i = 0; i < arr_children.length; i++)
		{
			if (arr_children[i].get(_s_method) == _s_method_value)
				return arr_children[i];
		}

		//we have no child that have that object, so we verify recursively:
		for(var i = 0; i < arr_children.length; i++)
		{
			var obj_tmp = this.find_recursive_child(arr_children[i], _s_method, _s_method_value);
			if (obj_tmp)
				return obj_tmp;
		}

		//we return null since we didnt find anything:
		return null;
	}
});