// show Webblazer Directory Cameras --------------------
function showWebblazer() {
    adContainer.style.display = "block";
    setMHeaderTitle("Webblazer Directory");
    changeLabel(webblazerLabel);
    changeContainer(webblazerContainer);
    if(webblazerContainer.loaded) {
	return;
    }
    showWebblazerCountry();
}

function showWebblazerCountry() {
    //    var slider = document.getElementById("webblazer_country_slider");
    showSliderContent(wcoSlider, "", showWebblazerState);
}


function showWebblazerState() {
    var urlKey = "id_country=" + this.index;
    showSliderContent(wstSlider, urlKey, showWebblazerCity);
}

function showWebblazerCity() {
    var urlKey = "id_state=" + this.index;
    if(this.index == "-1")
	urlKey = this.urlKey + "&" +  urlKey;
    showSliderContent(wciSlider, urlKey, showWebblazerCategory);
}

function showWebblazerCategory() {
    var urlKey = "id_city=" + this.index;
    showSliderContent(wcaSlider, urlKey, showWebblazerWebcam);
}

function showWebblazerWebcam() {
    var urlKey = "id_category=" + this.index;
    urlKey = this.urlKey + "&" + urlKey
    var url = _url + "?" + urlKey + "&" + siteKey;
    var container = document.getElementById("webblazer_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 loader = new net.ContentLoader(
                                       url, 
                                       function() {
                                       loadWebblazerWebcam(this.req, urlKey);
                                       });
    
}

function loadWebblazerWebcam(req, urlKey) {
    var camList = getJsonFromReq(req);
    var ul = getSmallImgUlList2(camList);
    ul.infoKey = "webblazer_"+ urlKey;
    var container = document.getElementById("webblazer_webcam");
    container.appendChild(ul);
    if(container.selectedItem)
    	container.selectedItem.display = "none";
    container.selectedItem = ul;
    container.ulList[urlKey] = ul;
    webblazerContainer.loaded=true;
}




function getSmallImgUlList2(camList) {
    var ul = document.createElement("ul");
    for(var cam in camList) {
	var title = camList[cam];
	var li = document.createElement("li");
	var path = thumbnails + "128/" + cam + ".jpg";
	li.appendChild(getSmallImg(title,path, showWebblazerWebcamInfo, cam));
	ul.appendChild(li);
    }
    return ul;
}



function showWebblazerNav() {
    //alert("go");
}
//------------------------------------------------------


// show most viewed Cameras ----------------------------
function showMostViewed() {
    adContainer.style.display = "block";
    setMHeaderTitle( "Most Viewed Cameras");
    changeLabel(mostViewedLabel);
    changeContainer(mostViewedContainer);
    if(mostViewedContainer.loaded)
	return;
    var url = _url +"?most_viewed_cams=1" + "&" + siteKey;
    var loader = new net.ContentLoader(url, loadMostViewed);
}

function loadMostViewed() {
    var camList = getJsonFromReq(this.req);
    var ul = getSmallImgUlList(camList);
    ul.infoKey = "most_viewed";
    mostViewedContainer.appendChild(ul);
    mostViewedContainer.loaded = true;
}

//------------------------------------------------------

// show Latest Added Cameras ------------------------------
function showLatestAdded() {
    adContainer.style.display = "block";
    setMHeaderTitle("Latest Added Cameras");
    changeLabel(latestAddedLabel);
    changeContainer(latestAddedContainer);
    if(latestAddedContainer.loaded) {
	return;
    }
    var url = _url +"?latest_cams=1" + "&" + siteKey;
    var loader = new net.ContentLoader(url, loadLatestAdded);
    
}

function loadLatestAdded() {
    var camList = getJsonFromReq(this.req);
    var ul = getSmallImgUlList(camList);
    ul.infoKey = "latest_added";
    latestAddedContainer.appendChild(ul); 
    latestAddedContainer.loaded = true;
}
//----------------------------------------------------------
//add and Edit webcam ---------------------------------------------
var currentEditWebcam = null;
function showAddWebcam() {
    adContainer.style.display = "block";
    if(document.getElementById("addwebcam_result").style.display == "block") 
    	addAnotherWebcam();
    //document.getElementById("addwebcam_before").style.display = "block";
    //document.getElementById("addwebcam_result").style.display = "none";
    setMHeaderTitle("Add Webcam");
    changeLabel(addWebcamLabel);
    changeContainer(addWebcamContainer);
    showCountries();
    showCategories();
    showVerification();
    currentEditWebcam = null;
}

