// Helper methods
var MapUtils = {
    addEventListener: function(obj,evt,cb)
    {
        if (!obj)
            return;
        if (obj.attachEvent)
        {
            obj.attachEvent('on'+evt,cb);
        } else {
            obj.addEventListener(evt,cb,false);
        }
    },
    hasAttr: function(obj, attr)
    {
        if (obj.hasAttribute)
            return obj.hasAttribute(attr);
        return obj.getAttribute(attr) != "";
    },
    getAttr:function(obj, attr)
    {
        if (obj.hasAttribute)
            return obj.getAttribute(attr);
            
        if (obj.attributes[attr])
        {
            var attrNode = obj.attributes[attr];
            return attrNode.nodeValue;
        }            
        return "";
    },
    setAttr: function(obj, attr, val)
    {
        if (obj.hasAttribute)
            return obj.setAttribute(attr, val);
        if (obj.attributes[attr])
            return obj.attributes[attr].nodeValue = val;
    },
    addClass: function(obj,cls)
    {
        var current = MapUtils.getAttr(obj,"class") || "";
        current = current.replace(new RegExp("(^|\\s)" + cls + "(\\s|$)"), '');
        MapUtils.setAttr(obj,"class",current + " " + cls);
    },
    rmClass: function(obj,cls)
    {
        var current =  MapUtils.getAttr(obj,"class") || "";
        current = current.replace(new RegExp("(^|\\s)" + cls + "(\\s|$)"), '');
        MapUtils.setAttr(obj,"class",current);
    },
    hasClass: function(obj,cls)
    {    
        return MapUtils.hasAttr(obj,"class") && MapUtils.getAttr(obj,"class") && MapUtils.getAttr(obj,"class").match(new RegExp("(^|\\s)" + cls + "(\\s|$)"));         
    },
    Event: function(e)
    {
        this.setEvent(e);
    }
}
// Custom event object
MapUtils.Event.prototype = {
    event: null,
    setEvent: function(e) { this.event=e; },
    preventDefault: function() { if (this.event.preventDefault) this.event.preventDefault; this.event.returnValue=false; }
}
// Startmap object
var StartMap = function(imgid, mapid, options)
{
    var options = options||{};
    this.setImage(document.getElementById(imgid));
    this.setMap(document.getElementById(mapid));
    for (var k in options)
        this._options[k] = options[k];
}

StartMap.prototype = {
    _options:{
        slideSpeed: 25, // speed per step
        slideSteps: 10  // number of steps
    },
    _map: null,
    _img: null,
    _items: [],
    _activeItem:null,
    _highlightedItem:null,
    getOption: function(opt) { return this._options[opt]; },
    setMap: function(obj) { this._map = obj; },
    setImage: function(obj) { this._img = obj; },
    setImageClass: function(cls) { MapUtils.setAttr(this._img, "class", cls); /* this._img.setAttribute("class", cls); */ },
    addItem: function(item) { this._items.push(item); item.setMap(this); },
    // when an item is clicked, it becomes the active item
    setActiveItem: function(item) {     
        if (item != this._activeItem)
        {
            if (this._activeItem)
            {
                this._activeItem.setActive(false);
            }
            item.setActive(true);
            this._activeItem = item;
        } else {
            this._activeItem.setActive(false);
            this._activeItem = null;
        }        
    },
    // highlight item
    highlightOn: function(item) {
        if (this._highlightedItem != item)
        {
            this._highlightedItem = item;
            this.setImageClass(item.getMapClass());
        }
    },
    // remove higlight from item
    // and make sure that the active item becomse hilighted
    highlightOff: function(item) {
        if (item == this._highlightedItem)
        {
            this._highlightedItem = null;
            if (this._activeItem)
                this.setImageClass(this._activeItem.getMapClass());
            else
                this.setImageClass("");
        }
    }
}
// itemid is used to find both the <area> and the <li>
var MapItem = function(itemid)
{
    this.setListItem(document.getElementById('map-listitem-' + itemid));
    this.setArea(document.getElementById('maparea-' + itemid));
    this.setMapClass('map-' + itemid);
    this.setAnchor(this.getListItem().getElementsByTagName("a")[0]);
    var divs = this._listItem.getElementsByTagName("div");
    var len = divs.length;
    // wrap the content element with a expander element.
    for (var i=0;i<len;++i)
    {

        if (MapUtils.hasClass(divs[i],"content"))
        {        
                this.setContentHeight(divs[i].offsetHeight);
                this.setExpander(document.createElement("div"));
                this.getExpander().style.overflow = 'hidden';
                this.getExpander().style.height = '0px';
                this.getExpander().style.padding = '0px';
                this.getExpander().appendChild(divs[i].cloneNode(true));
                divs[i].parentNode.replaceChild(this.getExpander(), divs[i]); 
                break;
        }
    }
}

