// JavaScript Document
window.onload = initAll;

function initAll() {
	clearDisplay();
	getArt(0);
}

function getArt(seriesNum) {
	clearDisplay();
	new Ajax.Request('art.json', {
		method:'get',
		onSuccess: function(transport) {
			var json = transport.responseText.evalJSON(true);
			var jsonObj = Object.toJSON(json); // Not necessary for this script
			var cols = 3;
			var works = json[0].portfolio.series[seriesNum].artwork;
			var titles = "";
			for(var i=0;i<works.length;i++){
				//Button Link Here 
				titles += "<a href=\"#\" onclick=\"showWork("+seriesNum+","+i+")\" />";
					// Actual Image Dislayed Here
					titles += "<img ";
					titles += "src=\"artthumbs/";
					var namechange = works[i].imageName;
					titles += namechange.gsub('.jpg','-trans.png'); // changes .jpg to -trans.png
					titles += "\" ";
					titles += "id=\"painting" + i + "\" ";
					titles += "/>";
					titles += "</a>";
				
			}
			$('thumbBlock').update(titles);				
		}
	});
	
	if(seriesNum == 0) { // Bubbles
		//$('gradBackgroundBox').show().setStyle({backgroundImage:'url(graphics/jrp_bubble_bg_grad.jpg)'});
		//$('basicHeader').show().setStyle({backgroundImage:'url(graphics/parenti_topbar_bubble-trans.png)'});
		$('infoBlock').show().setStyle({color:'#993300'}); // Make text color dark again if prev. page was Nights
	} else
	if(seriesNum == 1) { // Nights
		//$('gradBackgroundBox').show().setStyle({backgroundImage:'url(graphics/jamesparenti_street.jpg)'});
		//$('basicHeader').show().setStyle({backgroundImage:'url(graphics/parenti_dark_top-trans.png)'});
		$('infoBlock').show().setStyle({color:'#CC6633'}); // Make text color brighter
	}
	if(seriesNum == 2) { // Tension
		//$('gradBackgroundBox').show().setStyle({backgroundImage:'url(graphics/jamesparenti_background_tension.jpg)'});
		//$('basicHeader').show().setStyle({backgroundImage:'url(graphics/parenti_dark_top-trans.png)'});
		$('infoBlock').show().setStyle({color:'#993300'}); // Make text color dark again if prev. page was Nights
	}
}

function showWork(seriesNum,idNum) {
	
	//Hide Text from any previous displays:
	$('infoBlock').show().setStyle({visibility:'hidden'});
	$('imgBlock').update("");
			var loadImage = "<div id=\"loadBlock\"><img src=\"graphics/loading.gif\" border=\"0\" " 
						+ "style=\"margin-left:auto;margin-right:auto;\"></div>";
	$('fullWork').insert({before:loadImage});					
	new Ajax.Request('art.json',{
		method:'get',
		onComplete: function(transport) {
			var workJson = transport.responseText.evalJSON(true);
			var tgt = workJson[0].portfolio.series[seriesNum].artwork[idNum];
			//Work Image Dislay
				var workImage = "<img style=\"display:none;\" src=\"artimages_display/" 
								+ tgt.imageName 
								+ "\" id=\"displayImage\""
								+ ">";			
			//All other info	
				var workInfo = tgt.workTitle
							 + "<br /><br />" 
							 + tgt.prodYear + "<br />"
							 + tgt.medium + "<br />"
							 + tgt.dimensionHoriz + " x " + tgt.dimensionVert + "in"
							 + "<br />("
							 + Math.round(tgt.dimensionHoriz*2.54)+" x "
							 + Math.round(tgt.dimensionVert*2.54)+"cm)"
							 + "<br />";
							
			var newBoxWid = tgt.displayWidth; // Gets image width
			var fullWid = $('pageRight').getWidth(); // Gets pageRight Width
			var infoWid = $('infoBlock').getWidth();
			var currWid = newBoxWid + infoWid; // Combined width of current image + info
			var setWid = fullWid - currWid;
			
			// Height and Padding top
			var fullHeight = $('pageRight').getHeight();
			var imgHeight = tgt.displayHeight; //get Current Image Heights
			var padTopSet = (fullHeight-imgHeight)/2;
			
			//Activate a hidden div called hideDiv and load the image into that
			var hideDiv = "<div id=\"hideDiv\">&nbsp;</div>";
			
			
			var img = new Image();
			img.src = "artimages_display/"+tgt.imageName;
			img.oncomplete = alertIt(); 
			function alertIt() {
		
			$('lastDiv').insert({after:hideDiv});
			$('hideDiv').update("workImage");
			
	
			$('infoBlock').update(workInfo);
			
			$('imgBlock').show().setStyle({
					width:newBoxWid+'px',
					right:setWid/2 - 10 + 'px'
				});
			$('infoBlock').show().setStyle({
					right:(setWid/2 + 10) + 'px',
					display:'block'
				});
			$('fullWork').show().setStyle({
					paddingTop:padTopSet + 'px', 
					height:imgHeight + 'px'});
			setTimeout(showText,1200);
			function showText() { 
				$('infoBlock').show().setStyle({visibility:'visible'});
			}
			
			setTimeout(showDisplayPc,500);
			$('loadBlock').remove();
			function showDisplayPc() {
			
				$('imgBlock').update(workImage);
				//new Effect.Opacity('displayImage',{from:0.0,to:1.0,duration:0.5});
				new Effect.Appear('displayImage',{duration:0.5});
				
			}
		}
		}			 
	});
}

