/*when the website load*/
function doFirst(){
	maxBarSize=600;/*that the size of the width of the bar*/
	myMovie=document.getElementById('myMovie');/*first element*/
	playButton=document.getElementById('playButton');/*second element*/
	bar=document.getElementById('defaultBar');/*third element*/
	progressBar=document.getElementById('progressBar');/*forth element*/
	
	playButton.addEventListener('click', playOrPause, false);/*event listener, everytime we click the play button is will play or pause*/
	defaultBar.addEventListener('click', clickedBar, false);
}


/*when we click the play button*/
function playOrPause(){/*talking about if we clicking the button*/
	/*code if the movie is playing*/
	if(!myMovie.paused && !myMovie.ended){/* !=different then, eg.(if myMovie is not pause and not ended)so it`s playing the movie*/
		myMovie.pause();/*if we clicking the button while the movie playing, it will pause the movie, pause()build in the browswrs*/
		playButton.innerHTML='Play';/*if the movie is pause, we changing the text on the play button, beccause the movie is pause the play button will be play, innerHTML=that how we exesing the test(play)and change it*/
		window.clearInterval(updateBar);/*stop updating the bar, because it`s pause*/
	}else{/*code if the movie is pause*/
		myMovie.play();/*if we clicking the button while the movie pause, it will play the movie, play()bild in the browswrs*/
		playButton.innerHTML='Pause';/*if the movie is playing, we changing the text on the play button, beccause the movie is playing the play button will be pause, innerHTML=that how we exesing the test(play)and change it*/
		updateBar=setInterval(update, 500);/*setInterval got two parameters, update=change the size of the bar, 500=how often to change it, 500=half a sec, 1000=sec*/
	}
}

/*change the size of the progress bar while the video playing*/
function update(){
	if(!myMovie.ended){/*if the movie not ended(playing or pause)*/
		var size=parseInt(myMovie.currentTime*maxBarSize/myMovie.duration);/*formula, duration=how long the video is, current=the current  time of the video, HTML5 allready know, it`s bild in, dont need formula for it*/
		/*acessing CSS property through Java Script*/
		progressBar.style.width=size+'px';/*eg 100px, style=if we want to change on javaScript-what property we want=progressBar, to change CSS property we using=style, what to change=width, we put px to calculate in pixels, it will calculate over and over, it change one px every sec*/
	}else{/*when the video ended*/
		progressBar.style.width='0px';/*bring back the progress bar to 0px*/
		playButton.innerHTML='play';/*changing the play button to play*/
		window.clearInterval(updateBar);/*stop updating the bar*/
	}
}

/*where the video changing if we click the progress bar*/
function clickedBar(e){/*e=postion of the mouse on the progress bar*/
	if(!myMovie.paused && !myMovie.ended){/*if my movie playing*/
		/*x=left or right, y=up or down*/
		var mouseX=e.pageX-bar.offsetLeft;/*calculate the X postion of the mouse and store it in the mouseX, offsetLeft=how far from the left is the bar*/
		var newtime=mouseX*myMovie.duration/maxBarSize;/*formula of where is the mouse click on the progress bar*/
		myMovie.currentTime=newtime;/*where ever we click on the progress bar the movie will start from that point*/
		progressBar.style.width=mouseX+'px';/*changing the width of the progress bar depending where you click on the progress bar*/
	}
}
window.addEventListener('load', doFirst, false);/*load the page first then doFirst*/