var currProject = null;
var currThumb = "01";
var pe = null;
var popupMarkup = "<div class='popup'><div class='puMask'><div class='puWrap'><div class='clearfloat' id='puCont'><div class='colRight'><h3></h3><p class='client'>Client: <a href='' title=''></a></p><p class='blurb'></p><p class='url'><a href='' title=''></a></p></div><div class='colLeft'><img src='' alt='Project example thumbnail image' width='287' height='208' class='mainThumb' /><ul class='thumbList clearfloat'><li class='thumb-01'><img src='' alt='View thumbnail image 01' width='89' height='64' class='thumb-01' /></li><li class='thumb-02'><img src='' alt='View thumbnail image 02' width='89' height='64' class='thumb-02' /></li><li class='thumb-03'><img src='' alt='View thumbnail image 03' width='89' height='64' class='thumb-03' /></li></ul></div></div></div></div><a href='javascript: closePopup();' title='Close window' id='closePopup'>&nbsp;</a></div>";
/*
	<div class='popup'>
		<div class='puMask'>
			<div class='puWrap'>
				<div class='clearfloat' id='puCont'>
					<div class='colRight'>
						<h3></h3>
						<p class='client'>Client: <a href='' title=''></a></p>
						<p class='blurb'></p>
						<p class='url'><a href='' title=''></a></p>
					</div>
					<div class='colLeft'>
						<img src='' alt='Project example thumbnail image' width='287' height='208' class='mainThumb' />
						<ul class='thumbList clearfloat'>
							<li class='thumb-01'><img src='' alt='View thumbnail image 01' width='89' height='64' class='thumb-01' /></li>
							<li class='thumb-02'><img src='' alt='View thumbnail image 02' width='89' height='64' class='thumb-02' /></li>
							<li class='thumb-03'><img src='' alt='View thumbnail image 03' width='89' height='64' class='thumb-03' /></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<a href='javascript: closePopup();' title='Close window' id='closePopup'>&nbsp;</a>
	</div>
*/

