vanilla.namespace('mexcapade.map');

mexcapade.map =
{
    selectedIndex : null,

    init : function()
    {
	for ( var i = 1 ; i <= 4 ; i++ )
	{
	    var thumb = EL("map-thumbnail-" + i);
	    vanilla.event.addEventListener(thumb, "mouseover",	this.onover.bind(this, thumb));
	    vanilla.event.addEventListener(thumb, "mouseout",	this.onout.bind(this, thumb));
	    vanilla.event.addEventListener(thumb, "click",	this.onclick.bind(this, i));

	    if ( vanilla.html.DOM.hasClassName(thumb, 'selected') )
	    {
		this.selectedIndex = i;
	    }
	}
    },

    onclick  : function(index)
    {
	if ( index != this.selectedIndex )
	{
	    this.enable(index);
	    this.disable(this.selectedIndex);
	    this.selectedIndex = index;
	}
    },

    enable : function(index)
    {
	vanilla.html.DOM.addClassName("map-thumbnail-" + index, "selected");
	vanilla.html.DOM.addClassName("map-zoom-" + index, "selected");
    },

    disable : function(index)
    {
	vanilla.html.DOM.removeClassName("map-thumbnail-" + index, "selected");
	vanilla.html.DOM.removeClassName("map-zoom-" + index, "selected");
    },

    onover : function(thumb)
    {
	vanilla.html.DOM.addClassName(thumb, "over");
    },

    onout : function(thumb)
    {
	vanilla.html.DOM.removeClassName(thumb, "over");
    }
};

vanilla.addOnloadListener(mexcapade.map.init, mexcapade.map);