function showEditWebcam() {
    popo.hidden();
    currentEditWebcam = this.webcam;
    //changeLabel(addWebcamLabel);
    changeContainer(addWebcamContainer);
    
    setMHeaderTitle("Edit Webcam");
    //currentEditWebcam = webcam;
    showCountries();
    showCategories();
    showVerification();
    document.add_user_webcam.title_english.value = this.webcam.title;
    //document.add_user_webcam.phrase.value = "";
    //document.add_user_webcam.name_country.value = this.webcam.title_english;
    //document.add_user_webcam.name_state.value = this.webcam.name_state;
    //document.add_user_webcam.name_city.value = this.webcam.name_city;
    //document.add_user_webcam.name_category.value = this.webcam.name_category;
    document.add_user_webcam.url.value = this.webcam.url;
    document.add_user_webcam.url_info.value = this.webcam.url_info;
    document.add_user_webcam.info.value = this.webcam.info;
    document.add_user_webcam.gps_lat.value = this.webcam.gps_lat;
    document.add_user_webcam.gps_lon.value = this.webcam.gps_lon;
    document.add_user_webcam.id_modified.value = this.webcam.id;
}

function addAnotherWebcam() {
    addAnotherWebcamWithTheSameData();
    var id_country = document.add_user_webcam.id_country;
    id_country.selectedIndex = 1;
    showStates(id_country);
    
    var id_state = document.add_user_webcam.id_state;
    showCities(id_state);
    
    document.add_user_webcam.title_english.style.backgroundColor = "#fff";
    document.add_user_webcam.url.style.backgroundColor = "#fff";
    document.add_user_webcam.phrase.style.backgroundColor = "#fff";
    document.add_user_webcam.title_english.value = "";
    document.add_user_webcam.phrase.value = "";
    document.add_user_webcam.name_country.value = "";
    document.add_user_webcam.name_state.value = "";
    document.add_user_webcam.name_city.value = "";
    document.add_user_webcam.name_category.value = ""
    document.add_user_webcam.url.value = "";
    document.add_user_webcam.url_info.value = "";
    document.add_user_webcam.info.value = ""
    document.add_user_webcam.gps_lat.value = "0.0";
    document.add_user_webcam.gps_lon.value = "0.0";
    
    showNewCategory(document.add_user_addwebcam.id_category);
}

function addAnotherWebcamWithTheSameData() {
    document.getElementById("addwebcam_before").style.display = "block";
    document.getElementById("addwebcam_result").style.display = "none";
    showCountries();
    showCategories();
    showVerification();
}

