// show Mobotix Directory Cameras ------------
function showMobotix() {
    adContainer.style.display = "block";
    setMHeaderTitle("Mobotix Directory");
    changeLabel(mobotixLabel);
    changeContainer(mobotixContainer);
    if(mobotixContainer.loaded)
	return;
    showMobotixCountry();
}

function showMobotixNav() {

}

function showMobotixCountry() {
    var urlKey = "mobotix=1";
    showSliderContent(mcoSlider, urlKey, showMobotixCity);
}

function showMobotixCity() {
    var urlKey = this.urlKey + "&country=" + this.index;
    showSliderContent(mciSlider, urlKey, showMobotixDomain);
}

function showMobotixDomain() {
    var urlKey = this.urlKey + "&city=" + this.index;
    showSliderContent(mdoSlider, urlKey, showMobotixWebcam);
}
function showMobotixWebcam() {
    var urlKey =  this.urlKey + "&domain=" + this.index;
    var container = document.getElementById("mobotix_webcam");
 
    if(container.selectedItem) {
	container.selectedItem.style.display = "none";
    }
    if(!container.ulList)
	container.ulList = {};
    if(container.ulList[urlKey]){
	container.ulList[urlKey].style.display = "block";
	container.selectedItem = container.ulList[urlKey];
	return;
    }
    
    var url = _url + "?" + urlKey + "&" + siteKey;
    var loader = new net.ContentLoader(
	url, 
	function() {
	    loadMobotixWebcam(this.req, urlKey);
	});
 
 
}

function loadMobotixWebcam(req, urlKey) {
    var data = getJsonFromReq(req);
    var camList = data[1];
    
    var container = document.getElementById("mobotix_webcam");
    var ul = document.createElement("ul");
    for(var id in camList) {
	var li = document.createElement("li");
	var title = camList[id].title;
	var path = "http://webcam.webblazer.de/mobotix.php?img=" +camList[id].link_tn;
	//var path = "http://webcam.webblazer.de/mobotix/cameralive.php?cameraid=" + id;
	var a = getSmallImg(title, path, showMobotixWebcamInfo);
	a.camId = id;
	//var img = a.getElementsByTagName("IMG")[0];
	//img.src += "?acc=yRb9x872b0782y3fDzy20938777";
	li.appendChild(a);
	
	ul.appendChild(li);
    }
    container.appendChild(ul);
    ul.infoKey = urlKey;
    container.ulList[urlKey] = ul;
    if(container.selectedItem)
    	container.selectedItem.display = "none";
    container.selectedItem = ul;

    mobotixContainer.loaded = true;
}


function getMobotixSmalImg(title, path) {
   
    var a = document.createElement("a");
   
 
    var warp = document.createElement("div");
    warp.className = "warp";
    var img = document.createElement("img");
    img.src = path;
    img.onerror = function () {
	img.src = "img/missing_image.png";
	img.style.width = "90px";
	img.style.height = "90px";
    }

    warp.appendChild(img);
    a.appendChild(warp);

    var tl = document.createElement("strong");
    if(title.length > 20)
	title = title.substring(0, 18) + "...";
    tl.innerHTML = title;
    a.appendChild(tl);
    return a;

    
}
//--------------------------------------------

