scripts.js

var myWorks = [ { title: "Work in Progress 1", pic: "img/work-in-progress.png"}, 
				{ title: "Work in Progress 2", pic: "img/work-in-progress.png"},
				{ title: "Work in Progress 3", pic: "img/work-in-progress.png"},
				{ title: "Work in Progress 4", pic: "img/work-in-progress.png"} 
			  ];


$(document).ready(function() {

	$(".message-box").css("background-color", "pink");

	$("#message-submit").on("click", function() {
		console.log("clicked");
		var comment = $(".message-box").val();
		console.log(comment);
		var upperComment = comment.toUpperCase();
		console.log(upperComment);
		$("#visible-comment").html(upperComment + "!!!!");

		return false;
	});

	$(".message-box").on("keyup", function() {
		console.log("keyup happened");
		var charCount = $(".message-box").val().length;
		console.log(charCount);

		$("#character-count").html(charCount);
		if(charCount > 50) {
			console.log("char count above 50");
			$("#character-count").css("color", "red");
		} else {
			$("#character-count").css("color", "black");
		};
	});

	var rows = $(".my-row");
	var count = 0;
	while (count < rows.length) {
		if (count%2===0) {
			$(rows[count]).css("background-color", "#f39f4c");
		};
		count++;
	};

	for(var i=0; i<myWorks.length; ++i) {
		$( "#" + i + "-work-title" ).css("background-image", "url(" + myWorks[i].pic + ")" )
									.css("background-size", "200px")
									.css("background-repeat", "no-repeat")
									.css("background-position", "center")

	};

	$(".work-image").mouseenter( function () {
		i = this.id.replace('-work-title', '');
		console.log(myWorks[i].title);
		$(this).html("<p class='info'><span class='work-proj-title'>Title: "
					 + myWorks[i].title + "</span> </p>");


	}).mouseleave( function () {
		$("p.info").html("");	
	});


	function initialize() {
		var mapOptions = {
			center: new google.maps.LatLng(50.8697769,4.7319251,17),
			zoom: 8
		};
		var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
		var marker = new google.maps.Marker({
			position: map.getCenter(),
			map: map,
			title: 'Click to zoom'
		});
		google.maps.event.addListener(marker, 'click', function() {
			map.setZoom(15);
			map.setCenter(marker.getPosition());
		});
	};
	google.maps.event.addDomListener(window, 'load', initialize);


});