// JavaScript Document
 $(document).ready(function() {	
	// --- Set initial classes/values
	$("#page_wrapper div.next").addClass("active");
	$("#page_wrapper div.previous div").css("background-image", "url(assets/previous_inactive.jpg)");

	$("#portfolio div.example:first").addClass("active");
	var example_width = $("#portfolio div.active").width() + "px";
	$("#portfolio > div").not(":first").css({"left": example_width, "opacity": 0, "display": "none"});
	$("#portfolio > div").css({"width": example_width});

	var number_of_examples = $("#portfolio div.example").length
	$("#counter").html("<span class='first'>first &nbsp;&nbsp;|&nbsp; </span><span class='active'> 1</span> of " + number_of_examples + " <span class='last'>   &nbsp;|&nbsp;&nbsp; last</span>");
	
	// --- Portfolio - Next div - hover
	$("#page_wrapper div.next").hover(
		function() {
			var number_of_examples = $("#portfolio div.example").length
			if ($("#counter .active").text() == number_of_examples) {
				return false;
			}
			$("div", this).css("background-image", "url(assets/next_ro.jpg)")
			$(this).css("background-image", "url(assets/next_bg_ro.jpg)")
		},
		function() {
			var number_of_examples = $("#portfolio div.example").length
			if ($("#counter .active").text() == number_of_examples) {
				return false;
			}
			$("div", this).css("background-image", "url(assets/next.jpg)")
			$(this).css("background-image", "url(assets/next_bg.jpg)")
		}
	)
	// --- Portfolio - Previous div - hover	
	$("#page_wrapper div.previous").hover(
		function() {
			if ($("#counter .active").text() == 1) {
				return false;
			}
			$("div", this).css("background-image", "url(assets/previous_ro.jpg)")
			$(this).css("background-image", "url(assets/previous_bg_ro.jpg)")
		},
		function() {
			if ($("#counter .active").text() == 1) {
				return false;
			}
			$("div", this).css("background-image", "url(assets/previous.jpg)")
			$(this).css("background-image", "url(assets/previous_bg.jpg)")
		}
	)
	
	// --- Portfolio - Next arrow - click
	$("#page_wrapper div.next").click(function () {
		var next = $("#portfolio div.active").next();
		var current = $("#portfolio div.active");
		var example_width = $("#portfolio div.active").width() + "px";
		var index_of_next = next.index() + 1
		if ($(current).is(":last-child")) {
			return false;
			}
		current
			.animate({
				left: "-30px",
				"opacity": 0
			}, 1000)
 			.queue(function() {
				$(this)
					.css({display: "none", left: "-" + example_width})		
					.dequeue()
			});
 		next
			.css({display: "block"})		
			.animate({
				left: 0,
				"opacity": 1
				}, 1000);
		current.removeClass("active");
		next.addClass("active");
		$("#page_wrapper div.previous").addClass("active");	
		$("#counter .active").text(index_of_next);	
		$("#page_wrapper div.previous div").css("background-image", "url(assets/previous.jpg)");
		if ($(next).is(":last-child")) {
			$("#page_wrapper div.next").removeClass("active");
			$("#page_wrapper div.next div").css("background-image", "url(assets/next_inactive.jpg)");
			$("#page_wrapper div.next").css("background-image", "url(assets/next_bg.jpg)")
			}
		  });

		// --- Portfolio - Previous arrow - click		  
		$("#page_wrapper div.previous").click(function () {
		var previous = $("#portfolio div.active").prev();
		var current = $("#portfolio div.active");
		var example_width = $("#portfolio div.active").width() + "px";
		var index_of_previous = previous.index() + 1
		if ($(current).is(":first-child")) {
			return false;
			}
		current
			.animate({
				left: "30px",
				"opacity": 0
			}, 1000)
 			.queue(function() {
				$(this)
					.css({display: "none", left: example_width})		
					.dequeue()
			});			
		previous
			.css({display: "block"})		
			.animate({
				left: 0,
				"opacity": 1
				}, 1000);
		$("#page_wrapper div.next").addClass("active");	
		$("#counter .active").text(index_of_previous);	
		current.removeClass("active");
		previous.addClass("active");	
		$("#page_wrapper div.next div").css("background-image", "url(assets/next.jpg)");
		if ($(previous).is(":first-child")) {
			$("#page_wrapper div.previous").removeClass("active");	
			$("#page_wrapper div.previous div").css("background-image", "url(assets/previous_inactive.jpg)");
			$("#page_wrapper div.previous").css("background-image", "url(assets/previous_bg.jpg)")
			}

		});
		
		// --- Portfolio - Counter - First button - click		  
		$("#counter .first").click(function () {
			var current = $("#portfolio div.active");
			var first = $("#portfolio div.example:first")
			var example_width = $("#portfolio div.active").width() + "px";
			if ($("#counter .active").text() == 1) {
				return false;
			}
			current
				.animate({
					left: "30px",
					"opacity": 0
				}, 1000)
				.queue(function() {
					$(this)
						.css({display: "none"})		
						.dequeue();
					$("#portfolio > div").not(":first").css({"left": example_width});
				});
			first
				.css({display: "block"})		
				.animate({
					left: 0,
					"opacity": 1
					}, 1000);
			$("#counter .active").text("1");	
			current.removeClass("active");
			first.addClass("active");
			$("#page_wrapper div.next").addClass("active");	
			$("#page_wrapper div.previous").removeClass("active");
			$("#page_wrapper div.previous div").css("background-image", "url(assets/previous_inactive.jpg)");
			$("#page_wrapper div.next div").css("background-image", "url(assets/next.jpg)");
		});

		// --- Portfolio - Counter - Last button - click		  
		$("#counter .last").click(function () {
			var current = $("#portfolio div.active");
			var last = $("#portfolio div.example:last")
			var example_width = $("#portfolio div.active").width() + "px";
			var number_of_examples = $("#portfolio div.example").length
			var number_of_examples = $("#portfolio div.example").length
			if ($("#counter .active").text() == number_of_examples) {
				return false;
			}
			current
				.animate({
					left: "-30px",
					"opacity": 0
				}, 1000)
				.queue(function() {
					$(this)
						.css({display: "none"})		
						.dequeue();
					$("#portfolio > div").not(":last").css({"left": "-" + example_width});
				});
			last
				.css({display: "block"})		
				.animate({
					left: 0,
					"opacity": 1
					}, 1000);
			$("#counter .active").text(number_of_examples);	
			current.removeClass("active");
			last.addClass("active");
			$("#page_wrapper div.next").removeClass("active");	
			$("#page_wrapper div.previous").addClass("active");
			$("#page_wrapper div.next div").css("background-image", "url(assets/next_inactive.jpg)");
			$("#page_wrapper div.previous div").css("background-image", "url(assets/previous.jpg)");
		});
	});