<file_sep>// import preact
import { h, render, Component } from 'preact';
// import stylesheets for ipad & button
import style from './style';
import style_iphone from '../button/style_iphone';

//import undersground stylesheet
import undergroundStyle from './styleUnderground';

// import jquery for API calls
import $ from 'jquery';
// import the Button component
import Button from '../button';


export default class Iphone extends Component {
//var Iphone = React.createClass({

	// a constructor with initial set states
	constructor(props){
		super(props);
		// temperature state
		this.state.temp = "";
		// button display state
		//this.setState({ display: true });
	}

	// a call to fetch weather data via wunderground for London
	componentDidMount(){
		this.fetchWeatherDataLondon();

		//open hourly forecast nav
		document.getElementById("hourlyNav").style.width = "414px";

		//close daily forecast nav
		document.getElementById("dailyNav").style.width = "0px";

		this.fetchAllLines();
	}

	//FETCH UNDERGROUND DATA 

	fetchAllLines = () => {	
		//fetch all underground lines
		var linesUrl = "https://api.tfl.gov.uk/line/mode/tube,overground,dlr,tflrail/status?detail=true&app_id=bd4e5952&app_key=c132ec0ed9e2a5a7d767bf0b8c393ea5"
		$.ajax({
			url: linesUrl,
			dataType: "json",
			success: this.parseLineStatus,
			error : function(req, err){ console.log('API call failed ' + err); }
		});	
	}

	//FETCH DAILY AND HOURLY FORECAST DATA

	// a call to fetch weather data via wunderground for London
	fetchWeatherDataLondon = () => {
		// API URL with a structure of : http://api.wunderground.com/api/key/feature/q/country-code/city.json

		//Change the background image
		document.getElementById("backgroundImage").style.backgroundImage = "url('../../assets/backgrounds/London.jpg')";
		
		//change Underground icon visibility
		document.getElementById("train").style.visibility = "visible";

		//fetch daily forecast
		this.fetchDailyForecastLondon();
		this.fetchHourlyForecastLondon();
		this.closeNav();

		var url = "http://api.wunderground.com/api/b5f4673cdd4aa31e/conditions/q/UK/London.json";
		$.ajax({
			url: url,
			dataType: "jsonp",
			success : this.parseResponse,
			error : function(req, err){ console.log('API call failed ' + err); }
		});
		// once the data grabbed, hide the button
		//this.setState({ display: false });
	}
	
	//4 day forecast London
	fetchDailyForecastLondon = () => {
		var dailyForecast = "http://api.wunderground.com/api/b5f4673cdd4aa31e/forecast10day/q/UK/London.json";

		$.ajax({
			url: dailyForecast,
			dataType: "jsonp",
			success : this.parseDailyForecast,
			error : function(req, err){ console.log('API call failed ' + err); }
		});
	}

	// hourly forecast London
	fetchHourlyForecastLondon = () => {
		var hourlyForecast = "http://api.wunderground.com/api/b5f4673cdd4aa31e/hourly/q/UK/London.json";

		$.ajax({
			url: hourlyForecast,
			dataType: "jsonp",
			success : this.parseHourlyForecast,
			error : function(req, err){ console.log('API call failed ' + err); }
		});
	}

	// a call to fetch weather data via wunderground for New York
	fetchWeatherDataNY = () => {
		// API URL with a structure of : http://api.wunderground.com/api/key/feature/q/country-code/city.json

		//Change the background image
		document.getElementById("backgroundImage").style.backgroundImage = "url('../../assets/backgrounds/NY.jpg')";
		
		//change Underground icon visibility
		document.getElementById("train").style.visibility = "hidden";

		//fetch daily forecast
		this.fetchDailyForecastNY();
		this.closeNav();

		var url = "http://api.wunderground.com/api/b5f4673cdd4aa31e/conditions/q/US/NewYork.json";
		$.ajax({
			url: url,
			dataType: "jsonp",
			success : this.parseResponse,
			error : function(req, err){ console.log('API call failed ' + err); }
		});
		// once the data grabbed, hide the button
		//this.setState({ display: false });
	}
	