function clearDisplay() {
		$('infoBlock').update("&nbsp;");
		$('imgBlock').update("&nbsp;");	
}

function showAbout() {
	if($('contactBoxOuter') != undefined) {
		hideContact();
	}
	
	if($('statementContainer') != undefined) {
		closeStatement();
	}
	
	
	var aboutDiv = "<div id=\"aboutBoxOuter\"><div>&nbsp;</div></div>";
	var aboutContent = "<div id=\"aboutText\">"
				+ "<strong>About The Artist</strong><br /><br />"
				+ "James Parenti is a Chicago-based oil painter.  He is a graduate of the University of"
				+ " Illinois at Champaign-Urbana and has been working and exhibiting professionally since 1999."
				+ "<br /><br /><div align=\"center\"><img src=\"graphics/james-parenti.jpg\" border=\"0\"></div>"
				+ "<div id=\"closeBox\" ><a href=\"#\" onclick=\"hideAbout(); return false;\">[x]Close</a></div>"
				+ "</div>";
	
	$('thumbBlock').insert({before:aboutDiv});
	//Change About Button's action from showAbout to hideAbout here
	$('aboutButton').replace('<div id="aboutButton"><a href="#" onclick="hideAbout(); return false;">About</a></div>');
		
	new Effect.SlideDown('aboutBoxOuter',{ afterFinish: function(){ $('aboutBoxOuter').update(aboutContent); }});
}

function hideAbout() {
	// Re-initialize About button
	$('aboutBoxOuter').replace('<div id=\"aboutBoxOuter\"><div></div></div>');
	$('aboutButton').replace('<div id="aboutButton"><a href="#" onclick="showAbout(); return false;">About</a></div>');
	// Remove About Content
	new Effect.SlideUp('aboutBoxOuter',{ afterFinish:function(){$('aboutBoxOuter').remove();}});
}

function showContact() {
	if($('aboutBoxOuter') != undefined) {
		hideAbout();
	}
	
	if($('statementContainer') != undefined) {
		closeStatement();
	}
	
	var contactDiv = "<div id=\"contactBoxOuter\"><div id=\"formArea\">&nbsp;</div></div>";
	$('contactButton').replace('<div id="contactButton"><a href="#" onclick="hideContact(); return false;">Contact</a></div>');
	$('thumbBlock').insert({before:contactDiv});
	new Effect.SlideDown('contactBoxOuter',{afterFinish:function(){getContactForm();}});
	
}

// Form Activity Here
function getContactForm() {
	new Ajax.Request('parenti_form.html',
	{
		method:'get',
		onSuccess:function(transport) {
				var formLoaded = transport.responseText;
				$('formArea').update(formLoaded);
				$('submitBtn').disable();
			}
	 });
	$('lastDiv').insert({after:"<div id=\"posCheckBox\">&nbsp;</div>"});
	
}

function validateThis(obj) {
	// In form, email field name must be 'email' or validation won't work
	var result = $(obj).getValue();
	if(obj == 'firstname' || obj == 'lastname') { 
	 	if(!result) {
			$(obj).next().setStyle({visibility:'visible',display:'inline'});
			$('submitBtn').disable();
		} else {
			$(obj).next().setStyle({visibility:'hidden',display:'none'});
			$('submitBtn').enable();
		}
	} else 
	if(obj == 'email') {
		var address = result.toString();
		if(address.length <= 4) {
			$(obj).next().setStyle({visibility:'visible',display:'inline'});
			$('submitBtn').disable();
		} 
		else 
		if(address.length >= 5) {
					address = address.replace(/^\s+/,"");  // Trim whitespace before email		
					address = address.replace(/^\s*|\s*$/g,''); // Trim any whitespace after email
			
					// Now validate email address
					var regex = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
					
					if(address.match(regex)) {
						$(obj).next().setStyle({visibility:'hidden',display:'none'});
							$('submitBtn').enable();
					} else
					if(!address.match(regex)) {
						$(obj).next().setStyle({visibility:'visible',display:'inline'});
							$('submitBtn').disable();
					}	
		}
	}	
	}

