Live-web-2

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) { //4: request finished and response is ready && 	//Returns the status-number (e.g. "404" for "Not Found" or "200" for "OK")
    myFunction(xhttp);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    document.getElementById("demo").innerHTML =
    xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}

/join mozilla #firefox

Below is the proper way to add size elements in HTML
<style>
	#myaudio {
		width: 500px;
	}
</style>

<audio id = "myaudio" controls autoplay>
<source src="http://www.osamasehgol.com/something.mp3">

</audio>

//Ruta's code:
view-source:http://itpruta.com/live%20web/portrait2.html
Something new:
myDiv.appendChild(vid);

if you want to limit number of videos on the page. Create a global variable, var numVideo, numVideo++, if numVideo < 12 do all of this code, otherwise don't do it. 

what's window.confirm?
what's window.event
https://stackoverflow.com/questions/6926963/understanding-the-window-event-property-and-its-usage

event.screenX; somethign to do with mouse position relative to the window. 
event.screenY

Nick Brattons:
video1.addEvenListener('mousemove', play1); calling HTML in Javacript. Older way was, <video id = "video1" video1.play> in html.

Sergio:
//http://104.236.48.182:3002/liveweb01/ 

** baseurl ** tag you can use to give relative path where everything can be loaded from. 

<script type="text/javascript"></script>

function videoControl(evt){
	console.log(evt); <- this event has a lot of properties. Console log it to see, its got mouseX, mouseY etc
	var currentVideo = evt.target; //this event object has the target. And target is the thing that generated the event in the first place. 

	if (currentVideo.paused()){
		currentVideo.play();
	} else {
		currentVideo.pause();
	}
}

window.addEventListener('load', init);

function init() {
	document.getElementId('videoElement0').addEventListener('click', videoControl)
}

// HTTP Portion - this is just setting up a webserver (http) that listens to port: 8080. 
// function requestHandler(req,res){...} is giving a path to incoming requests.  

var http = require('http');
var fs = require('fs'); // Using the filesystem module

var httpServer = http.createServer(requestHandler);


httpServer.listen(8080, function(){
	console.log("listening to 8080");
});

function requestHandler(req, res) {
	console.log(req);
	// Read index.html
	fs.readFile(__dirname + '/index.html', function (err, data) {
			// if there is an error
			if (err) {
				res.writeHead(500);
				return res.end('Error loading canvas_socket.html');
			}
			// Otherwise, send the data, the contents of the file
			res.writeHead(200);
			res.end(data);
  		}
  	);
}

*Step 1* //client (index.html)

function sendMessage(message) {
				socket.emit('chatmessage', message);
			};

*Step 2* //server (server.js)
socket.on('chatmessage',
                              ....
		});

*Step 3* //server (server.js)

 function(data) {
		socket.broadcast.emit('chatmessage', data);
                         }				
*Step 4* //client (index.html)

socket.on('chatmessage', function (data) {
                document.getElementById('messages').innerHTML = "" + data + 
 							+ "" + document.getElementById('messages').innerHTML;
			});

// WebSocket Portion
// WebSockets work with the HTTP server because sockets need HTTP connections


var io = require('socket.io').listen(httpServer);

// Register a callback function to run when we have an individual connection

// This is run for each individual user that connects

// in io, there's a method "sockets", so "on" (i.e when) io.sockets happens, make // a "connection", which is function(socket){...}"

//in that function(socket){
//		you are running socket.on('chatmessage'), which in turn runs socket.broadcast.emit('chatmessage', data); 
//}

io.sockets.on('connection', 
	// We are given a websocket object in our function
	function (socket) {
	
		console.log("We have a new client: " + socket.id);
		
		// When this user emits, client side: socket.emit('otherevent',some data);
		socket.on('chatmessage', function(data) {
			// Data comes in as whatever was sent, including objects
			console.log("Received: 'chatmessage' " + data);
			
			// Send it to all of the clients
			socket.broadcast.emit('chatmessage', data);
		});
		
		
		socket.on('disconnect', function() {
			console.log("Client has disconnected " + socket.id);
		});
	}
);

<html>
	<head>
		<script type="text/javascript" src="/socket.io/socket.io.js"></script>
		<script type="text/javascript">
				//io is probably a library, in it there's a method .connect
			var socket = io.connect('http://localhost:8080/');

//on io.connect, run function connect which is just a console.log for us
// and also on io.connect (socket.on), 'chatmessage' function (data) {
//document.getElementById('messages').innerHTML =""+data+""+document.getElementById('messages').innerHTML; 
				//}

				//sendmessage() really runs first, it passes object "message"  in socket.emit and labels it 'chatmessage'. Then socket.on('chatmessage') prints these messages. Question! why do we do var sendmessage = function(message){socket.emit(..)}, and not: function sendMessage(message){socket.emit('chatmessage', message);} changing input onclick sendMessage(...)

function sendMessage(message){socket.emit('chatmessage', message)}
			socket.on('connect', function() {
					console.log("Connected");
					});

			// Receive from any event
			socket.on('chatmessage', function (data) {
						console.log(data);
document.getElementById('messages').innerHTML = "" + data + + "" + document.getElementById('messages').innerHTML;
			});

//senedmessage() is passing object message which is 'message'.value received from text input. It is emitting and labelling as 'chatmessage'	and then socket.on('chatmessage', function(data){...} is run)	
			var sendmessage = function(message) {
				console.log("chatmessage: " + message);
				socket.emit('chatmessage', message);
			};

	
		</script>	
	</head>
 <body>
 <div id="messages">
 No Messages Yet
 </div>
 <input type="text" id="message" name="message">
 <input type="submit" value="submit" onclick="sendmessage(document.getElementById('message').value);">
 </body>
</html>