MapItem.prototype = {
    _imgActiveClass:"",
    _area: null,
    _listItem: null,
    _active: false,
    _map:null,
    _expanderTimer:null,
    _expander:null,
    _contentHeight:0,
    _anchor: null,
    _isCollapsing: false,
    _isExpanding: false,
    _expandingInterval: null,
    setAnchor: function(a) {    
        this._anchor = a;        
        var self = this;
        MapUtils.addEventListener(this.getAnchor(), 'mouseover', function(e) { self.onMouseOver.call(self,e); }); 
        MapUtils.addEventListener(this.getAnchor(), 'mouseout', function(e) { self.onMouseOut.call(self,e); }); 
        MapUtils.addEventListener(this.getAnchor(), 'click', function(e) { self.onClick.call(self,new MapUtils.Event(e)); });
    },
    getAnchor: function() {
        return this._anchor;
    },    
    setExpander: function(expander) {
        this._expander = expander;
    },
    getExpander: function() {
        return this._expander;
    },
    setContentHeight:function(height) {    
        if (typeof(height) != 'number') 
            this._contentHeight = parseInt(height.replace(/^[^\d]/,''));
        else
            this._contentHeight = parseInt(height);
    },
    setMap:function(map) { this._map = map; },
    getMap:function() { return this._map; },
    setMapClass:function(cls) { this._imgActiveClass = cls; },
    getMapClass:function() { return this._imgActiveClass; },
    setArea: function(obj) { 
        this._area = obj; 
        var self = this; 
        MapUtils.addEventListener(obj, 'mouseover', function(e) { self.onMouseOver.call(self,e); });
        MapUtils.addEventListener(obj, 'mouseout', function(e) { self.onMouseOut.call(self,e); });
        MapUtils.addEventListener(obj, 'click', function(e) { self.onClick.call(self,new MapUtils.Event(e)); });
    },
    setListItem: function(obj) { 
        this._listItem = obj; 
    },
    getListItem: function() {
        return this._listItem;
    },
    setActive: function(state) { 
        this._active = state; 
        if (this._active) {
            this.expand();
        } else {            
            this.collapse();
        }
    },
    onMouseOver:function(e){
        this.getMap().highlightOn(this);
        this.getAnchor().style.textDecoration="underline";
    },
    onMouseOut:function(e){
        this.getMap().highlightOff(this);
        this.getAnchor().style.textDecoration="none";
    },
    onClick:function(e){
        e.preventDefault();
        this.getMap().setActiveItem(this);       
    },
    expand: function()
    {
        var self = this;
        var speed = this.getMap().getOption('slideSpeed');
        var steps = this.getMap().getOption('slideSteps');
        
        if (!MapUtils.hasClass(this._listItem,"expanded"))
            MapUtils.addClass(this._listItem,"expanded");    
 
        if (!this._isExpanding)
        {
            if (this._expandingInterval != null)
                clearInterval(this._expandingInterval);
             this._isCollapsing = false;
             this._expandingInterval = setInterval(function() { self.expand(self); }, speed);
        }

        var currentHeight = this._expander.offsetHeight;
        if (currentHeight < this._contentHeight) {
            this._expander.style.height = Math.min((currentHeight+(this._contentHeight/steps)),this._contentHeight)  + "px";            
      
        } else {
            clearInterval(this._expandingInterval);
            this._isExpanding = false;
        }
    },
    collapse: function()
    {
        var self = this;
        var speed = this.getMap().getOption('slideSpeed');
        var steps = this.getMap().getOption('slideSteps');
        if (!this._isCollapsing)
        {
            if (this._expandingInterval != null)
                clearInterval(this._expandingInterval);
             this._isExpanding = false;
             this._expandingInterval = setInterval(function() { self.collapse(self); }, speed);
        }
        
        var currentHeight = this._expander.offsetHeight;
        if (currentHeight > 0) {
            this._expander.style.height = Math.max((currentHeight-(this._contentHeight/steps)),0)  + "px";   
        } else {
            MapUtils.rmClass(this._listItem,"expanded");
            clearInterval(this._expandingInterval);
            this._isCollapsing = false;
        }
    }
}