// JavaScript Document
var dropdowns = Array();
var carousel;
var mouseX, mouseY;

window.addEvent("domready", function(){
	
	if($$('.dropdown').length > 0){
		$$('.dropdown').each(function(dd){
			dropdowns.push(new elSelect({container : dd.get("id")}));
		});
	}
	if($$('.maphover').length > 0){
		$$('.maphover').each(function(area){
			new MapHover(area);
		});
		$(document.body).addEvent('mousemove',function(event){
      mouseX = event.page.x;
      mouseY = event.page.y;
    });
	}
	if($('carousel')) carousel = new Carousel();
});

var MapHover = new Class({
	initialize: function(element){
		var self     = this;
	  this.element = element;
		this.map     = $('worldmap');
		this.timer   = this.updateToolTip.periodical(10, this);
		this.tooltip = $('tt_'+this.element.get("id"));
		this.prefix  = this.map.get("class");
		this.loader  = new Element("img").setStyle("visibility", "hidden").setStyle("height", 1).setStyle("width", 1).inject(document.body);
		
	  this.element.addEvent("mouseenter", function(){ 
		  var me = this;
		  self.loader.set("src", "/media/images/"+self.prefix+"_"+me.get("id")+".jpg").addEvent("load", function(){
			  self.map.set("src", "/media/images/"+self.prefix+"_"+me.get("id")+".jpg");
		  });
			self.tooltip.setStyle("display", "block");
		});
		
		this.element.addEvent("mouseleave", function(){ 
		 self.tooltip.setStyle("display", "none");
		});
		
	},
	
	updateToolTip: function(){
	  if(this.tooltip.getStyle("display") == "block"){
			if(this.element.get("id") == "north_america") this.tooltip.setStyle("left", mouseX + 50).setStyle("top", mouseY - 20);
			else this.tooltip.setStyle("left", mouseX - 250).setStyle("top", mouseY - 20);
		}
	}
});

var Carousel = new Class({
  initialize: function(){
		var self         = this;
    this.container   = $('carousel');
		this.images      = this.container.getElements(".image");
		this.texts       = this.container.getElements(".text");
		this.imagescroll = new Fx.Scroll(this.container.getElement(".carousel_images"));
		this.h_container = this.container.getElement("#carousel_hits");
		this.current     = 0;
		
		this.images.each(function(i, index){ 
		  var a;
		  i.set('tween', {duration: 1500}); 
			if(index == 0) a = new Element("a", {"class":"hit active", "href":"#hit"}).inject(self.h_container);
			else a = new Element("a", {"class":"hit", "href":"#hit"}).inject(self.h_container);
			a.addEvent("click", function(){ self.jumpTo(index); return false; });
	  });
		this.hits = this.container.getElements(".hit");
		this.texts.each(function(t){ t.set('tween', {duration: 1000}); });
		
		this.clickable   = true;
		this.autoscroll  = this.next.periodical(5000, this);
	},
	next: function(){
		this.clickable = false;
		this.images[this.current].tween("left", -670);
		this.texts[this.current].tween("opacity", 0);
		this.hits[this.current].setStyle("background-position", "left");
		
		this.current++;
		if(this.current > (this.images.length -1)) this.current = 0;
		
		this.images[this.current].setStyle("left", 660).tween("left", 0);
		this.texts[this.current].tween("opacity", 1);
		this.hits[this.current].setStyle("background-position", "right");
		this.resetClickable.delay(1500, this);
	},
	jumpTo: function(i){
		if(this.clickable){
			this.clickable = false;
			$clear(this.autoscroll);
			
			this.images[this.current].tween("left", -670);
			this.texts[this.current].tween("opacity", 0);
			this.hits[this.current].setStyle("background-position", "left");
			
			this.current = i;
			
			this.images[this.current].setStyle("left", 660).tween("left", 0);
			this.texts[this.current].tween("opacity", 1);
			this.hits[this.current].setStyle("background-position", "right");
			
			this.resetClickable.delay(1500, this);
			this.autoscroll  = this.next.periodical(3000, this);
		}
	},
	resetClickable: function(){
		this.clickable = true;
	}
});