	fetchDailyForecastNY = () => {
		var dailyForecast = "http://api.wunderground.com/api/b5f4673cdd4aa31e/forecast10day/q/US/NewYork.json";
		//console.log(dailyForecast);

		$.ajax({
			url: dailyForecast,
			dataType: "jsonp",
			success : this.parseDailyForecast,
			error : function(req, err){ console.log('API call failed ' + err); }
		});
	}

	// a call to fetch weather data via wunderground for Singapore
	fetchWeatherDataSingapore = () => {
		// API URL with a structure of : http://api.wunderground.com/api/key/feature/q/country-code/city.json

		//Change the background image
		document.getElementById("backgroundImage").style.backgroundImage = "url('../../assets/backgrounds/Singapore.jpg')";
		
		//change Underground icon visibility
		document.getElementById("train").style.visibility = "hidden";

		//fetch daily forecast
		this.fetchDailyForecastSingapore();
		this.closeNav();

		var url = "http://api.wunderground.com/api/b5f4673cdd4aa31e/conditions/q/SG/Singapore.json";
		$.ajax({
			url: url,
			dataType: "jsonp",
			success : this.parseResponse,
			error : function(req, err){ console.log('API call failed ' + err); }
		});
		// once the data grabbed, hide the button
		//this.setState({ display: false });
	}
	
	fetchDailyForecastSingapore = () => {
		var dailyForecast = "http://api.wunderground.com/api/b5f4673cdd4aa31e/forecast10day/q/SG/Singapore.json";
		//console.log(dailyForecast);

		$.ajax({
			url: dailyForecast,
			dataType: "jsonp",
			success : this.parseDailyForecast,
			error : function(req, err){ console.log('API call failed ' + err); }
		});
	}

	// a call to fetch weather data via wunderground for Paris
	fetchWeatherDataParis = () => {
		// API URL with a structure of : http://api.wunderground.com/api/key/feature/q/country-code/city.json

		//Change the background image
		document.getElementById("backgroundImage").style.backgroundImage = "url('../../assets/backgrounds/Paris.jpg')";

		//change Underground icon visibility
		document.getElementById("train").style.visibility = "hidden";

		//fetch daily forecast
		this.fetchDailyForecastParis();
		this.closeNav();

		var url = "http://api.wunderground.com/api/b5f4673cdd4aa31e/conditions/q/FR/Paris.json";
		$.ajax({
			url: url,
			dataType: "jsonp",
			success : this.parseResponse,
			error : function(req, err){ console.log('API call failed ' + err); }
		});
		// once the data grabbed, hide the button
		//this.setState({ display: false });
	}
	
	fetchDailyForecastParis = () => {
		var dailyForecast = "http://api.wunderground.com/api/b5f4673cdd4aa31e/forecast10day/q/FR/Paris.json";
		//console.log(dailyForecast);

		$.ajax({
			url: dailyForecast,
			dataType: "jsonp",
			success : this.parseDailyForecast,
			error : function(req, err){ console.log('API call failed ' + err); }
		});
	}

	// a call to fetch weather data via wunderground for Rome
	fetchWeatherDataRome = () => {
		// API URL with a structure of : http://api.wunderground.com/api/key/feature/q/country-code/city.json

		//Change the background image
		document.getElementById("backgroundImage").style.backgroundImage = "url('../../assets/backgrounds/Rome.jpg')";

		//change Underground icon visibility
		document.getElementById("train").style.visibility = "hidden";

		//fetch daily forecast
		this.fetchDailyForecastRome();
		this.closeNav();

		var url = "http://api.wunderground.com/api/b5f4673cdd4aa31e/conditions/q/IT/Rome.json";
		$.ajax({
			url: url,
			dataType: "jsonp",
			success : this.parseResponse,
			error : function(req, err){ console.log('API call failed ' + err); }
		});
		// once the data grabbed, hide the button
		//this.setState({ display: false });
	}
	
