var httpReq;

/**
* load an external resource
* @param	string : url - url of the external resource
* @param	string : processReqChange - name of the callback function
*/
function loadXMLDoc(url,processReqChange){
    // branch for native XMLHttpRequest object
    if( window.XMLHttpRequest ){
        httpReq = new XMLHttpRequest();
        httpReq.onreadystatechange = processReqChange;
        httpReq.open("GET",url,true);
        httpReq.send(null);
    // branch for IE/Windows ActiveX version
    }else if( window.ActiveXObject ){
        httpReq = new ActiveXObject("Microsoft.XMLHTTP");
        if (httpReq) {
            httpReq.onreadystatechange = processReqChange;
            httpReq.open("GET",url,true);
            httpReq.send();
        }
    }
}

/**
* @function historyShow(id)
* @param	id : $string
*/
function historyShow(id, anchor, images_arr){
    // first mark the timepoint clicked after unmarking all
    // fetch all a-Elements in the doc
    var a_arr = (document.getElementsByTagName('a'));
    // test if their className is something like 'timepoint_'
    for(i in a_arr) {
        var a = a_arr[i];
        var s = new String(a.className);
        if (s.indexOf('timepoint_') != -1) {
            // It's a timepoint link! Unmark it!
            a.className = 'timepoint_off';
        }
    }
    // finally mark the anchor that started all this
    if (anchor) {
        anchor.className = 'timepoint_on';
    }
    
	// set the images
	setImages(images_arr);    
	
    // Now the important stuff: XMLHTTP
	var servletUrl = '../servlets/historie.php?id='+escape(id);
	loadXMLDoc(servletUrl,historyShowHandleXml);
	

}

/**
* callback-handler for the XmlHttpRequest-object
*/
function historyShowHandleXml(){
	if( httpReq && httpReq.readyState==4 ){
		var timelineMonitor = document.getElementById("timelineMonitor");
		timelineMonitor.innerHTML = httpReq.responseText;
		
		loadImage(0)
	};
		

}

/**
*
*/
function historyShowNiceTitle(evt,ref){
	evt = evt ? evt : window.event;
	var div = document.createElement("div");
	var mouseX = (evt.pageX?evt.pageX:evt.clientX);
	
	div.id = "nicetitle";
	div.innerHTML = ref.title;
	
	div.style.left = (mouseX+9)+"px";
	div.style.top = (evt.pageY?evt.pageY:evt.clientY)+15+"px";
	div.innerHTML = ref.title;

	var text = ref.getElementsByTagName("span");
	if( text.length==1 ){
		div.innerHTML = text[0].innerHTML;
	}else{
		alert("Es wurde kein Nicetitle angegeben");
	}
	document.body.appendChild(div);
}

/**
*
*/
function historyHideNiceTitle(){
	var nicetitle = document.getElementById("nicetitle");
	nicetitle.parentNode.removeChild(nicetitle)
}


var timepoint_images = new Array();
var timepoint_images_idx = new Array();
/**
*
*/
function setImages(images_arr){
	obj = document.getElementById('timeline-image-switch');
	if (images_arr.length > 1 && obj) {
		obj.style.display = 'block'; 
	} else if (obj) {
		obj.style.display = 'none'; 
	}
	timepoint_images = images_arr;
	timepoint_images_idx = 0;

}

/**
*
*/
function showImage(dir){
	// dir should be -1 or +1
	new_idx = timepoint_images_idx + dir;
	if (new_idx > timepoint_images.length-1) {
		new_idx = 0;
	} else if (new_idx < 0) {
		new_idx = timepoint_images.length-1;
	}
	loadImage(new_idx);
}


function loadImage(idx){
	// Load first image	
	timepoint_images_idx = idx;
	obj = document.getElementById('timelineMonitorImage');
	if (obj && timepoint_images.length > 0) {
		obj.src = timepoint_images[idx];
	}
}