function showCountries() {
    var select = document.getElementById("addwebcam_country");
    var countryOptions = select.getElementsByTagName("OPTION"); 
    if(countryOptions.length > 1) {
        if(currentEditWebcam) {
            for(var option in countryOptions) {
                if(countryOptions[option].value == currentEditWebcam.id_country)
                    countryOptions[option].selected = true; 	
            }	
            showStates(select);
        }
        return;
    }
    select.disabled = true;
    var url = _url_edit + "?" + siteKey;
    var loader = new net.ContentLoader(
                                       url, 
                                       function() {
                                       loadCountries(select, this.req); 
                                       });
}
function loadCountries(target, req) {
    var list = getJsonFromReq(req);
    for(var id in list) {
	var option = document.createElement("option");
	option.value = id;
	option.innerHTML = list[id];
	if(currentEditWebcam && id == currentEditWebcam.id_country)
            option.selected = true;
	target.appendChild(option);
    }
    if(!currentEditWebcam)
    	target.selectedIndex = "1";
    target.disabled = false;
    showStates(target);
}
var stateListJson = {};
function showStates(cs) {
    var select  = document.getElementById("addwebcam_state");
    
    var id_country = cs.options[cs.selectedIndex].value;
    var newCountry = document.getElementById("new_country");
    if(id_country == "-2") {
	newCountry.style.display = "table-row";
    }else
	newCountry.style.display = "none";
    
    select.disabled = true;
    if(stateListJson[id_country]) {
	loadStates(select, null,  id_country,stateListJson[id_country]);
	return;
    }
    var url = _url_edit + "?id_country=" + id_country + "&" + siteKey;
    var loader = new net.ContentLoader(
                                       url, 
                                       function() {
                                       loadStates(select, this.req, id_country);
                                       });
}
function loadStates(target, req, id,list) {
    target.innerHTML = '';
    var option1 = document.createElement("option");
    option1.value = "-2";
    option1.innerHTML = "- New State";
    var option2 = document.createElement("option");
    option2.value= "-1";
    option2.innerHTML = "- No State"
    target.appendChild(option1);
    target.appendChild(option2);
    if(!list) {
	list = getJsonFromReq(req);
	stateListJson[id] = list;
    }
    for(var id in list) {
	var option = document.createElement("option");
	option.value = id;
	option.innerHTML = list[id];
	if(currentEditWebcam && id == currentEditWebcam.id_state)
            option.selected = true;
	target.appendChild(option);
    }
    target.disabled = false;
    document.getElementById("new_state").style.display = "table-row";
    showCities(target);
}
var cityListJson = {};
function showCities(cs) {
    var id_state = cs.options[cs.selectedIndex].value;
    var selectCountry = document.getElementById("addwebcam_country");
    var id_country = selectCountry.options[selectCountry.selectedIndex].value
    
    var newState = document.getElementById("new_state");
    if(id_state == "-2") {
        newState.style.display = "table-row";
    } else
	newState.style.display = "none";
    var select = document.getElementById("addwebcam_city");
    select.disabled = true;
    if(cityListJson[id_state+ "_" + id_country]) {
        loadCities(select, null,  id_country,cityListJson[id_state+ "_" + id_country]);
        return;
    }
    var url = _url_edit + "?id_country=" + id_country + "&id_state=" + id_state + "&" + siteKey;
    var loader = new net.ContentLoader(
                                       url,
                                       function() {
                                       loadCities(select, this.req, id_state);
                                       });    
    
}
function loadCities(target, req,id, list) {
    target.innerHTML = '';
    var option1 = document.createElement("option");
    option1.value = "-2";
    option1.innerHTML = "- New City";
    target.appendChild(option1);
    if(!list) {
        list = getJsonFromReq(req);
	cityListJson[id] = list;
    }
    for(var id in list) {
        var option = document.createElement("option");
        option.value = id;
        option.innerHTML = list[id];
        if(currentEditWebcam && id == currentEditWebcam.id_city)
            option.selected = true;
        target.appendChild(option);
    }
    target.disabled = false;
    document.getElementById("new_city").style.display = "table-row"
    showNewCity(target);
}

function showNewCity(cs) {
    var id_city = cs.options[cs.selectedIndex].value;
    var newCity = document.getElementById("new_city");
    if(id_city == "-2") {
        newCity.style.display = "table-row";
    }else
        newCity.style.display = "none";
}
function showCategories() {
    var select = document.getElementById("addwebcam_category");
    var categoryOptions = select.getElementsByTagName("OPTION");
    if(categoryOptions.length > 1) {
        if(currentEditWebcam) {
            for(var option in categoryOptions) {
                if(categoryOptions[option].value == currentEditWebcam.id_category)
                    categoryOptions[option].selected = true; 	
            }	
        }
        return;
    }
    var url = _url_edit + "?category_all=1" + "&" + siteKey;
    var loader = new net.ContentLoader(
                                       url,
                                       loadCategories);
}
function loadCategories() {
    var select = document.getElementById("addwebcam_category");
    var list = getJsonFromReq(this.req);
    for(var id in list) {
	var option = document.createElement("option");
	option.value = id;
	option.innerHTML = list[id];
	if(currentEditWebcam && id == currentEditWebcam.id_category)
            option.selected = true;
	select.appendChild(option);
    }
    showNewCategory(select);
}
function showNewCategory(target) {
    var tr = document.getElementById("new_category");
    if(target.options[target.selectedIndex].value == "-2") {
	tr.style.display = "table-row";
    } else {
	tr.style.display = "none";
    }
}
function showVerification() {
    var url = _url_edit + "?verificate=-1" + "&" + siteKey;
    var loader = new net.ContentLoader(url, loadVerification);
}
function loadVerification() {
    var v = getJsonFromReq(this.req);
    var date = new Date();
    document.getElementById("img_verification").src = v.img + "?d=" + date.getTime() ;
}
function sendAddWebcam() {
    var title_english = document.add_user_webcam.title_english;
    if(trim(title_english.value) == '') {
	alert('Please add an english title.')
	title_english.style.backgroundColor = "red";
	title_english.focus();
	return;
    }
    var url = document.add_user_webcam.url;
    if(trim(url.value) == '') {
	alert('Please add an url for the webcam.');
	url.style.backgroundColor = "red";
	url.focus();
	return;
    }
    
    var phrase = document.add_user_webcam.phrase;
    if(trim(phrase.value) == '') {
	alert('Please enter a phrase for the captcha.');
	phrase.style.backgroundColor = "red";
	phrase.focus();
	return;
    }
    var params = {};
    params.title_english = trim(title_english.value);
    params.id_country = document.add_user_webcam.id_country.value;
    params.name_country = trim(document.add_user_webcam.name_country.value);
    
    params.id_state = document.add_user_webcam.id_state.value;
    params.name_state = trim(document.add_user_webcam.name_state.value);
    
    params.id_city =document.add_user_webcam.id_city.value;
    params.name_city = trim(document.add_user_webcam.name_city.value);
    
    params.id_category = document.add_user_webcam.id_category.value;
    params.name_category = trim(document.add_user_webcam.name_category.value);
    
    params.url = trim(document.add_user_webcam.url.value);
    params.url_info = trim(document.add_user_webcam.url_info.value);
    params.gps_lat = trim(document.add_user_webcam.gps_lat.value);
    params.gps_lon = trim(document.add_user_webcam.gps_lon.value);
    params.submitters_email = trim(document.add_user_webcam.submitters_email.value);
    params.id_modified = document.add_user_webcam.id_modified.value;
    params.info = trim(document.add_user_webcam.info.value);
    params.phrase = trim(document.add_user_webcam.phrase.value);
    
    var paramsQuery = jsonToQuery(params);
    var url = _url_edit + "?addwebcam=1" + "&" + siteKey;
    var loader = new net.ContentLoader(
                                       url,
                                       loadAddWebcam,
                                       null,
                                       'POST',
                                       paramsQuery);
    
}

