/**
* Static timeline
*
*/
function DrawStaticTimeline(divId, startRange, endRange, timelineTooltip, sliderFrom, sliderTo, sliderTooltip) {
	this.divId = divId;
	this.timelineTooltip = timelineTooltip;
	this.sliderTooltip = sliderTooltip;
	this.startRange = startRange ;
	this.endRange = endRange; 
	this.sliderFrom = sliderFrom;
	this.sliderTo = sliderTo;
	this.timelineContainer = null;
	this.timelineTable = null;
	this.gridDiv = null;
	this.timelineSliderDiv = null;
	this.whitePixel="../images/white-pixel.png";
	this.render = function () {
		this.timelineTable = document.createElement("table");
		this.timelineTable.id = "timeline-table";
		var trElement = document.createElement("tr");

// FROM
		var tdElement = document.createElement("td");
		tdElement.innerHTML = this.startRange;
		trElement.appendChild(tdElement);

// create the grid
		this.createTimelineGrid();
		this.createTimelineSlider();
		this.gridDiv.appendChild(this.timelineSliderDiv);
		var tdElement = document.createElement("td");
		tdElement.appendChild(this.gridDiv);
		trElement.appendChild(tdElement);


// TO
		var tdElement = document.createElement("td");
		tdElement.innerHTML = this.endRange;
		trElement.appendChild(tdElement);
		var bodyElement = document.createElement("TBODY");
		bodyElement.appendChild(trElement);
		this.timelineTable.appendChild(bodyElement);
		document.getElementById(this.divId).appendChild(this.timelineTable);
		this.adjustSlider();
	};
	this.createTimelineGrid = function () {
		this.gridDiv = document.createElement("span");
		this.gridDiv.id = "gridDiv";
		var gridTable = document.createElement("table");
		var trElement = document.createElement("tr");
		gridTable.appendChild(trElement);
		
		// The following are modified times to allow drawing the major tick in the timeline
		var startRangeForTimeline=Math.floor(this.startRange / 2) * 2;
		var endRangeForTimeline=Math.ceil(this.endRange / 2) * 2;;
		
		for (i = startRangeForTimeline; i <= endRangeForTimeline; i += 2) {
			var tdElement = document.createElement("td");
			tdElement.className = "grid-line";
			
			imgHeight=4;
			if (i % 10 == 0) {
			imgHeight=7;
			} 

			tdElement.innerHTML = "<img src=\""+this.whitePixel+"\" width=\"1\" height=\""+imgHeight+"\"/>";
			trElement.appendChild(tdElement);
		}
		bodyElement = document.createElement("TBODY");
		bodyElement.appendChild(trElement);
		gridTable.appendChild(bodyElement);

//this.gridDiv.appendChild(gridTable);
//this.gridDiv.innerHTML=gridTable.outerHTML;
//document.body.appendChild(this.gridDiv);
		this.gridDiv.appendChild(gridTable);
	};
	this.createTimelineSlider = function () {
		this.timelineSliderDiv = document.createElement("span");
		this.timelineSliderDiv.id = "timeline-slider";
		this.timelineSliderDiv.title = this.sliderTooltip;
	};
	this.adjustSlider = function () {
		var scale = (this.gridDiv.offsetWidth-8) / (this.endRange - this.startRange);
		var targetX = (this.sliderFrom - this.startRange) * scale -1+4 + this.getX(this.gridDiv);
		var targetY = this.getY(this.gridDiv);
		realWidth = scale * (this.sliderTo - this.sliderFrom);
		this.timelineSliderDiv.style.width = realWidth + 2;
		this.timelineSliderDiv.style.height = 16;
		this.timelineSliderDiv.style.left = targetX;
		this.timelineSliderDiv.style.top = targetY + 1;
	};
	this.getX = function (oElement) {
		var iReturnValue = 0;
		while (oElement != null) {
			iReturnValue += oElement.offsetLeft;
			oElement = oElement.offsetParent;
		}
		return iReturnValue;
	};
	this.getY = function (oElement) {
		var iReturnValue = 0;
		while (oElement != null) {
			iReturnValue += oElement.offsetTop;
			oElement = oElement.offsetParent;
		}
		return iReturnValue;
	};
	this.render();
}