// JavaScript Document

// Before Images
var galleryPath = 'images/gallery/';
var portfolioImagesBef = new Array
('spacer_blank.gif' //1
 ,'3-BeforeKitchen.jpg' //2
 ,'spacer_blank.gif' //3
 ,'2-BeforeBedroom.jpg' //4
 ,'spacer_blank.gif' //5
 ,'spacer_blank.gif' //6
 ,'spacer_blank.gif' //7
 ,'spacer_blank.gif' //8
 ,'spacer_blank.gif' //9
 ,'29-BeforeDiningRmPink.jpg' //10
 ,'7-BeforeGuestBath.jpg' //11
 ,'spacer_blank.gif' //12
 ,'spacer_blank.gif' //13
 ,'spacer_blank.gif' //14
 ,'25-BeforeSinks.jpg' //15
 ,'28-Beforeshower.jpg' //16
 ,'spacer_blank.gif' //17
 ,'30-before-full-kitchen-D.gif' //18
 ,'31-Flynn-before-1.jpg' //19
 ,'spacer_blank.gif' //20
);
// After Images
var portfolioImagesAft = new Array
('8-Console.jpg' //1
 ,'20-Kitchen.jpg' //2
 ,'17-CouchPainting.jpg' //3
 ,'1-AfterBedroom.jpg' //4
 ,'18-FamilyRm.jpg' //5
 ,'12-coffeetable.jpg' //6
 ,'24-TableLamp.jpg' //7
 ,'21-LivingRmGray2.jpg' //8
 ,'21b-LivingRmWindow.jpg' //9
 ,'16-DiningRmPink.jpg' //10
 ,'6-AfterGuestBath.jpg' //11
 ,'19-GuestSink.jpg' //12
 ,'5-LivingRmTan.jpg' //13
 ,'15-ModernDiningRm.jpg' //14
 ,'26-AfterBathCounter.jpg' //15
 ,'27-shower.jpg' //16
 ,'9-Bar.jpg' //17
 ,'30-Kitchen-7179-final.jpg' //18
 ,'31-Flynn-after.jpg' //19
 ,'32-Geany-bedroom-after.jpg' //20
);
 

var i;
var imageCacheBef = new Array();
var imageCacheAft = new Array();

var sscontrolStart = 'images/' + 'StartStop2.gif';
var sscontrolStop = 'images/' + 'StartStop1.gif';
var sscontrol = '';

var debug = false;
var running = false;
var currentImage = 0;
var imageIdBef;
var imageIdAft;
var imageBef;
var imageAft;

var fadeInOpacityIncr=5; // 1-100; larger # means bigger opacaity jumps
var fadeInTimeIncr=50; // msec between fades
var fadeOutOpacityIncr=-5; // 1-100; larger # means bigger opacaity jumps
var fadeOutTimeIncr=50; // msec between fades
var ssTime = 4000; // msec between slides
var ssBlank = 500; // time when no slide is shown

var nextEvent; // setTimeout identifier			
					
// get refs
imageIdBef = 'portfolioImageBef';
imageIdAft = 'portfolioImageAft';
/* ------------------------------------------------------------ */
function setObjects() {
	imageBef = document['portfolioImageBef'];
	imageAft = document['portfolioImageAft'];
	
	imageBef2 = document.getElementById('portbef');
	imageAft2 = document.getElementById('portaft');
}
				
/* ------------------------------------------------------------ */
function toggleShow() {
	setObjects();
	if (running == false) {
		startShow();
	} else {
		stopShow();
	}
}

/* ------------------------------------------------------------ */
function startShow() {
		log('******** SLIDESHOW STARTED ********');
		// Clear next event in case on is there
		clearTimeout(nextEvent);
		running = true;
		document['sscontrol'].src = sscontrolStop;
		log('Fading out current image');
		fadeOut(100);
}