function loadAddWebcam() {
    var data = getJsonFromReq(this.req);
    if(data.status == "error") {
	alert(data.message);
	var element = document.add_user_webcam[data.name];
	element.style.backgroundColor = "red";
	element.focus();
	return;
    } else if(data.status == "ok") {
	document.getElementById("addwebcam_before").style.display = "none";
	var addwebcam_result = document.getElementById("addwebcam_result");
	addwebcam_result.style.display = "block";
	addwebcam_result.innerHTML = data.html + "<br/><br/>";
	var a = document.createElement("a");
	a.innerHTML = "add another one";
	a.href="javascript:void(0)";
	a.onclick = addAnotherWebcam;
	addwebcam_result.appendChild(a);
        var txt = "  ||  ";
        var newTextNode = document.createTextNode(txt);
	addwebcam_result.appendChild(newTextNode);
	var atwo = document.createElement("a");
	atwo.innerHTML = "add another one using the same data";
	atwo.href="javascript:void(0)";
	atwo.onclick = addAnotherWebcamWithTheSameData;
	addwebcam_result.appendChild(atwo);
	var br = document.createElement("br");
	addwebcam_result.appendChild(br);
    }
}

function jsonToQuery(data) {
    var query = '';
    for(var id in data) {
	query += id + "=" + data[id] + "&";
    }
    if(query.length > 0)
	query = query.substring(0, query.length -1);
    return query;
}
//---------------------------------------------------
function getSmallImgUlList (camList) {
    var ul = document.createElement("ul");
    var size = 0;
    for(var cam in camList) {
	var title = camList[cam].title_english;
	//var path = camList[cam].image_path;
	var path = thumbnails + "128/" + cam + ".jpg";
	var date_entered = camList[cam].date_entered;
	var most_viewed = camList[cam].most_viewed;
	
	var li = document.createElement("li");
	var a = getSmallImg(title, path, showWebblazerWebcamInfo, cam, date_entered, most_viewed);
	li.appendChild(a);
	ul.appendChild(li);
	size ++;
    }
    return ul;
}