/*  Form Info --
	This functionality is just going to assume that the jrpm_ajax.php file works
	because frankly it's a pain in the ass to work with otherwise
*/

function submitRequest() {
	var uString = $('parentiForm').serialize();
	var urlObject = "jrpm_ajax.php" + "?" + uString + "Submit+Query";

	new Ajax.Updater('posCheckBox','jrpm_ajax.php',
		{
		method:'post',
		parameters: urlObject,
		onSuccess: checkResponse
	});
}

function checkResponse() {
			$('formArea').replace("<div id=\"thanksBox\">Thanks!</div>");
			setTimeout(hideContact,700);	
}

function resetForm() {
	$('parentiForm').reset();	
}


function hideContact() {
	var contactDiv = "<div id=\"contactBoxOuter\"><div>&nbsp;</div></div>";
	new Effect.SlideUp('contactBoxOuter',{afterFinish:function(){ $('contactBoxOuter').remove(); }});
	$('contactButton').replace('<div id="contactButton"><a href="#" onclick="showContact(); return false;">Contact</a></div>');
	if($('posCheckBox')) {
	$('posCheckBox').remove();
	}
}

/* Art Statement */
function showStatement() {
	if($('aboutBoxOuter') != undefined) {
		hideAbout();
	}
	
	if($('contactBoxOuter') != undefined) {
		hideContact();
	}
	// OLD FORMAT -- var statementBox = "<div id=\"statementContainer\">&nbsp;</div>";
	// 2010 FORMAT
	var statementBox = "<div id=\"statementContainer\">"
					   + "<div class=\"statementCol colLeft\" id=\"statementLeft\">&nbsp;</div>"
					   + "<div class=\"statementCol colMid\" id=\"statementMiddle\">&nbsp;</div>"
					   + "<div class=\"statementCol colRight\" id=\"statementRight\">"
					   + "<div id=\"closeBox\" style=\"visibility:hidden;\"><a href=\"#\"  onclick=\"closeStatement(); return false;\">[x] Close</a></div>"
					   + "</div>"
					   + "</div>";
	
	
	
	$('pageLeft').insert({before:statementBox});
	
	$('statementButton').replace("<div id=\"statementButton\"><a href=\"#\" onclick=\"closeStatement(); return false;\">Artist Statement</a></div>");
	
	
	new Effect.Opacity('statementContainer',{from:0.0,to:1.0, duration:1.0});
	setTimeout(getStatementText,1100);
}



function getStatementText() {
	/* OLD WAY */
	/*
	new Ajax.Request('statement.php', {
		method:'get',
		onSuccess: function(transport) {
			var artStatement = transport.responseText;
			$('statementContainer').replace("<div id=\"statementContainer\">"+artStatement+"</div>");
		}
	});
	*/
	/* NEW WAY */
	
	new Ajax.Request('sitetext/bubbles.txt', {
		method:'get',
		onSuccess: function(transport) {
			var stateLeft = transport.responseText;
			$('statementLeft').update(stateLeft);
		}
	});
	
	new Ajax.Request('sitetext/nights.txt', {
		method:'get',
		onSuccess: function(transport) {
			var stateMid = transport.responseText;
			$('statementMiddle').update(stateMid);
		}
	});
	
	new Ajax.Request('sitetext/tension.txt', {
		method:'get',
		onSuccess: function(transport) {
			var stateRt = transport.responseText;
			Element.insert($('closeBox'),{'before':stateRt});
			setTimeout(function() { $('closeBox').setStyle({visibility:'visible'});},300);
		}
	});
		
}

function closeStatement() {
	if($('statementContainer')) {
	$('statementContainer').replace("<div id=\"statementContainer\">&nbsp;</div>");
	}
	new Effect.Opacity('statementContainer',{from:1.0,to:0.0, duration:0.6});
	setTimeout(removeStatementBox,800);
	
	$('statementButton').replace("<div id=\"statementButton\"><a href=\"#\" onclick=\"showStatement(); return false;\">Artist Statement</a></div>");
	
	
}
function removeStatementBox() {
	$('statementContainer').remove();	
}