function switchEx(id) {
	if (id != currProject) {
		$$("div.puWrap").each(function(d) {
			d.insert("<div class='clearfloat' id='nextPuCont'><div class='colRight'><h3></h3><p class='client'>Client: <a href='' title=''></a></p><p class='blurb'></p><p class='url'><a href='' title=''></a></p></div><div class='colLeft'><img src='' alt='Project example thumbnail image' width='287' height='208' class='mainThumb' /><ul class='thumbList'><li class='thumb-01'><img src='' alt='View thumbnail image 01' width='89' height='64' class='thumb-01' /></li><li class='thumb-02'><img src='' alt='View thumbnail image 02' width='89' height='64' class='thumb-02' /></li><li class='thumb-03'><img src='' alt='View thumbnail image 03' width='89' height='64' class='thumb-03' /></li></ul></div></div>");
		});
		$("puCont").setStyle({
			position: "absolute",
			left: "0",
			top: "0"
		});
		$("nextPuCont").setStyle({
			position: "absolute",
			left: "693px",
			top: "0"
		});
		$$("#puCont h3")[0].update(pe[currProject].h3);
		$$("#puCont p.client a")[0].writeAttribute({
			href: pe[currProject].clientLink,
			title: pe[currProject].clientTitle
		}).update(pe[currProject].client);
		$$("#puCont p.blurb")[0].update(pe[currProject].blurb);
		if ($$("#puCont p.url")[0]) {
			if (pe[currProject].url != null) {
				$$("#puCont p.url a")[0].writeAttribute({
					href: pe[currProject].url,
					title: "Visit " + pe[currProject].title
				}).update("Visit " + pe[currProject].linkText);
			} else 
				$$("#puCont p.url")[0].remove();
		}
		$$("#puCont img.mainThumb")[0].writeAttribute({
			src: rootPath + "project-examples/images/thumb_287_" + currProject + "_" + pe[currProject].image + "-" + currThumb + ".jpg"
		});
		$$("#puCont img.thumb-01")[0].writeAttribute({
			src: rootPath + "project-examples/images/thumb_89_" + currProject + "_" + pe[currProject].image + "-01.jpg"
		});
		$$("#puCont img.thumb-02")[0].writeAttribute({
			src: rootPath + "project-examples/images/thumb_89_" + currProject + "_" + pe[currProject].image + "-02.jpg"
		});
		$$("#puCont img.thumb-03")[0].writeAttribute({
			src: rootPath + "project-examples/images/thumb_89_" + currProject + "_" + pe[currProject].image + "-03.jpg"
		});
		$$("#nextPuCont h3")[0].update(pe[id].h3);
		$$("#nextPuCont p.client a")[0].writeAttribute({
			href: pe[id].clientLink,
			title: pe[id].clientTitle
		}).insert(pe[id].client);
		$$("#nextPuCont p.blurb")[0].update(pe[id].blurb);
		if ($$("#nextPuCont p.url")[0]) {
			if (pe[id].url != null) {
				$$("#nextPuCont p.url a")[0].writeAttribute({
					href: pe[id].url,
					title: "Visit " + pe[id].title
				}).update("Visit " + pe[id].linkText);
			} else 
				$$("#nextPuCont p.url")[0].remove();
		}
		$$("#nextPuCont img.mainThumb")[0].writeAttribute({
			src: rootPath + "project-examples/images/thumb_287_" + id + "_" + pe[id].image + "-01.jpg"
		});
		$$("#nextPuCont img.thumb-01")[0].writeAttribute({
			src: rootPath + "project-examples/images/thumb_89_" + id + "_" + pe[id].image + "-01.jpg"
		});
		$$("#nextPuCont img.thumb-02")[0].writeAttribute({
			src: rootPath + "project-examples/images/thumb_89_" + id + "_" + pe[id].image + "-02.jpg"
		});
		$$("#nextPuCont img.thumb-03")[0].writeAttribute({
			src: rootPath + "project-examples/images/thumb_89_" + id + "_" + pe[id].image + "-03.jpg"
		});
		currProject = id;
		new Effect.Move("puCont", {
			x: -693,
			y: 0,
			mode: "absolute",
			duration: 0.5
		});
		new Effect.Move("nextPuCont", {
			x: 0,
			y: 0,
			mode: "absolute",
			duration: 0.5
		});
		setTimeout("$('puCont').remove(); $$('div.puWrap')[0].down().setStyle({position: 'static'}).writeAttribute('id', 'puCont'); puThumbHovers(); currThumb = '01';", 500);
	}
}

function populatePopup() {
	$$("div.popup h3").each(function(h3) {
		h3.insert(pe[currProject].h3);
	});
	$$("div.popup p.client a").each(function(a) {
		a.writeAttribute({
			href: pe[currProject].clientLink,
			title: pe[currProject].clientTitle
		}).insert(pe[currProject].client);
	});
	$$("div.popup p.blurb").each(function(p) {
		p.insert(pe[currProject].blurb);
	});
	if (pe[currProject].url != null) {
		$$("div.popup p.url a").each(function(a) {
			a.writeAttribute({
				href: pe[currProject].url,
				title: "Visit " + pe[currProject].title
			}).insert("Visit " + pe[currProject].linkText);
		});
	} else {
		$$("div.popup p.url").each(function(p) {
			p.remove();
		});
	}
	$$("div.popup img.mainThumb").each(function(img) {
		img.writeAttribute({
			src: rootPath + "project-examples/images/thumb_287_" + currProject + "_" + pe[currProject].image + "-" + currThumb + ".jpg"
		});
	});
	$$("div.popup img.thumb-01").each(function(img) {
		img.writeAttribute({
			src: rootPath + "project-examples/images/thumb_89_" + currProject + "_" + pe[currProject].image + "-01.jpg"
		});
	});
	$$("div.popup img.thumb-02").each(function(img) {
		img.writeAttribute({
			src: rootPath + "project-examples/images/thumb_89_" + currProject + "_" + pe[currProject].image + "-02.jpg"
		});
	});
	$$("div.popup img.thumb-03").each(function(img) {
		img.writeAttribute({
			src: rootPath + "project-examples/images/thumb_89_" + currProject + "_" + pe[currProject].image + "-03.jpg"
		});
	});
}

