var pos = "";
var i = 0;
var temp;
var cx;
var current = "cells";
function showPosition(position) {
    var lat = 31;
    var lon = 35;
    lat = (position.coords.latitude);
    lon = (position.coords.longitude);
        pos += "lat=" +
        lat
        + "&lon=" +
        lon;

}
function failAccess() {
    alert('Permission was denied');
}
navigator.geolocation.getCurrentPosition(showPosition,failAccess);
function switchTemUnits(){
    if(current=="cells") {
        celToFar();
        console.log(temp);
    }
    else if(current=="far")
        farToCel();
}

function celToFar(){
    temp = (temp*(9/5))+32;
    var aaz = document.getElementById("aaz");
    aaz.innerHTML = temp.toFixed(2);
    document.getElementById("tem").innerHTML = 'F';
    current = "far";
    console.log('celToFar');
}

function farToCel(){
    temp = ((temp-32)*(5/9));
    var aaz = document.getElementById("aaz");
    aaz.innerHTML = temp.toFixed(2);
    document.getElementById("tem").innerHTML = 'C';
    current = "cells";
    console.log('farToCel');
}



var request = new XMLHttpRequest();
var weatherId = document.getElementById("weather");

request.open("GET","http://api.openweathermap.org/data/2.5/forecast?lat=31.609468&lon=35.101273&units=metric&appid=cc58c27c279f87704e82f4215a428934")
request.onload = function(){

    if(request.status < 200 || request.status >400){
        alert("connection to the server was made but there was an error");
    }
    else {
        var weatherJson = JSON.parse(request.responseText);
        renderHtml(weatherJson);
    }
};
request.onerror = function(){
    alert("There was a problem accessing the data!");
}
request.send();
var daysOfWeek = ["Sunday","Monday","Tuesday","Wednessday","Thursday","Friday","Saturday"];
function renderHtml(wJ){
    var htmlSt = '';
    console.log(wJ.list[0].weather[0].main);
        var dateStr = wJ.list[(i * 7)+3].dt_txt.split(" ")[0];
        var date = new Date(dateStr);
        var day = daysOfWeek[date.getDay()];
        var description = wJ.list[(i * 7)+3].weather[0].main;
        var loc = wJ.city.name +" , "+ wJ.city.country;
        temp = wJ.list[(i * 7)+3].main.temp;
        switch (description) {
            case "Clear":
                htmlSt +="<p Class='DayStyle'>"+loc+"</p>"+
                    "<p Class='DayStyle'>"+"<span id='aaz'>"+temp+"</span>"+'°<a id="tem" onclick="switchTemUnits()" style="color:blue;font-size:1em" href="#">C</a>'+"</p>"+
                    "<p Class='DayStyle'>"+description+"</p>"+

                    '<div class="icon sunny">'+
                '<div class="sun">'+
                '<div class="rays"></div>'+
                '</div>'+
                '</div>'+

                "<b><p Class='DayStyle' style='font-family:cursive'>"+day+"</p></b>"
                ;
                break;
            case "Rain":
                htmlSt +="<p Class='DayStyle'>"+loc+"</p>"+
                    "<p Class='DayStyle'>"+"<span id='aaz'>"+temp+"</span>"+'°<a id="tem" onclick="switchTemUnits()" style="color:blue;font-size:1em" href="#">C</a>'+"</p>"+
                    "<p Class='DayStyle'>"+description+"</p>"+

                    "<div class=\"icon sun-shower\">" +
                    "<div class=\"cloud\"></div>" +
                    "<div class=\"sun\">" +
                    "<div class=\"rays\"></div>" +
                    "</div>" +
                    "<div class=\"rain\"></div>" +
                    "</div>"+

                    "<b><p Class='DayStyle'>"+day+"</p></b>"
                ;
                break;
            case "Drizzle":
                htmlSt +="<p Class='DayStyle'>"+loc+"</p>"+
                    "<p Class='DayStyle'>"+"<span id='aaz'>"+temp+"</span>"+'°<a id="tem" onclick="switchTemUnits()" style="color:blue;font-size:1em" href="#">C</a>'+"</p>"+
                    "<p Class='DayStyle'>"+description+"</p>"+

                    '<div class="icon sun-shower">'+
                '<div class="cloud"></div>'+
                '<div class="sun">'+
                '<div class="rays"></div>'+
                '</div>'+
                '<div class="rain"></div>'+
                '</div>'+

                    "<b><p Class='DayStyle'>"+day+"</p></b>"
                ;
                break;

            case "Atmosphere":
            case "Clouds":
                htmlSt +="<p Class='DayStyle'>"+loc+"</p>"+
                    "<p Class='DayStyle'>"+"<span id='aaz'>"+temp+"</span>"+'°<a id="tem" onclick="switchTemUnits()" style="color:blue;font-size:1em" href="#">C</a>'+"</p>"+
                    "<p Class='DayStyle'>"+description+"</p>"+

                    '<div class="icon cloudy">'+
                '<div class="cloud"></div>'+
                '<div class="cloud"></div>'+
                '</div>'+
                    "<b><p Class='DayStyle'>"+day+"</p></b>"
                ;
                break;
            case "Snow":
            case "Extreme":
                htmlSt +="<p Class='DayStyle'>"+loc+"</p>"+
                    "<p Class='DayStyle'>"+"<span id='aaz'>"+temp+"</span>"+'°<a id="tem" onclick="switchTemUnits()" style="color:blue;font-size:1em" href="#">C</a>'+"</p>"+
                    "<p Class='DayStyle'>"+description+"</p>"+

                    '<div class="icon thunder-storm">'+
                '<div class="cloud"></div>'+
                '<div class="lightning">'+
                '<div class="bolt"></div>'+
                '<div class="bolt"></div>'+
                '</div>'+
                '</div>'+

                "<b><p Class='DayStyle'>"+day+"</p></b>"
                ;
                break;

            default:
                break;
        }
    weatherId.innerHTML = htmlSt;
    document.onkeydown = function(e) {
        e = e || window.event;
        var key = e.which || e.keyCode;
        if (key === 39 && i<5) {
                i++;
                renderHtml(wJ);

        }
        if (key == 37 && i>0){
                i--;
                renderHtml(wJ);
        }
    }


}