var DestinationMap = Class.create({
	initialize: function(container) {
		this.container = $(container) || $('destination-map');
		this.areas = this.container.select("area");
		this.regions = this.container.select("div.regions img");
		this.tips = this.container.select("p.tip");
		this.count = this.regions.length;
		this.setup();		
	},
	setup: function() {
		this.areas.each(function(el, i){
			el.observe('mouseover', this.show.bindAsEventListener(this, i));
		}.bind(this));
	},
	show: function(event, pos) {
		for(var i = 0; i < this.count; i++){
			this.regions[i].style.display = 'none';
			this.tips[i].style.display = 'none';
		}
		this.regions[pos].observe('mouseout', function(){
			this.regions[pos].style.display = 'none';
			this.tips[pos].style.display = 'none';
		}.bind(this));
		this.regions[pos].style.display = 'block';
		this.tips[pos].style.display = 'block';
	}
});

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

var DestinationBrowser = Class.create({
	initialize: function(container) {
		this.container = $(container);
		this.columns   = this.container.select("div.cols");
		this.total     = this.columns.length;
		this.scrollers = [];
		this.setup();		
	},
	setup: function() {
		this.columns.each(function(col, i) {
			this.configure(col, i); }.bind(this));
	},
	configure: function(col, i) {
		var content = col.down("div.scroll-content");
		var track   = col.down("div.track");
		var handle  = col.down("div.knob");
		
		this.scrollers[i] = new Control.Scroller(content, handle, track, {
			up:   col.down("div.up"),
			down: col.down("div.down"),
			axis: "vertical"
		});
		
		this.linkup(col, i);
	},
	linkup: function(col, target) {
		col.select("ul a").each(function(el) {
			el.observe("click", this.load.bindAsEventListener(this, target)); }.bind(this));
	},
	load: function(event, i) {
		var a  = event.element();
		var li = a.up("li");
		var target = i + 1;
		
		li.siblings().invoke("removeClassName", "selected");
		li.addClassName("selected");
		
		for (var k = (this.total - target); k > 1; k--) {
			this.scrollers[k].innerContent.setStyle({ display: "none", height: "0px" });
			this.scrollers[k].reset();
		}
		
		if (this.columns[target]) {
			var col      = this.columns[target];
			var scroller = this.scrollers[target];
			
			new Ajax.Updater(scroller.content, a.href, {
				method:     "post",
				onComplete: function() {
					scroller.reset(); 
					this.linkup(col, target);
				}.bind(this)
			});
			
			event.stop();
		}
	
	}
});

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

document.observe("dom:loaded", function(){
	new Accordion("accordion");
	new DestinationMap("destination-map");
	new DestinationBrowser("browse-destinations");
	var Tabbing = new Tabs("destination-browser");
	Tabbing.deactivate(1);
	Tabbing.activate(0);
	if($('search-destination')){
		new SearchSuggestion('search-destination', '/partials/search-suggestions.html');
	}
});