	fetchDailyForecastRome = () => {
		var dailyForecast = "http://api.wunderground.com/api/b5f4673cdd4aa31e/forecast10day/q/IT/Rome.json";
		//console.log(dailyForecast);

		$.ajax({
			url: dailyForecast,
			dataType: "jsonp",
			success : this.parseDailyForecast,
			error : function(req, err){ console.log('API call failed ' + err); }
		});
	}


	//SIDE NAVIGATIONAL BAR COMPONENTS MANAGEMENT

	//Open the city side navigation bar
	openNav = () => {
		document.getElementById("myNav").style.width = "415px";
	}

	//Close city the side navigation bar
	closeNav = () => {
		document.getElementById("myNav").style.width = "0px";
	}

	//Open the underground side navigation bar
	openNav2 = () => {
		document.getElementById("myNav2").style.width = "415px";
	}

	//Close underground the side navigation bar
	closeNav2 = () => {
		document.getElementById("myNav2").style.width = "0px";
	}

	//Show hour forecast div section
	hourlyNav = () => {
		document.getElementById("hourlyNav").style.width = "415px";
		document.getElementById("dailyNav").style.width = "0px";
	}

	//Show days forecast div section
	dailyNav = () => {
		document.getElementById("hourlyNav").style.width = "0px";
		document.getElementById("dailyNav").style.width = "415px";
	}


	//RENDER COMPONENT OF APPLICATION

