/*- start background pixel image fader
---------------------------------------------------------------------------*/

var siteRoot = '/';

function init() { 
	initPixelFade();
}

function newWindow(portfolio) {

	portfolioWindow = window.open(portfolio,'portfolioWin','width=730,height=615,scrollbars=yes,resizable=yes')
	portfolioWindow.focus()

}

window.onload = init;

$(document).ready(function(){
							  
	/*- background pixel fader play / pause
	---------------------------------------------------------------------------*/

   $("#bgOverlay").hover(function(){
		 	$(this).css("background-image", playPauseImg);
		},function(){
		 	$(this).css("background-image", 'none');
	});
   $("#bgOverlay").click(function(event){
		if(playingBG){
			playPauseImg = "url("+siteRoot+"images/buttons/play.gif)";
			pixelFadeStop();
		}else{
			playPauseImg = "url("+siteRoot+"images/buttons/pause.gif)";
			pixelFadeResume();
		}
		playingBG = !playingBG;
		$(this).css("background-image", playPauseImg);
	});
	
	// Contact toggle
	$("div.contact > div").hide();
	$("div.contact a").hover(function() {
		$("div.contact > div").fadeIn(500);
	}, function() {
		setTimeout(function() {
			$("div.contact > div").fadeOut(500);	
		}, 2000);
	});
});



var baseFileName = "inc/slideshow/";
var bgImgs = new Array('1','2','3','4','5');
var bgLinks = new Array(
	'http://praxisla.com/ppccd12.htm', 
	'http://praxisla.com/pavpt07.htm',
	'http://praxisla.com/peppm01.htm',
	'http://praxisla.com/ppccd07.htm',
	'http://praxisla.com/ppccd11.htm'
);
var imageHold = 3000;
var pixelsPerCycle = 1600;
var cycleTime = 60;

imgNum = 0;
firstImage = true;
function copyPixel(fromCanvas, toCanvas, index) {
	//finds out the row number
	var row = Math.floor(index/halfWidth);
	index += halfWidth; //not sure why this patch was needed
	index *= 2; //gaps them out horizontally
	index += width * row; //gaps them out vertically
	index *= 4; //adjusts for the four values below
	toCanvas.data[index] = fromCanvas.data[index];
	toCanvas.data[index+1] = fromCanvas.data[index+1];
	toCanvas.data[index+2] = fromCanvas.data[index+2];
	toCanvas.data[index+3] = 0xff; //alpha, 0xff=opaque
}
function resetFadeArray() {
	fadeArray = new Array(width * height / 4);
	for (i = 0; i < fadeArray.length; i++) { fadeArray[i] = i; }
	fadeArray = shuffleArray(fadeArray);
}
function pixelFadeInit() {
	resetFadeArray();
	if(typeof(fadeTimeout) != 'undefined') clearTimeout(fadeTimeout);
	fadeTimeout = setTimeout(pixelFadeStart, imageHold);
}
function pixelFadeStart() {
	if(typeof(fadeInterval) != 'undefined') clearInterval(fadeInterval);
	fadeInterval = setInterval(pixelFade, cycleTime);
}
function pixelFadeResume() {
	if(!fadeArray.length) resetFadeArray();
	pixelFadeStart();
}
function pixelFadeStop() {
	if(typeof(fadeInterval) != 'undefined') clearInterval(fadeInterval);
	if(typeof(fadeTimeout) != 'undefined') clearTimeout(fadeTimeout);
}
function pixelFade() {
	if(!fadeArray.length) {
		pixelFadeStop();
		loadNextImage();		
		return 0;
	}
	
	for (i = 0; i < pixelsPerCycle; i++) {
		if(fadeArray.length) {
			var index = fadeArray.pop();
			copyPixel(imageDataA, imageDataFinal, index);
		}else{
			$('a.slideshow-target').attr('onclick', 'javascript:newWindow("'+bgLinks[imgNum]+'"); return false;');
			
		}
	}
	c.putImageData(imageDataFinal, 0, 0);
}
function pixelFadeFirstImage() {
	firstImage = false;
	resetFadeArray();
	var loop = fadeArray.length;
	for (i = 0; i < loop; i++) {
		var index = fadeArray.pop();
		copyPixel(imageDataA, imageDataFinal, index)
	}
	c.putImageData(imageDataFinal, 0, 0);
	loadNextImage();	
}
function shuffleArray(o) { //v1.0
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
};
function loadNextImage() { 
	imgNum++;
	if(imgNum>=bgImgs.length) imgNum=0;
	imgObjA.src = siteRoot+baseFileName+bgImgs[imgNum]+'.jpg'; // Set source path
};
function initPixelFade(){
	// bgImgs = shuffleArray(bgImgs);
	var firstImgSrc = siteRoot+baseFileName+bgImgs[imgNum]+'.jpg';
	if($.browser.msie && $.browser.version<9) {
		var bgSrc = "background-image: url('"+firstImgSrc+"') no-repeat";
		document.getElementById("bgImg").style.background = bgSrc;
	}else{
		element = document.getElementById("canvas");
		c = element.getContext("2d");
		
		elementA = document.getElementById("imgA");
		cA = elementA.getContext("2d");
		
		width = parseInt(element.getAttribute("width"));
		height = parseInt(element.getAttribute("height"));
		halfWidth = width/2;
		
		c.fillStyle = "rgba(0, 0, 0, 1)";  
		c.fillRect(0, 0, width, height);
		
		//img A
		imgObjA = new Image();   // Create new Image object
		imgObjA.onload = function(){
			cA.drawImage(imgObjA, 0, 0);
			imageDataFinal = c.getImageData(0, 0, width, height);
			imageDataA = cA.getImageData(0, 0, width, height);
			if(firstImage) pixelFadeFirstImage();
			else pixelFadeInit();
		}
		imgObjA.src = firstImgSrc; // Set source path
	}
}