var HomeSlideShow = Class.create({
	initialize: function(container) {
		this.container = $(container) || $("slideshow");
		this.gallery    = this.container.select("div.gallery img");
		this.thumbs  = this.container.select("div.thumbs a");
		this.caption = $("caption");
		this.title = this.caption.select('h2')[0];
        this.description = this.caption.select('p')[0];
		this.credit = this.caption.select('p')[1];
		this.count     = this.gallery.length;
		this.active    = 0;
		this.lock = false;
        this.setup();
        /*
         * KLUDGE: 
         * The editor saves a headline link in the slide images' TITLE attribs
         * meaning the full anchor tag HTML shows if one mouses over the images.
         * We'll save the link string in another attribute of this HomeSlideShow
         * object and use a proper bit of text for the title until we're done
         * showing each image, then clean up after ourselves. -- A.Lewis
         */
        // save the image TITLE attribute "as is"
        this.meta_title = [];
        this.meta_title[0] = this.gallery[0].title;
        // clear HTML from image TITLE attribute
        this.gallery[0].title = this.gallery[0].title.replace(/<[^>]+>/g,'');
	},
	setup: function() {
		this.thumbs.each(function(el, i) {
			el.observe("click", this.show.bindAsEventListener(this, i)) 
		}.bind(this));

		this.play = new PeriodicalExecuter(function(pe) {
			var current = this.active;
			this.active += 1;
			if (this.active >= this.count) this.active = 0;
			var next = this.active;
			this.next(current, next);
		}.bind(this), 7); // 7 seconds between slides
	},
	show: function(event, sel) {
        event.stop(); // stops the link in the href from loading
        this.play.stop();
        if((this.active != sel) && (this.lock == false)){
            this.next(this.active, sel);
        }
        this.play = new PeriodicalExecuter(function(pe) {
			var current = this.active;
			this.active += 1;
			if (this.active >= this.count) this.active = 0;
			var next = this.active;
			this.next(current, next);
		}.bind(this), 7); // 7 seconds between slides
	},
	next: function(current, pos){
		this.lock = true;
		this.active = pos;
		new Effect.Fade(this.gallery[current], {duration: 0.5, from: 1.0, to: 0.0, afterFinish: function(){
            this.gallery[current].style.display = 'none';
            // revert image TITLE attribute
            this.gallery[current].title = this.meta_title[current];
		}.bind(this), queue: 'front'});
		this.thumbs[current].removeClassName("active");

		new Effect.Move(this.caption, {duration: 0.5, x: 0, y: 345, mode: 'absolute', afterFinish: function(){
            // save the image TITLE attribute "as is" [set new meta attrib]
            this.meta_title[pos] = this.gallery[pos].title;
            // clear any HTML tags from image TITLE attribute
            this.gallery[pos].title = this.gallery[pos].title.replace(/<[^>]+>/g,'');
            // update object title from meta attrib
            this.title.update(this.meta_title[pos]); 
			//this.title.update(this.gallery[pos].title); // OLD [update object title directly from img title]
            this.description.update(this.gallery[pos].alt);
			this.credit.update(this.gallery[pos].name);
		}.bind(this), queue: 'front'});

		new Effect.Fade(this.gallery[pos], {duration: 0.5, from: 0.0, to: 1.0, beforeStart: function(){
			this.gallery[pos].setOpacity(0);
			this.gallery[pos].style.display = 'block';
		}.bind(this), queue: 'end'});
		this.thumbs[pos].addClassName("active");

		new Effect.Move(this.caption, {duration: 0.4, x: 0, y: 200, mode: 'absolute', afterFinish: function(){
            this.active = pos;
			this.lock = false;
		}.bind(this), queue: 'end'});
	}
});

/* ---------------------------------------------------------------- */

var PhotoListView = Class.create({
	initialize: function(container) {
		this.container = $(container) || $("tabs");
		this.toggler  = this.container.select("a.photo-list-view")[0];
		this.tabs      = this.container.select("div.tabs")[0];
		this.setup();
	},
	setup: function() {
		this.toggler.observe("click", this.show.bindAsEventListener(this));
	},
	show: function(event) {
		event.stop();
		this.toggler.toggleClassName('active');
		this.tabs.toggleClassName('active');
	}
});

/* ---------------------------------------------------------------- */

var PhotoSlide = Class.create({
	initialize: function(container) {
		this.container  = $(container);
		this.gallery    = this.container.select("div.gallery img");
		this.scrollEl   = this.container.select("div.gallery")[0];
		this.imgCount   = this.container.select("div.description strong")[0];
		this.title      = this.container.select("div.description h4 a")[0];
		this.descript   = this.container.select("div.description .copy")[0];
        this.credit     = this.container.select("div.description p.credit")[0];
		this.prev       = this.container.select("a.prev")[0];
		this.next       = this.container.select("a.next")[0];
		this.count      = this.gallery.length;
		this.current    = 0;
		this.setup();
	},
	setup: function() {
		this.update(this.current);
		if(this.count < 1){
			this.prev.addClassName('disable');
			this.next.addClassName('disable');
		} else {
			if(this.current == 0) this.prev.addClassName('disable');

			this.prev.observe('click', function(event){
				event.stop();
				this.current -= 1;
				if(this.current < 0) this.current = 0;
				this.slide(this.current);
			}.bind(this));

			this.next.observe('click', function(event){
				event.stop();
				this.current += 1;
				if(this.current >= this.count) this.current = this.count-1;
				this.slide(this.current);
			}.bind(this));
		}
	},
	slide: function(pos) {
		new Effect.ScrollHorizontal(this.scrollEl, {duration: 0.6, transition: Effect.Transitions.EaseFromTo, to: (this.gallery[pos].offsetLeft)});
		if(this.current > 0) this.prev.removeClassName('disable');
		if(this.current < this.count) this.next.removeClassName('disable');
		if(this.current <= 0) this.prev.addClassName('disable');
		if(this.current >= this.count-1) this.next.addClassName('disable');
		this.update(pos);
	},
	update: function(pos) {
		this.imgCount.update((pos+1)+' of '+this.count);
		this.title.update(this.gallery[pos].up(0).title);
		this.title.href = this.gallery[pos].up(0).href;
		this.descript.update(this.gallery[pos].readAttribute('alt'));
        this.credit.update(this.gallery[pos].readAttribute('name'))
	}
});

/* ---------------------------------------------------------------- */

document.observe("dom:loaded", function(){
	if ($("slideshow")) new HomeSlideShow("slideshow");
	if ($("deal-finder")) new Tabs("deal-finder");
	if ($("most-popular")) new Tabs("most-popular");
	if ($("destinations-pod")) new PhotoListView("destinations-pod");
	if ($("trips-pod")) new PhotoListView("trips-pod");
	if ($("destinations-pod")) new PhotoSlide("destinations-pod");
	if ($("trips-pod")) new PhotoSlide("trips-pod");
});