function showWebblazerWebcamInfo() {
    var pp = this.parentNode.parentNode;
    popo.setTitle("No Title");
    
    if(popo.body.selectedItem && popo.body.selectedItem[this.camId])
	popo.setBody(this.camId);
    else {
	var container = document.createElement("div");
	container.innerHTML = "loading";
	popo.setBody(this.camId, container);
	var url = _url +"?id_webcam=" + this.camId + "&" + siteKey;
    	var loader = new net.ContentLoader(
                                           url, 
                                           function() {
                                           loadWebblazerWebcamInfo(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 = showWebblazerWebcamInfo;
	    
	    var img = document.createElement("img");
	    img.src = thumbnails + "60/" + aList[i].camId + ".jpg";
	    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);
}

function loadWebblazerWebcamInfo(req, target) {
    target.innerHTML = "";
    var webcam = getJsonFromReq(req);
    
    var imgContainer = document.createElement("div");
    imgContainer.className = "img_container";
    var img = document.createElement("img");
    img.src = thumbnails + "320/" + webcam.id + ".jpg";
    img.onerror = function () {
		this.src = "img/missing_image320.png"; //img/missing_image320.png
		//this.parentNode.onclick = null;
	}
    
    imgContainer.appendChild(img);
    
    popo.setTitle(webcam.title);
    
    var infoContainer = document.createElement("div");
    infoContainer.className = "info_container";
    //var p1 = document.createElement("p");
    var labelList = ['<label>Category:</label>','<label>Info:</label>', '<label>Views:</label>','<label>Date:</label>'];
    var contentList = [webcam.title_category, webcam.info, webcam.most_viewed,webcam.date_entered];
    var dataList = [labelList, contentList];
    // var table1 = createTable(dataList,null, webcam.title);
    var table1 = createTable(dataList);
    
    /*p1.innerHTML = '<strong>' + webcam.title + '</strong>'
     +	'<label>Category:</label><span>' + webcam.title_category + '</span><br/>'
     +	'<label>Info:</label><span>' + webcam.info + '</span><br/>'
     +	'<label>Views:</label><span>' + webcam.most_viewed + '</span><br/>'
     +	'<label>Date:</label><span>' + webcam.date_entered+ '</span><br/>'; */
    
    infoContainer.appendChild(table1);
    
    var labelList2 = ['<label>Country:</label>','<label>State:</label>', '<label>City:</label>','<label>GPS LAT:</label>','<label>GPS LON:</label>'];
    var contentList2 = [webcam.title_country, webcam.title_state, webcam.title_city,webcam.gps_lat,webcam.gps_lon];
    var dataList2 = [labelList2, contentList2];
    var table2 = createTable(dataList2);
    /*
     var p2 = document.createElement("p");
     p2.innerHTML = '<label>Country:</label><span>' + webcam.title_country + '</span><br/>'
     +	'<label>State:</label><span>' + webcam.title_state + '</span><br/>'
     +	'<label>City:</label><span>' + webcam.title_city + '</span><br/>'
     +	'<label>GPS LAT:</label><span>' + webcam.gps_lat + '</span><br/>'
     +	'<label>GPS LON:</label><span>' + webcam.gps_lon+ '</span><br/>';*/
    infoContainer.appendChild(table2);
    
    var urlContainer = document.createElement("div");
    urlContainer.className = "url_container";
    urlContainer.innerHTML 
    = '<label>Webcam Address:</label><a href=\"' +  webcam.url + '\" target=\"_blank\">' +webcam.url + '</a>'
    + '<label>More Info:</label><a href=\"' +  webcam.url_info + '\" target=\"_blank\">' + webcam.url_info + '</a>';
    
    var toolbarDiv = document.createElement("div");
    toolbarDiv.setAttribute("class", "smallbottombar");
    var editA = document.createElement("a");
    editA.href = "javascript:void(0)";
    editA.onclick = showEditWebcam;
    editA.setAttribute("class", "lastChild white smallbutton");
    editA.webcam = webcam;
    editA.innerHTML = 'Edit Webcam';
    toolbarDiv.appendChild(editA);
    
    infoContainer.appendChild(urlContainer);
    infoContainer.appendChild(toolbarDiv);
    
    target.appendChild(infoContainer);
    target.appendChild(imgContainer);
    
}


/*
 "url":"http:\/\/142.22.58.150\/axis-cgi\/jpg\/image.cgi",
 "url_info":"http:\/\/www.vanaqua.org\/home\/",
 
 "title":"Beluga cam",
 "title_category":"Animals",
 "info":"Watch the Baby Beluga and her mom swim around :-)))))\r\n\r\nMichael",
 "most_viewed":"5539",
 "date_entered":"2008-10-03 22:54:19",
 
 
 "title_country":"Canada",
 "title_state":"British Columbia",
 "title_city":"Vancouver",
 "gps_lat":"0.000000",
 "gps_lon":"0.000000",
 */