	render(){
		// check if temperature data is fetched, if so add the sign styling to the page
		const tempStyles = this.state.temp ? `${style.temperature} ${style.filled}` : style.temperature;

		// display all weather data
		return (
			<div id="backgroundImage" class={ style.container }>

				{/* Container for the side bar menu icon */}
				<div class={ style.iconMenuContainer }>
					<img src="../../assets/weather-icon/menu64px.png" class={ style.menu } onClick={ this.openNav }> </img>
				</div>

				{/* Container for the side bar menu icon */}
				<div class={ style.iconMenuContainer2 }>
					<img id="train" src="../../assets/weather-icon/Tfl2.png" class={ style.Tfl } onClick={ this.openNav2 }> </img>
				</div>

				{/* Side navigation bar for cities */}
				<div id="myNav" class={ style.sideNav }>
					<span class={ style.close } onClick={ this.closeNav }> &times; </span>

				  	{/* Cities list container */}
					<div class={ style.citiesContainer }>
						<span class={ style.cities } onClick={ this.fetchWeatherDataLondon }> London </span>
						<span class={ style.cities } onClick={ this.fetchWeatherDataNY }> New York </span>
						<span class={ style.cities } onClick={ this.fetchWeatherDataParis }> Paris </span>
						<span class={ style.cities } onClick={ this.fetchWeatherDataRome }> Rome </span>
						<span class={ style.cities } onClick={ this.fetchWeatherDataSingapore }> Singapore </span>
					</div>
				</div>

				{/* Side navigation bar for underground */}
				<div id="myNav2" class={ style.sideNav2 }>
					<span class={ style.close2 } onClick={ this.closeNav2 }> &times; </span>

				  	{/* Underground list container */}
					<div class={ undergroundStyle.underground }>
						
						<div class={ undergroundStyle.undergroundLinesStatusContainer } >
							<span class={ undergroundStyle.Bakerloo }> {this.state.line1} </span>
							<span class={ undergroundStyle.undergroundStatus }> {this.state.status1} </span>
						</div>
						
						<div class={ undergroundStyle.undergroundLinesStatusContainer } >
							<span class={ undergroundStyle.Central }> {this.state.line2} </span>
							<span class={ undergroundStyle.undergroundStatus }> {this.state.status2} </span>
						</div>

						<div class={ undergroundStyle.undergroundLinesStatusContainer } >
							<span class={ undergroundStyle.Circle }> {this.state.line3} </span>
							<span class={ undergroundStyle.undergroundStatus }> {this.state.status3} </span>
						</div>

						<div class={ undergroundStyle.undergroundLinesStatusContainer } >
							<span class={ undergroundStyle.District }> {this.state.line4} </span>
							<span class={ undergroundStyle.undergroundStatus }> {this.state.status4} </span>
						</div>

						<div class={ undergroundStyle.undergroundLinesStatusContainer } >
							<span class={ undergroundStyle.DLR }> {this.state.line5} </span>
							<span class={ undergroundStyle.undergroundStatus }> {this.state.status5} </span>
						</div>

						<div class={ undergroundStyle.undergroundLinesStatusContainer } >
							<span class={ undergroundStyle.Hammersmith }> {this.state.line6} </span>
							<span class={ undergroundStyle.undergroundStatus }> {this.state.status6} </span>
						</div>

						<div class={ undergroundStyle.undergroundLinesStatusContainer } >
							<span class={ undergroundStyle.Jubilee }> {this.state.line7} </span>
							<span class={ undergroundStyle.undergroundStatus }> {this.state.status7} </span>
						</div>

						<div class={ undergroundStyle.undergroundLinesStatusContainer } >
							<span class={ undergroundStyle.Overground }> {this.state.line8} </span>
							<span class={ undergroundStyle.undergroundStatus }> {this.state.status8} </span>
						</div>

						<div class={ undergroundStyle.undergroundLinesStatusContainer } >
							<span class={ undergroundStyle.Metropolitan }> {this.state.line9} </span>
							<span class={ undergroundStyle.undergroundStatus }> {this.state.status9} </span>
						</div>

						<div class={ undergroundStyle.undergroundLinesStatusContainer } >
							<span class={ undergroundStyle.Northern }> {this.state.line10} </span>
							<span class={ undergroundStyle.undergroundStatus }> {this.state.status10} </span>
						</div>

						<div class={ undergroundStyle.undergroundLinesStatusContainer } >
							<span class={ undergroundStyle.Picadilly }> {this.state.line11} </span>
							<span class={ undergroundStyle.undergroundStatus }> {this.state.status11} </span>
						</div>

						<div class={ undergroundStyle.undergroundLinesStatusContainer } >
							<span class={ undergroundStyle.TfL }> {this.state.line12} </span>
							<span class={ undergroundStyle.undergroundStatus }> {this.state.status12} </span>
						</div>

						<div class={ undergroundStyle.undergroundLinesStatusContainer } >
							<span class={ undergroundStyle.Victoria }> {this.state.line13} </span>
							<span class={ undergroundStyle.undergroundStatus }> {this.state.status13} </span>
						</div>

						<div class={ undergroundStyle.undergroundLinesStatusContainer } >
							<span class={ undergroundStyle.WaterlooCity }> {this.state.line14} </span>
							<span class={ undergroundStyle.undergroundStatus }> {this.state.status14} </span>
						</div>

					</div>
				</div>

				{/* Rendering the conditions information in the screen */}
				<div class={ style.header }>
					<div class={ style.city }> { this.state.locate } </div>
					<div class={ style.conditions }> { this.state.cond } </div>
					<span class={ tempStyles }> { this.state.temp } </span>
				</div>
				<div class={ style.details }> </div>

				{/*
					<div class={ style_iphone.container }>
						{ this.state.display ? <Button class={ style_iphone.button } clickFunction={ this.fetchWeatherData }/ > : null }
					</div>
				*/}

				{/* Daily and hourly buttons rendering */}
				<div class={ style.buttonContainer }>
					<button id="hourButton" class={ style.buttonStyle1 } onClick={ this.hourlyNav }> Hourly </button>
					<button id="dayButton" class={ style.buttonStyle2 } onClick={ this.dailyNav }> Daily </button>
				</div>

				{/* Daily and hourly forecast container */}
				<div class={ style.hourlyDailyContainer }>

					
					{/* Hourly forecast display */}
					<div id="hourlyNav" class={ style.hourlyForecastContainer }>

						{/* printing data from api hour 1 */}
						<div class={ style.dayContainer }>
							<div class={ style.hour }>
								<span class={ style.textStyle }> { this.state.hour1 } </span>
							</div>

							<div class={ style.hourlyCondition }>
								<span> <img src={ this.state.img1 } class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.hourlyTemp }>
								<span> { this.state.temp1 } </span>
							</div>
						</div>

						{/* printing data from api hour 2 */}
						<div class={ style.dayContainer }>
							<div class={ style.hour }>
								<span class={ style.textStyle }> { this.state.hour2 } </span>
							</div>

							<div class={ style.hourlyCondition }>
								<span> <img src={this.state.img2} class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.hourlyTemp }>
								<span> { this.state.temp2 } </span>
							</div>
						</div>