/* ------------------------------------------------------------ */
function stopShow() {
		log('******** SLIDESHOW STOPPED ********');
		running = false;
		document['sscontrol'].src = sscontrolStart;
		// Clear any events
		clearTimeout(nextEvent);
		// Show current images full strength
     	setOpacity(imageBef2, 100);
     	setOpacity(imageAft2, 100);
}

/* ------------------------------------------------------------ */
function manualFlip(diff) {
	setObjects();
	stopShow();
	currentImage = currentImage + diff;
	if (currentImage >= portfolioImagesBef.length) { currentImage = 0; }
	else if (currentImage < 0) { currentImage = portfolioImagesBef.length-1; }

	newImage = 'url(' + galleryPath + portfolioImagesBef[currentImage] + ')';
	imageBef2.style.backgroundImage = newImage;
	
	newImage = 'url(' + galleryPath + portfolioImagesAft[currentImage] + ')';
	imageAft2.style.backgroundImage = newImage;

} 

/* ------------------------------------------------------------ */
function preloadImages() { 

     setOpacity(document['portfolioImageBef'], 0);
     setOpacity(document['portfolioImageAft'], 0);
	 //setOpacity(document.getElementById('portbef'),100);
	 //setOpacity(document.getElementById('portaft'),100);

for (i=0; i<portfolioImagesBef.length; i++)
	{
		var img = new Image();
		img.src = galleryPath + portfolioImagesBef[i];
		imageCacheBef[i]=img;
	}
	for (i=0; i<portfolioImagesAft.length; i++)
	{
		var img = new Image();
		img.src = galleryPath + portfolioImagesAft[i];
		imageCacheAft[i]=img;
	}


}

/* ------------------------------------------------------------ */
function setOpacity(obj, opacity) {

  opacity = (opacity == 100)?99.999:opacity;
  
  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";
  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;
  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;
  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;

}


/* ------------------------------------------------------------ */
function fadeOut(opacity) {

	if (document.getElementById) {
		// Set opacity on each image
     	setOpacity(imageBef2, opacity);
     	setOpacity(imageAft2, opacity);
		
    	if (opacity <= 0) {
  			log('..Fade out complete; get next image');
			nextImage();
		} else {
			// Repeat fadeOut with next increment
     		opacity += fadeOutOpacityIncr;
			if (opacity < 0) {opacity=0;} // last setting will be zero
			nextEvent = setTimeout("fadeOut("+opacity+");", fadeOutTimeIncr);
		}
	}
	
}

/* ------------------------------------------------------------ */
function nextImage() {

	// Increment image pointer (into zero-based array)
	currentImage++;		
	// If currentImage points past the last image (length-1), then reset back to zero
	if ( currentImage >= portfolioImagesBef.length) { currentImage = 0; }
		
	// Bring in new images
	newImage = 'url(' + galleryPath + portfolioImagesBef[currentImage] + ')';
	imageBef2.style.backgroundImage = newImage;
	
	newImage = 'url(' + galleryPath + portfolioImagesAft[currentImage] + ')';
	imageAft2.style.backgroundImage = newImage;

	log('Fading in new image');
	nextEvent = setTimeout("fadeIn(0);", ssBlank);
	
}

/* ------------------------------------------------------------ */
function fadeIn(opacity) {
	
  if (document.getElementById) {
		// Set opacity on each image
     	setOpacity(imageBef2, opacity);
     	setOpacity(imageAft2, opacity);
		
    	if (opacity >= 100) {
  			log('..Fade in complete; set next slide for '+ssTime);
			nextEvent = setTimeout("fadeOut(100);",ssTime); 
		} else {
			// Repeat fadeIn with next increment
     		opacity += fadeInOpacityIncr;
			if (opacity > 100) {opacity=100;} // last setting will be 100
			nextEvent = setTimeout("fadeIn("+opacity+");", fadeInTimeIncr);
		}
  }
}

/* ------------------------------------------------------------ */
function log(msg) {
	if (debug == true) {
		console.log(msg);
	}
}