window.onload = function() {
    var map = document.getElementById('map');
	var spider = document.getElementById('spider');
    var slid = true;
	
    document.getElementById("mapexpand").onclick = function() {
        var dir = slid? -1 : 1;
        slide(map, dir * -10, dir * -5, 0, -400);
        slid = !slid;
        
        this.getElementsByTagName("img")[0].src = slid? "slide/plus.gif":"slide/minus.gif" ;
        this.getElementsByTagName("img")[0].alt = slid? "MORE" : "LESS";        
        return false;
    }
	
	document.getElementById("spiderexpand").onclick = function() {
        var dir = slid? -1 : 1;
        slide(spider, dir * -10, dir * -5, 0, -400);
        slid = !slid;
        
        this.getElementsByTagName("img")[0].src = slid? "slide/plus.gif":"slide/minus.gif" ;
        this.getElementsByTagName("img")[0].alt = slid? "MORE" : "LESS";        
        return false;
    }

}

function slide(element, velocity, acceleration, lowerBound, upperBound) {
	var time  = 0;
	var top = parseInt(("defaultView" in document) ? document.defaultView.getComputedStyle(element, "").top : element.currentStyle.top);


	var interval = setInterval(function() {
		var newTop = top + velocity*time + 0.5*acceleration*time*time;
		
		if (newTop > lowerBound) {
			element.style.top = lowerBound + "px";
			clearInterval(interval);
		}
		else if (newTop < upperBound) {
			element.style.top = upperBound + "px";
			clearInterval(interval);
		}
		else {
			element.style.top = newTop + "px";
		}
		++ time;
	}, 10);
}