						{/* printing data from api hour 3 */}
						<div class={ style.dayContainer }>
							<div class={ style.hour }>
								<span class={ style.textStyle }> { this.state.hour3 } </span>
							</div>

							<div class={ style.hourlyCondition }>
								<span> <img src={this.state.img3} class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.hourlyTemp }>
								<span> { this.state.temp3 } </span>
							</div>
						</div>

						{/* printing data from api hour 4 */}
						<div class={ style.dayContainer }>
							<div class={ style.hour }>
								<span class={ style.textStyle }> { this.state.hour4 } </span>
							</div>

							<div class={ style.hourlyCondition }>
								<span> <img src={this.state.img4} class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.hourlyTemp }>
								<span> { this.state.temp4 } </span>
							</div>
						</div>

						{/* printing data from api hour 5 */}
						<div class={ style.dayContainer }>
							<div class={ style.hour }>
								<span class={ style.textStyle }> { this.state.hour5 } </span>
							</div>

							<div class={ style.hourlyCondition }>
								<span> <img src={this.state.img5} class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.hourlyTemp }>
								<span> { this.state.temp5 } </span>
							</div>
						</div>

						{/* printing data from api hour 6 */}
						<div class={ style.dayContainer }>
							<div class={ style.hour }>
								<span class={ style.textStyle }> { this.state.hour6 } </span>
							</div>

							<div class={ style.hourlyCondition }>
								<span> <img src={this.state.img6} class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.hourlyTemp }>
								<span> { this.state.temp6 } </span>
							</div>
						</div>

						{/* printing data from api hour 7 */}
						<div class={ style.dayContainer }>
							<div class={ style.hour }>
								<span class={ style.textStyle }> { this.state.hour7 } </span>
							</div>

							<div class={ style.hourlyCondition }>
								<span> <img src={this.state.img7} class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.hourlyTemp }>
								<span> { this.state.temp7 } </span>
							</div>
						</div>

						{/* printing data from api hour 8 */}
						<div class={ style.dayContainer }>
							<div class={ style.hour }>
								<span class={ style.textStyle }> { this.state.hour8 } </span>
							</div>

							<div class={ style.hourlyCondition }>
								<span> <img src={this.state.img8} class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.hourlyTemp }>
								<span> { this.state.temp8 } </span>
							</div>
						</div>

						{/* printing data from api hour 9 */}
						<div class={ style.dayContainer }>
							<div class={ style.hour }>
								<span class={ style.textStyle }> { this.state.hour9 } </span>
							</div>

							<div class={ style.hourlyCondition }>
								<span> <img src={this.state.img9} class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.hourlyTemp }>
								<span> { this.state.temp9 } </span>
							</div>
						</div>

						{/* printing data from api hour 10 */}
						<div class={ style.dayContainer }>
							<div class={ style.hour }>
								<span class={ style.textStyle }> { this.state.hour10 } </span>
							</div>

							<div class={ style.hourlyCondition }>
								<span> <img src={this.state.img10} class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.hourlyTemp }>
								<span> { this.state.temp10 } </span>
							</div>
						</div>

						{/* printing data from api hour 11 */}
						<div class={ style.dayContainer }>
							<div class={ style.hour }>
								<span class={ style.textStyle }> { this.state.hour11 } </span>
							</div>

							<div class={ style.hourlyCondition }>
								<span> <img src={this.state.img11} class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.hourlyTemp }>
								<span> { this.state.temp11 } </span>
							</div>
						</div>

						{/* printing data from api hour 12 */}
						<div class={ style.dayContainer }>
							<div class={ style.hour }>
								<span class={ style.textStyle }> { this.state.hour12 } </span>
							</div>

							<div class={ style.hourlyCondition }>
								<span><img src={this.state.img12} class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.hourlyTemp }>
								<span> { this.state.temp12 } </span>
							</div>
						</div>
					</div>

					{/* Daily forecast display */}
					<div id="dailyNav" class={ style.dailyForecastContainer }>
						
						{/* printing data from api day 1 */}
						<div class={ style.dayContainer }>
							<div class={ style.day }>
								<span class={ style.textStyle}> { this.state.Day1} </span>
							</div>

							<div class={ style.dayCondition }>
								<span> <img src={ this.state.img1 } class={ style.conditionIcon }  /> </span>
								
							</div>

							<div class={ style.dayHighTemp }>
								<span> { this.state.dayHigh1 } </span>
							</div>

							<div class={ style.dayLowTemp }>
								<span> { this.state.dayLow1 } </span>
							</div>


						</div>

						{/* printing data from api day 2 */}
						<div class={ style.dayContainer }>
							<div class={ style.day }>
								<span class={ style.textStyle }> { this.state.Day2 } </span>
							</div>

							<div class={ style.dayCondition }>
								<span> <img src={ this.state.img2 } class={ style.conditionIcon } /> </span>

							</div>

							<div class={ style.dayHighTemp }>
								<span> { this.state.dayHigh2 } </span>
							</div>

							<div class={ style.dayLowTemp }>
								<span> { this.state.dayLow2 } </span>
							</div>
						</div>
						
						{/* printing data from api day 3 */}
						<div class={ style.dayContainer }>
							<div class={ style.day }>
								<span class={ style.textStyle }> { this.state.Day3 } </span>
							</div>

							<div class={ style.dayCondition }>
								<span> <img src={ this.state.img3 } class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.dayHighTemp }>
								<span> { this.state.dayHigh3 } </span>
							</div>

							<div class={ style.dayLowTemp }>
								<span> { this.state.dayLow3 } </span>
							</div>
						</div>
						
						{/* printing data from api day 4 */}
						<div class={ style.dayContainer }>
							<div class={ style.day }>
								<span class={ style.textStyle }> { this.state.Day4 } </span>
							</div>

							<div class={ style.dayCondition }>
								<span> <img src={ this.state.img4 } class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.dayHighTemp }>
								<span> { this.state.dayHigh4 } </span>
							</div>

							<div class={ style.dayLowTemp }>
								<span> { this.state.dayLow4 } </span>
							</div>
						</div>

						{/* printing data from api day 5 */}
						<div class={ style.dayContainer }>
							<div class={ style.day }>
								<span class={ style.textStyle }> { this.state.Day5 } </span>
							</div>

							<div class={ style.dayCondition }>
								<span> <img src={ this.state.img5 } class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.dayHighTemp }>
								<span> { this.state.dayHigh5 } </span>
							</div>

							<div class={ style.dayLowTemp }>
								<span> { this.state.dayLow5 } </span>
							</div>
						</div>

						{/* printing data from api day 6 */}
						<div class={ style.dayContainer }>
							<div class={ style.day }>
								<span class={ style.textStyle }> { this.state.Day6 } </span>
							</div>

							<div class={ style.dayCondition }>
								<span> <img src={ this.state.img6 } class={ style.conditionIcon } /></span>
							</div>

							<div class={ style.dayHighTemp }>
								<span> { this.state.dayHigh6 } </span>
							</div>

							<div class={ style.dayLowTemp }>
								<span> { this.state.dayLow6 } </span>
							</div>
						</div>

						{/* printing data from api day 7 */}
						<div class={ style.dayContainer }>
							<div class={ style.day }>
								<span class={ style.textStyle }> { this.state.Day7 } </span>
							</div>

							<div class={ style.dayCondition }>
								<span> <img src={this.state.img7} class={ style.conditionIcon } /> </span>
							</div>

							<div class={ style.dayHighTemp }>
								<span> { this.state.dayHigh7 } </span>
							</div>

							<div class={ style.dayLowTemp }>
								<span> { this.state.dayLow7 } </span>
							</div>
						</div>

					</div>
				</div>

			</div>
			);
	}

	parseResponse = (parsed_json) => {
		var location = parsed_json['current_observation']['display_location']['city'];
		var temp_c = Math.round(parsed_json['current_observation']['temp_c']);
		var conditions = parsed_json['current_observation']['weather'];

		// set states for fields so they could be rendered later on
		this.setState({
			locate: location,
			temp: temp_c,
			cond : conditions

		});
	}
	
	//getting data from api - highest, lowest and conditions, 4 day forecast, working on the icons
	parseDailyForecast = (parsed_json) => {
		var count = 1;
		var arrDay = new Array();
		var arrHigh = new Array();
		var arrLow = new Array();
		var arrConditions = new Array();
		var arrImg = new Array();
		
		//using count var to get the data from subtrees 0 to 3
		for(var i = 1 ; i < 8 ; i++) {
			
			//saving data
			var day = parsed_json['forecast']['simpleforecast']['forecastday'][count]['date']['weekday'];
			var dayHighTemp = parsed_json['forecast']['simpleforecast']['forecastday'][count]['high']['celsius'];
			var dayLowTemp = parsed_json['forecast']['simpleforecast']['forecastday'][count]['low']['celsius'];
			var conditions = parsed_json['forecast']['simpleforecast']['forecastday'][count]['conditions'];
			var img = parsed_json['forecast']['simpleforecast']['forecastday'][count]['icon'];
			
			//pushing data onto the arrays
			arrDay.push(day);
			arrHigh.push(dayHighTemp);
			arrLow.push(dayLowTemp);
			arrConditions.push(conditions);
			arrImg.push(img);


			count++;
		}

		this.setState({

			Day1: arrDay[0],
			Day2: arrDay[1],
			Day3: arrDay[2],
			Day4: arrDay[3],
			Day5: arrDay[4],
			Day6: arrDay[5],
			Day7: arrDay[6],

			dayHigh1: arrHigh[0],
			dayHigh2: arrHigh[1],
			dayHigh3: arrHigh[2],
			dayHigh4: arrHigh[3],
			dayHigh5: arrHigh[4],
			dayHigh6: arrHigh[5],
			dayHigh7: arrHigh[6],

			dayLow1: arrLow[0],
			dayLow2: arrLow[1],
			dayLow3: arrLow[2],
			dayLow4: arrLow[3],
			dayLow5: arrLow[4],
			dayLow6: arrLow[5],
			dayLow7: arrLow[6],

			day1Conditions: arrConditions[0],
			day2Conditions: arrConditions[1],
			day3Conditions: arrConditions[2],
			day4Conditions: arrConditions[3],
			day5Conditions: arrConditions[4],
			day6Conditions: arrConditions[5],
			day7Conditions: arrConditions[6],

			img1 : "https://icons.wxug.com/i/c/i/"+arrImg[0]+".gif",
			img2 : "https://icons.wxug.com/i/c/i/"+arrImg[1]+".gif",
			img3 : "https://icons.wxug.com/i/c/i/"+arrImg[2]+".gif",
			img4 : "https://icons.wxug.com/i/c/i/"+arrImg[3]+".gif",
			img5 : "https://icons.wxug.com/i/c/i/"+arrImg[4]+".gif",
			img6 : "https://icons.wxug.com/i/c/i/"+arrImg[5]+".gif",
			img7 : "https://icons.wxug.com/i/c/i/"+arrImg[6]+".gif",
		});
	}

	// parse hourly forecast
	parseHourlyForecast = (parsed_json) => {
		var count = 0;
		var arrHour = new Array();
		var arrTemp = new Array();
		var arrConditions = new Array();
		var arrImg = new Array();

		for(var i = 0 ; i < 12 ; i++)
		{
			var Hour = parsed_json['hourly_forecast'][count]['FCTTIME']['civil'];
			var Temp = parsed_json['hourly_forecast'][count]['temp']['metric'];
			var Conditions = parsed_json['hourly_forecast'][count]['condition'];
			var img = parsed_json['hourly_forecast'][count]['icon'];

			//pushing fetched data into the array
			arrHour.push(Hour);
			arrTemp.push(Temp);
			arrConditions.push(Conditions);
			arrImg.push(img);

			count++;
		}

		this.setState({
			hour1: arrHour[0],
			hour2: arrHour[1],
			hour3: arrHour[2],
			hour4: arrHour[3],			
			hour5: arrHour[4],			
			hour6: arrHour[5],			
			hour7: arrHour[6],			
			hour8: arrHour[7],			
			hour9: arrHour[8],
			hour10: arrHour[9],
			hour11: arrHour[10],
			hour12: arrHour[11],

			temp1: arrTemp[0],
			temp2: arrTemp[1],
			temp3: arrTemp[2],
			temp4: arrTemp[3],
			temp5: arrTemp[4],
			temp6: arrTemp[5],
			temp7: arrTemp[6],
			temp8: arrTemp[7],
			temp9: arrTemp[8],
			temp10: arrTemp[9],
			temp11: arrTemp[10],
			temp12: arrTemp[11],

			condition1: arrConditions[0],
			condition2: arrConditions[1],
			condition3: arrConditions[2],
			condition4: arrConditions[3],
			condition5: arrConditions[4],
			condition6: arrConditions[5],
			condition7: arrConditions[6],
			condition8: arrConditions[7],			
			condition9: arrConditions[8],			
			condition10: arrConditions[9],			
			condition11: arrConditions[10],
			condition12: arrConditions[11],

			img1 : "https://icons.wxug.com/i/c/i/"+arrImg[0]+".gif",
			img2 : "https://icons.wxug.com/i/c/i/"+arrImg[1]+".gif",
			img3 : "https://icons.wxug.com/i/c/i/"+arrImg[2]+".gif",
			img4 : "https://icons.wxug.com/i/c/i/"+arrImg[3]+".gif",
			img5 : "https://icons.wxug.com/i/c/i/"+arrImg[4]+".gif",
			img6 : "https://icons.wxug.com/i/c/i/"+arrImg[5]+".gif",
			img7 : "https://icons.wxug.com/i/c/i/"+arrImg[6]+".gif",
			img8 : "https://icons.wxug.com/i/c/i/"+arrImg[7]+".gif",
			img9 : "https://icons.wxug.com/i/c/i/"+arrImg[8]+".gif",
			img10 : "https://icons.wxug.com/i/c/i/"+arrImg[9]+".gif",
			img11 : "https://icons.wxug.com/i/c/i/"+arrImg[10]+".gif",
			img12 : "https://icons.wxug.com/i/c/i/"+arrImg[11]+".gif"
		});
	}

	parseLineStatus = (parsed_json) => {
		var count = 0;
		var arrLinesName = new Array();
		var arrLinesStatus = new Array();

		for(var i = 0 ; i < 14 ; i++)
		{
			var name = parsed_json[count]['name'];
			var status = parsed_json[count]['lineStatuses'][0]['statusSeverityDescription'];
		
			//pushing fetched data into array
			arrLinesName.push(name);
			arrLinesStatus.push(status);

			count++;

			console.log(name + "" + status);
		}

		this.setState({
			line1: arrLinesName[0],
			line2: arrLinesName[1],
			line3: arrLinesName[2],
			line4: arrLinesName[3],
			line5: arrLinesName[4],
			line6: arrLinesName[5],
			line7: arrLinesName[6],
			line8: arrLinesName[7],
			line9: arrLinesName[8],
			line10: arrLinesName[9],
			line11: arrLinesName[10],
			line12: arrLinesName[11],
			line13: arrLinesName[12],
			line14: arrLinesName[13],
			
			status1: arrLinesStatus[0],
			status2: arrLinesStatus[1],
			status3: arrLinesStatus[2],
			status4: arrLinesStatus[3],
			status5: arrLinesStatus[4],
			status6: arrLinesStatus[5],
			status7: arrLinesStatus[6],
			status8: arrLinesStatus[7],
			status9: arrLinesStatus[8],
			status10: arrLinesStatus[9],
			status11: arrLinesStatus[10],
			status12: arrLinesStatus[11],
			status13: arrLinesStatus[12],
			status14: arrLinesStatus[13]
		});
	}
};