function puThumbHovers() {
	$$("#puCont ul.thumbList li img").each(function(img) {
		img.observe("mouseover", function() {
			var mainT = (rootPath == '') ? $$('div.colLeft img.mainThumb')[0].readAttribute("src").split('/')[2].split('-')[0] : $$('div.colLeft img.mainThumb')[0].readAttribute('src').split('/')[3].split('-')[0];
			var thumb = this.readAttribute("class").split("-")[1];
			$$("div.colLeft img.mainThumb")[0].writeAttribute("src", rootPath + "project-examples/images/" + mainT + "-" + thumb + ".jpg");
			currThumb = thumb;
		});
	});
}

function popupReady() {
	$A($$("#topBlock, #bottomBlock")).each(function(b) {
		b.remove();
	});
	$$("body")[0].insert(popupMarkup);
	populatePopup();
	puThumbHovers();
	// if (notIpad) {
		$$("div.popup")[0].setStyle({
			margin: "-176px 0 0 -368px", /* Edit this value.*/
			left: "50%",
			top: "50%",
			zIndex: "9"
		});
	/*} else {
		$$("div.popup")[0].setStyle({
			margin: "176px 0 0 368px",
			left: "50%",
			top: "50%",
			zIndex: "9"
		});
	}*/
	$$("body")[0].insert("<div id='puSubNavWrap_pe' class='puSubNavWrap'><ul id='puSubNav_pe' class='puSubNav'></ul></div><div id='puScrollbar_pe' class='puScrollbar'><div class='puGrip'>&nbsp;</div></div>");
	$$("div.puGrip")[0].setStyle("left: 0;");
	pe.each(function(a, i) {
		if (i != 0) {
			$("puSubNav_pe").firstDescendant().insert({
				before: "<li><a href='javascript:switchEx(" + i + ");' title='" + a.linkText + "'>" + a.h3 + "</a></li>"
			});
		} else 
			$("puSubNav_pe").insert("<li><a href='javascript:switchEx(" + i + ");' title='" + a.linkText + "'>" + a.h3 + "</a></li>");
		var scrollbar = $$("div.puScrollbar")[0];
		var subMenu = $$("ul.puSubNav")[0];
		if (notIpad) {
			new Control.Slider(scrollbar.down(), scrollbar, {
				range: $R(0, (subMenu.getStyle("width").split("px")[0] - $$("div.puSubNavWrap")[0].getStyle("width").split("px")[0])),
				sliderValue: 0,
				onSlide: function(value) {
					subMenu.setStyle({
						left: "-" + value +"px"
					});
				},
				onChange: function(value) {
					subMenu.setStyle({
						left:  "-" + value +"px"
					});
				}
			});
		} else {	// iPad touchscreen JavaScript
			var scrLeftMarg = parseInt(scrollbar.getStyle('left').split('px')[0]);
			var scrRightMarg = (parseInt(scrollbar.getStyle('width').split('px')[0]) + scrLeftMarg) - 22;	// 22 = grip position adjustment
			var scrListDiff = (parseInt(subMenu.getStyle('width').split('px')[0]) - 85) / scrRightMarg;
			/*	ALERT: Edit the above '-' value whenever a 
				project example is added or removed. */
			scrollbar.down().ontouchmove = function(event) {
				event.preventDefault();
				if (event.touches.length == 1) {	// Only deal with one finger
					var touch = event.touches[0];	// Get the information for finger #1
					var node = touch.target;	// Find the node the drag started from
					var scrollList = document.getElementById('puSubNav_pe');
					if ((touch.pageX > scrLeftMarg) && (touch.pageX < scrRightMarg)) {
						var gripPos = (touch.pageX - scrLeftMarg) - 1;	// 1 = grip position adjustment
						node.style.left = gripPos + 'px';
						scrollList.style.left = (0 - (gripPos * scrListDiff)) + 'px';
					}
				}
			}
		}
	});
}

