function tweenDiv (id, numFrames, interval, x0, y0, x1, y1) {

	var dx = (x1 - x0)/(numFrames-1);  // Distance to move horizontally each frame
	var dy = (y1 - y0)/(numFrames-1);  // Distance to move vertically each frame
	var frameNum = 0;                  // Frame we are at now
	var element = null;                // The element to be animated
	var nextFrame = function () {

		if (element.style) {
			element.style.left = x0 + dx*frameNum + "px";
			element.style.top = y0 + dy*frameNum + "px";
		}
		else {
			element.left = x0 + dx*frameNum;
			element.top = y0 + dy*frameNum;
		}

		if (++frameNum >= numFrames) clearInterval(intervalId);
	}

	if (document.getElementById) {     // If this is a DOM-compliant browser
		element = document.getElementById(id);  // Use the DOM method
	}
	else if (document.all) {           // Otherwise, if the IE API is supported
		element = document.all[id];    // Use the all[] array to find the element
	}
	else if (document.layers) {        // Else if the Netscape API is supported
		element = document.layers[id]; // Use the layers[] array to get the element
	}

	if (element) {
		var intervalId = setInterval(nextFrame, interval);
	}

}


window.onload = window.onresize = function () {
	var barra = document.getElementById('barra-retratil');
	barra.style.left = -21+'px';
	barra.style.display = 'block';
	barra.docked = false;
	
	if (navigator.appVersion.indexOf("MSIE") == -1) {
		var t = tweenDiv ('barra-retratil', 10, 1, -202, 450, -21, 450);
		barra.docked = true;
	}

//	mtv_init ();
}

function dock () {
	var barra = document.getElementById('barra-retratil');
	
	if (!barra.docked) {
		barra.docked = true;
		if (navigator.appVersion.indexOf("MSIE") == -1) {
			var t = tweenDiv ('barra-retratil', 10, 2, -202, 450, -21, 450);
		} else {
			barra.style.left = -202+'px';
		}
	} else {
		barra.docked = false;		
		if (navigator.appVersion.indexOf("MSIE") == -1) {
			var t = tweenDiv ('barra-retratil', 10, 2, -21, 450, -202, 450);
		} else {
			barra.style.left = -21+'px';
		}
	}
}