var _url = "http://webcam.webblazer.de/json.php";
var _url_edit = "http://webcam.webblazer.de/json_edit.php";
var _scHeight = "480";
var _mcHeight = "540";
var _currentLabel = null;
var _currentContainer = null;

var webblazerContainer = null;
var mobotixContainer = null;
var mostViewedContainer = null;
var latestAddedContainer = null;
var serachContainer = null;
var addWebcamContainer = null;
var faqContainer = null;
var contactusContainer = null;
var impressumContainer = null;
var descriptionContainer = null;

var webblazerLabel = null;
var mobotixLabel = null
var mostViewedLabel = null
var latestAddedLabel = null;
var searchLabel = null;
var addWebcamLabel = null;
var faqLabel = null
var contactusLabel = null;
var impressumLabel = null;
var descriptionLabel = null;

var wcoSlider = null;
var wstSlider = null;
var wciSlider = null
var wcaSlider = null;

var mcoSlider = null;
var mciSlider = null;
var mdoSlider = null;

var mHeader = null;
var mBody = null;

var thumbnails = "http://webcam.webblazer.de/thumbnails/";

var popo = null;
var searcher = null;


//addLoadListener(initialize);
function initialize() {
 
    mHeader = document.getElementById("m_header");
    mBody = document.getElementById("m_body");
    
    webblazerContainer = document.getElementById("webblazer_container");
    mobotixContainer = document.getElementById("mobotix_container");
    mostViewedContainer = document.getElementById("mostviewed_container");
    latestAddedContainer = document.getElementById("latestadded_container");
    searchContainer = document.getElementById("search_container");
    addWebcamContainer = document.getElementById("addwebcam_container");
    faqContainer = document.getElementById("faq_container");
    contactusContainer = document.getElementById("contactus_container");
    impressumContainer = document.getElementById("impressum_container");
    descriptionContainer = document.getElementById("description_container");
    versionContainer = document.getElementById("version_container");
    adContainer = document.getElementById("ad_bar");

    webblazerContainer.style.display = "none";
    mobotixContainer.style.display = "none";//"block";
    mostViewedContainer.style.display = "none";
    latestAddedContainer.style.display = "none";
    searchContainer.style.display = "none";
    addWebcamContainer.style.display = "none";
    faqContainer.style.display = "none";
    contactusContainer.style.display = "none";
    impressumContainer.style.display = "none";
    descriptionContainer.style.display = "none";

    webblazerLabel = document.getElementById("webblazer_label");
    mobotixLabel = document.getElementById("mobotix_label");
    mostViewedLabel = document.getElementById("mostviewed_label");
    latestAddedLabel = document.getElementById("latestadded_label");
    searchLabel = document.getElementById("search_label");
    addWebcamLabel = document.getElementById("addwebcam_label");
    faqLabel = document.getElementById("faq_label");
    contactusLabel = document.getElementById("contactus_label");
    impressumLabel = document.getElementById("impressum_label");
    descriptionLabel = document.getElementById("description_label");
    versionLabel = document.getElementById("version_label");

    wcoSlider = document.getElementById("webblazer_country_slider");
    wstSlider = document.getElementById("webblazer_state_slider");
    wciSlider = document.getElementById("webblazer_city_slider");
    wcaSlider = document.getElementById("webblazer_category_slider");

    mcoSlider = document.getElementById("mobotix_country_slider");
    mciSlider = document.getElementById("mobotix_city_slider");
    mdoSlider = document.getElementById("mobotix_domain_slider");
	
	popo = new Popo("popo");
    searcher = new Searcher("search_container");
    
    var sHeight = window.screen.height;
    var mHeight = sHeight - 300;
    _scHeight = 30 * parseInt(mHeight/30);
    _mcHeight = _scHeight + 60;

    // showWebblazer();
    // showMostViewed();
}

function searchWebcam(i,e) {
	var keycode=(e)?e.which:event.keyCode;
	
	if(keycode == 13) {
		showSearchResult(i.value);
		storeQuery(i.value);
	}
}

function showSearchResult(query) {
	setMHeaderTitle("Search: " + query);
    changeLabel(searchLabel);
  	changeContainer(searchContainer);
	document.getElementById("search_input").value = query;
	searcher.find(query);	
}

function storeQuery(query) {
	document.getElementById("search_history").style.display = "block"
	if(typeof(queryList) == "undefined")
		queryList = document.getElementById("query_list");
	queryList.style.display = "block";
	if(!searcher.queryList[query]) {
		var li = document.createElement("li");
		var a1 = document.createElement("a");
		a1.innerHTML = query;
		a1.href="javascript:void(0);";
		a1.onclick = function () {
			showSearchResult(query);	
		}
		var a2 = document.createElement("a");
		a2.innerHTML = "X";
		a2.className = "remove";
		a2.href="javascript:void(0);";
		a2.onclick = function () {
			this.parentNode.parentNode.removeChild(this.parentNode);
			searcher.remove(query);
		}
		li.appendChild(a2);
		li.appendChild(a1);
		queryList.insertBefore(li, queryList.childNodes[0]);
		//queryList.appendChild(li);
	}
}

function hiddenSearchHistory() {
	document.getElementById("search_history").style.display = "none";
}
function showSearchHistory() {
	if(typeof(queryList) == "undefined")
		return;
	if(queryList.childNodes.length > 0)
		document.getElementById("search_history").style.display = "block";
}

function setMHeaderTitle(text, callback) {
    var div = document.createElement("div");
    div.className = "mtitle";
    
    if(callback) {
	div.style.backgroundColor = "#fff";
	var a = document.createElement("a");
	a.innerHTML = text;
	a.href = "javascript:void(0)";
	a.onclick = function() {
	    callback.call();
	}
	div.appendChild(a);
    } else {
	div.innerHTML = text;
    }
   
    div.style.height = "24px";
    mHeader.innerHTML = '';
    mHeader.appendChild(div);
}