function closePopup() {
	$$("div.popup")[0].remove();
	$$("div.puSubNavWrap")[0].remove();
	if ($$("div.puScrollbar")[0]) 
		$$("div.puScrollbar")[0].remove();
	var pageSize = getPageSize();
	$$("body")[0].insert("<div id='topBlock'></div><div id='bottomBlock'></div>");
	$A($$("#topBlock, #bottomBlock")).each(function(b) {
		b.setStyle({
			height: (document.viewport.getDimensions().height / 2) + "px"
		});
		b.insert(popupMarkup);
	});
	populatePopup();
	$$("#topBlock div.popup")[0].setStyle({
		top: ((document.viewport.getDimensions().height / 2) - 176) + "px" /* Edit this value.*/
	});
	$$("#bottomBlock div.popup")[0].setStyle({
		top: "-176px" /* Edit this value.*/
	});
	new Effect.Move($$("#topBlock div.popup")[0], {
		x: 0,
		y: 176, /* Edit this value.*/
		mode: "relative",
		duration: 0.5
	});
	new Effect.Move($$("#bottomBlock div.popup")[0], {
		delay: 0.5,
		x: 0,
		y: -176, /* Edit this value.*/
		mode: "relative",
		duration: 0.5
	});
	Effect.Fade("screen", {
		from: 0.5,
		to: 0.0,
		duration: 1.0
	});
	setTimeout("$('topBlock').remove(); $('bottomBlock').remove(); $('screen').hide();", 1000);
}

function projectExamplesAjax() {
	$$("body")[0].insert("<div id='screen'>&nbsp;</div>");
	$("screen").hide();
	$$("#topNav li ul.subNav li a").each(function(a) {
		a.observe("click", function(a) {
			if (this.up().readAttribute("class").split("_")[0] == 'pe') {
				currProject = this.up().readAttribute("class").split("_")[1];
				currThumb = "01";
				new Ajax.Request(rootPath + "json/projectExamples.json", {
					method: "get",
					onSuccess: function(transport) {
						pe = transport.responseText.evalJSON();
						var pageSize = getPageSize();
						$("screen").setStyle({
							height: pageSize[1] + "px",
							opacity: 0
						}).show();
						Effect.Fade("screen", {
							from: 0.0,
							to: 0.5,
							duration: 1.0
						});
						$$("body")[0].insert("<div id='topBlock'></div><div id='bottomBlock'></div>");
						$A($$("#topBlock, #bottomBlock")).each(function(b) {
							b.setStyle({
								height: (document.viewport.getDimensions().height / 2) + "px"
							});
							b.insert(popupMarkup);
						});
						populatePopup();
						$$("#topBlock div.popup")[0].setStyle({
							top: (document.viewport.getDimensions().height / 2) + "px"
						});
						$$("#bottomBlock div.popup")[0].setStyle({
							top: "-352px" /* Edit this value.*/
						});
						new Effect.Move($$("#topBlock div.popup")[0], {
							x: 0,
							y: -176, /* Edit this value.*/
							mode: "relative",
							duration: 0.5
						});
						new Effect.Move($$("#bottomBlock div.popup")[0], {
							delay: 0.5,
							x: 0,
							y: 176, /* Edit this value.*/
							mode: "relative",
							duration: 0.5
						});
						setTimeout("popupReady();", 1000);
					}/*,
					onFailure: function() {
						window.alert("Not wroking yet.");
					}*/
				});
				a.stop();
			}
		});
	});
}