function showMobotixWebcamInfo() {
    var pp = this.parentNode.parentNode;
    popo.setTitle("Mobotix");
    
    if(popo.body.selectedItem && popo.body.selectedItem[this.camId])
	popo.setBody("mobotix_" + this.camId);
    else {
	var container = document.createElement("div");
	container.innerHTML = "loading";
	popo.setBody(this.camId, container);
	var url = _url +"?"+ pp.infoKey + "&linkid=" + this.camId + "&" + siteKey;
    	var loader = new net.ContentLoader(
    	    url, 
    	    function() {
    		loadMobotixWebcamInfo(this.req,container);
    	    });
    }
    var aList = pp.getElementsByTagName("A");
    var infoKey = pp.infoKey;
    if(popo.slider.itemList && popo.slider.itemList[infoKey]) 
	popo.setSlider(pp.infoKey);
    else {
	var ul = document.createElement("ul");
	ul.infoKey = pp.infoKey;
	popo.setSlider(pp.infoKey, ul);
	
	
	var ulWidth = 0;
	for(var i=0; i < aList.length; i++) {
	    var li = document.createElement("li");
	    var a = document.createElement("a");
	    a.href = "javascript:void(0)";
	    a.camId = aList[i].camId;
	    a.onclick = showMobotixWebcamInfo;
	    
	    var img = document.createElement("img");
	    img.src = aList[i].childNodes[0].src;
	    img.style.width = "80px";
	    img.style.height = "60px";
	    img.onerror = function () {
		this.src = "img/missing_image.png";
		this.style.width = "60px";
		this.style.height= "60px";
		this.parentNode.onclick = null;
	    }
	    li.appendChild(a);
	    a.appendChild(img);
	    ul.appendChild(li);
	    
	    ulWidth += 120;
	}
	ul.style.width = ulWidth + "px";
	ul.step = 120;
	ul.speed = 6;
	ul.style.left = "0px";
	ul.style.top = "0px";
    }
    /*
	
	*/
    ul = popo.slider.itemList[infoKey];
    if(pp != ul) {
	if(ul.selectedItem) 
	    removeClass(ul.selectedItem, "selected");
	
	var saList = ul.getElementsByTagName("A");
	var selectedPos = 0;
	for(var k=0; k<aList.length; k++) {
	    if(aList[k] == this) {
		addClass(saList[k], "selected");
		ul.selectedItem = saList[k];
		break;
	    }
	    selectedPos -= 1;//120;
	} 
	selectedPos = parseInt(selectedPos / 6) * 720;
	ul.style.left = selectedPos + "px";
    } else {
	if(pp.selectedItem)
	    removeClass(pp.selectedItem, "selected");
	pp.selectedItem = this;
	addClass(this, "selected");
    }
    moveSlider(popo.slider.itemList[infoKey], true);
}
/*<div align="center">
<div style="position: relative;"><div style="position: absolute; top: 0px; left: 0px; z-index: 1;"><img width="700" border="0" id="webcam928" name="webcam928" src="http://www.mobotix.ro/ro/cam-acces-privat.php?i=928&amp;time=1248444068082"/><div style="position: absolute; top: 50%; left: 50%; margin-top: -24px; margin-left: -32px; z-index: 10;"><a target="_blank" title="Clic pentru a deschide fluxul de imagini in timp real" href="http://www.mobotix.ro/ro/camere_supraveghere_js_928.html"><img width="64" height="48" border="0" alt="Clic pentru a deschide fluxul de imagini in timp real" src="http://www.mobotix.ro/ro/images/play.png"/></a></div></div></div>
</div>*/
function loadMobotixWebcamInfo(req, target) {
    target.innerHTML = "";
    var webcam = getJsonFromReq(req);
    
    var imgContainer = document.createElement("div");
    imgContainer.className = "img_container";
    var img = document.createElement("img");
    img.src = "http://www.mobotix.ro/ro/cam-acces-privat.php?i=" + webcam.link_id;
    img.style.width = "400px";
    img.style.height = "300px"; //1024px × 768px
	//img.src = thumbnails + "320/" + webcam.id + ".jpg";
	var a = document.createElement("a");
	a.href = "http://webcam.webblazer.de/mobotix.php?cameraid=" + webcam.link_id;//1043
	a.target = "_blank";
	a.appendChild(img);
    imgContainer.appendChild(a);
    
    
    var infoContainer = document.createElement("div");
    infoContainer.className = "info_container";
    //var p1 = document.createElement("p");
    var labelList = ['<label>Country:</label>','<label>City:</label>', '<label>Domain:</label>'];
    var contentList = [webcam.country, webcam.city, webcam.domain];
    var dataList = [labelList, contentList];
    var table1 = createTable(dataList,null, webcam.title);
    
  
    infoContainer.appendChild(table1);
    
    var urlContainer = document.createElement("div");
    urlContainer.className = "url_container";
    urlContainer.innerHTML = '<lable>Powered By:</label><a href=\"' +  webcam.powered_by + '\" target=\"_blank\">' +webcam.powered_by + '</a>'
	+ '<lable>More Info:</label><a href=\"' +  webcam.link_live + '\" target=\"_blank\">' +webcam.link_live + '</a>'
    infoContainer.appendChild(urlContainer);
    
    target.appendChild(infoContainer);
    target.appendChild(imgContainer);

    
    
}