function getSmallImg(title, path,callback, camId, dateEntered, mostViewed) {
   
    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";
    }
    
    var imd = new Image();
    imd.src = path;
    if(imd.complete) {
    	img.style.height = imd.height + "px";
    	img.style.width = imd.width + "px";
	if(imd.width > imd.height && imd.width > 160) {
	    img.style.height = (160*imd.height/imd.width) + "px";
	    img.style.width = "160px";

	} else if (imd.height > imd.width && imd.height > 160) {
	    img.style.width = (160*imd.width/imd.height) + "px";
	    img.style.height = "160px";
	}
    }
    imd.onload = function() {
	if(imd.width > imd.height && imd.width > 160) {
	    img.style.width = "160px";
	} else if (imd.height > imd.width && imd.height > 160) {
	    img.style.height = "160px";
	}
    }

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

    if(dateEntered) {
	var date = document.createElement("i");
	date.innerHTML = dateEntered;
	a.appendChild(date);
    }

    if(mostViewed){
	var view = document.createElement("i");
	view.innerHTML = mostViewed + " Views";
	a.appendChild(view);
    }

    if(callback){
    	a.camId = camId;
		a.href="javascript:void(0)";
		a.onclick = callback;
    }
    return a;
}


function getJsonFromReq(req) {
    var jsonText = req.responseText;
    var strippedJsonText = jsonText.substring("while(1);".length)
    var jsonObj = eval("(" +  strippedJsonText + ")");
    return jsonObj;
}

function parseJson(jsonTxt) {
    //var jsonTxt = this.req.responseText;
    var jsonObj = eval('(' + jsonTxt + ')');
    return jsonObj
}

function changeLabel(label) {
    if(!label) {
	alert("error: cannot find label");
	return false;
    }
    if(_currentLabel != label) {
	if(_currentLabel) 
	    removeClass(_currentLabel, "selected");
	_currentLabel = label;
	addClass(_currentLabel, "selected");
    }
    hiddenSearchHistory();
    return true;
}

function changeContainer(container) {
    if(!container) {
	alert("error: cannot find container");
	return false;
    }
    
    if(_currentContainer != container) {
	if(_currentContainer) 
	    _currentContainer.style.display = "none";
	_currentContainer = container;
	_currentContainer.style.display = "block";
    }
    return true;
}



// --------------------------------------------
function hasClass(target, classValue)
{
    var pattern = new RegExp("(^| )" + classValue + "( |$)");
    
    if (target.className.match(pattern))
    {
	return true;
    }
    
    return false;
}




function addClass(target, classValue)
{
    if (!hasClass(target, classValue))
    {
	if (target.className == "")
	{
	    target.className = classValue;
	}
	else
	{
	    target.className += " " + classValue;
	}
    }

    return true;
}




function removeClass(target, classValue)
{
    var removedClass = target.className;
    var pattern = new RegExp("(^| )" + classValue + "( |$)");
    
    removedClass = removedClass.replace(pattern, "$1");
    removedClass = removedClass.replace(/ $/, "");
    
    target.className = removedClass;
    
    return true;
}

function trim(str) {
    return str.replace(/(^\s*)|(\s*$)/g,"");
}

function createTable(dataList, headerList,caption) {
	var table = document.createElement("table");
	if(caption) {
		var cap = table.createCaption();
		cap.innerHTML = caption;	
	}
	
	if(headerList) {
		var thead = document.createElement("thead");
		table.appendChild(thead);
		
		var htr = document.createElement("tr");
		for(var k=0; k<headerList.length; k++) {
			var th = document.createElement("th");
			th.innerHTML = headerList[k];
			htr.appendChild(th);	
		}
		thead.appendChild(htr);
	}
	
	
	var tbody = document.createElement("tbody");
	table.appendChild(tbody);
	
	var length = dataList[0].length;
	for(var i=0; i<length; i++) {
		var tr = document.createElement("tr");
		for(var j=0; j<dataList.length; j++) {
			var td = document.createElement("td");
			td.innerHTML = dataList[j][i];	
			tr.appendChild(td);
		}	
		tbody.appendChild(tr);
	}
	return table;
	
}

/*
 * application links
 */
function showDescription() {
    adContainer.style.display = "block";
    setMHeaderTitle("Webcam for iPhone or iPod Touch");
    changeLabel(descriptionLabel);
    changeContainer(descriptionContainer);
    if(descriptionContainer.loaded) {
	return;
    }
}

function showVersionHistory() {
    adContainer.style.display = "block";
    setMHeaderTitle("Version History");
    changeLabel(versionLabel);
    changeContainer(versionContainer);
    if(versionContainer.loaded) {
	return;
    }
}

function showFAQ() {
    mHeader.style.width = "911px";
    adContainer.style.display = "none";
    setMHeaderTitle("FAQ");
    changeLabel(faqLabel);
    changeContainer(faqContainer);
    if(faqContainer.loaded) {
	return;
    }
}

/*
 * contact links
 */
function showContactUs() {
    adContainer.style.display = "block";
    setMHeaderTitle("Contact Us");
    changeLabel(contactusLabel);
    changeContainer(contactusContainer);
    if(contactusContainer.loaded) {
	return;
    }
}

function showImpressum() {
    adContainer.style.display = "block";
    setMHeaderTitle("Impressum");
    changeLabel(impressumLabel);
    changeContainer(impressumContainer);
    if(impressumContainer.loaded) {
	return;
    }
}