(function () {

var DOWNLOAD_BUTTON_MIN_WIDTH = 192;
var extensionBodyBackgroundTopHeight = 271;

var screenShotsMargins = 25;
var prevNextButtonsOuterWidth = 121;
var $extensionScreenshots, $screenshotsWrapper, $screenshotLinks, $images;
var filmStrip = new function() {
	this.totalImages;
	this.images = new Array();
	this.viewedImagesWidth;
	this.width;
	this.mostLeftViewedImage = 0;
	this.mostRightViewedImage;
}
var ImageObj = function() {
	this.outerWidth;
	this.width;
	this.height;
}

$(document).ready(function(){
	$extensionScreenshots = $("#extensionScreenshots");
	$screenshotsWrapper = $extensionScreenshots.find("#screenshotsWrapper");
	$screenshotLinks = $screenshotsWrapper.find(".screenshotLink");
	$images = $(".screenshot");
	
	buildBackgrounds();
	buildShadows();
	waitUntilAllImagesAreLoaded();
});

function buildBackgrounds() {
	// Build grain background
	$("#extensionHeaderBackgroundGrain").css({
		display:	"block",
		height:		$("#extensionHeader").outerHeight(true) + "px",
		opacity:	0.04
	});
	
	// Build download Button Background
	var buttonWidth = $("#downloadButton").outerWidth(true);
	if (buttonWidth < DOWNLOAD_BUTTON_MIN_WIDTH) {
		buttonWidth = DOWNLOAD_BUTTON_MIN_WIDTH;
	}
	$("#downloadButtonContainer").css({
		width:		buttonWidth+"px"	
	});
	$("#downloadButtonBackground").css({
		display:	"block",
		width:		buttonWidth+"px"	
	});
	
	// Build body gradient background
	var $extensionBody = $("#extensionBody");
	extensionBodyHeight = $extensionBody.outerHeight(true);
	var gradientHeight = extensionBodyHeight - extensionBodyBackgroundTopHeight;
	var gradientWidth = $extensionBody.outerWidth(true);

	if (extensionBodyHeight > extensionBodyBackgroundTopHeight) {
		// First try to draw <canvas>
		var $canvas = $("<canvas id=\"extensionBodyBackgroundGradient\"></canvas>").prependTo($extensionBody);
		if ($canvas.get(0).getContext) {
			$canvas.attr("width",gradientWidth);
			$canvas.attr("height",gradientHeight);
			var cssObj = {
				position:	"absolute",
				top:		extensionBodyBackgroundTopHeight + "px",
				left:		"0px"
			}
			$canvas.css(cssObj);		
			var ctx = $canvas.get(0).getContext('2d');
			var lingrad = ctx.createLinearGradient(0,0,0,gradientHeight);
			lingrad.addColorStop(0, '#F9FDFE');
			lingrad.addColorStop(1, '#D2F2F8');
			ctx.fillStyle = lingrad;
			ctx.fillRect(0,0,gradientWidth,gradientHeight);
		}
		// If <canvas> not supported make Microsoft CSS Filter
		else {
			$canvas.remove();
			var $gradient = $("<div></div>").prependTo($extensionBody);
			$gradient.attr("id","extensionBodyBackgroundGradient");
			var cssObj = {
				position:	"absolute",
				top:		extensionBodyBackgroundTopHeight + "px",
				left:		"0px",
				width:		"100%",
				overflow:	"hidden",
				height:		gradientHeight + "px",
				filter:		"progid:DXImageTransform.Microsoft.Gradient(startColorstr=#FFF9FDFE, endColorstr=#FFD2F2F8))",
				zIndex:		-1
			}
			$gradient.css(cssObj);
		}
	}
}

function buildShadows() {
	$(".avatar .shadow").css({
		display:	"block",
		opacity:	0.2
	});
}

function waitUntilAllImagesAreLoaded() {
	
	var totalImages = $images.length;
	var numOfLoadedImages = 0;
	var tempImages = new Array();
	var isBuildFilmStripInvoked = false; 
	var $badImages = new Array();
	$images.each(function(i) {
		tempImages[i] = new Image();
		tempImages[i].onload = function() {
			if (!tempImages[i].counted) {
				addImageCount(i);
			}
		}
		tempImages[i].onerror = function() {
			if (!tempImages[i].counted) {
				$badImages.push($images.eq(i));
				addImageCount(i);
			}
		}
		tempImages[i].src = this.src;
	});
	
	function addImageCount(i) {
		numOfLoadedImages++;
		tempImages[i].counted = true;
		if (numOfLoadedImages == totalImages) {
			if (!isBuildFilmStripInvoked) {
				isBuildFilmStripInvoked = true;
				for (var j = 0; j < $badImages.length; j++)
					$badImages[j].parent().remove();
				checkFilmStripWidth();
			}
		}
	}
	
	// after some time run the buildFilmStrip if it was not invoked before;  
//	window.setTimeout(function() {
//		if (!isBuildFilmStripInvoked) {
//			isBuildFilmStripInvoked = true;
//			buildFilmStrip();
//		}
//	}, 5000);
}

function checkFilmStripWidth() {
	
	var screenShotsTotalWidth = 0;
	$images = $(".screenshot");
	filmStrip.totalImages = $images.length;;
	$images.each(function(index) {
		var screenshotOuterWidth = this.width + screenShotsMargins*2;
		filmStrip.images[index] = new ImageObj();
		filmStrip.images[index].outerWidth = screenshotOuterWidth;
		filmStrip.images[index].width = this.width;
		filmStrip.images[index].height = this.height;
		screenShotsTotalWidth += screenshotOuterWidth;
	});
	if ($extensionScreenshots.width() < screenShotsTotalWidth)
		buildFilmStrip();
}

function buildFilmStrip() {
	$(window).bind("resize",refreshFilmStrip);
	refreshFilmStrip();
	
	$prev = $("<a id='prevScreenshot' href='#'></a>");
	$next = $("<a id='nextScreenshot' href='#'></a>");
	$extensionScreenshots.prepend($prev);
	$extensionScreenshots.append($next);
	
	$prev.bind("click", {dir:"left"}, scrollFilmStrip);
	$next.bind("click", {dir:"right"}, scrollFilmStrip);
}

function refreshFilmStrip() {
	filmStrip.width = $extensionScreenshots.width() - prevNextButtonsOuterWidth*2;
	$screenshotsWrapper.css("width",filmStrip.width+"px");
	var viewedImagesTotalWidth = 0;
	for (var i = filmStrip.mostLeftViewedImage; i < filmStrip.totalImages; i++) {
		viewedImagesTotalWidth += filmStrip.images[i].outerWidth;
		if (viewedImagesTotalWidth > filmStrip.width) {
			$screenshotLinks.eq(i).css("display","none");
		}
		else {
			$screenshotLinks.eq(i).css("display","inline");
			filmStrip.mostRightViewedImage = i;
			filmStrip.viewedImagesWidth = viewedImagesTotalWidth;
		}
	}
	if (filmStrip.mostRightViewedImage == filmStrip.width - 1 && filmStrip.mostLeftViewedImage != 0) {
		for (var i = filmStrip.mostLeftViewedImage - 1; i >= 0; i--) {
			viewedImagesTotalWidth += filmStrip.images[i].outerWidth;
			if (viewedImagesTotalWidth <= filmStrip.width) {
				$screenshotLinks.eq(i).css("display","inline");
				filmStrip.mostLeftViewedImage = i;
				filmStrip.viewedImagesWidth = viewedImagesTotalWidth;
			}
		}
	}
}

function scrollFilmStrip(event) {
	var dir = event.data.dir;
	// Check that we are not on boundaries of the filmstrip.
	if ( (filmStrip.mostLeftViewedImage == 0 && dir == "left") ||
		 (filmStrip.mostRightViewedImage == filmStrip.totalImages - 1 && dir == "right"))
		 return false;
	
	var availWidth = filmStrip.width - filmStrip.viewedImagesWidth;
	
	if (dir == "right") {
		var incomingImageIndex = filmStrip.mostRightViewedImage + 1;
		var leavingImageIndex = filmStrip.mostLeftViewedImage;
		var delta = 1;
	}
	else {
		var incomingImageIndex = filmStrip.mostLeftViewedImage - 1;
		var leavingImageIndex = filmStrip.mostRightViewedImage;
		var delta = -1;
	}
	
	var numOfIncomingImages = 1;
	var numOfLeavingImages = 0;
	var incomingImagesWidth = filmStrip.images[incomingImageIndex].outerWidth;
	
	// Check how many images need to leave to make space for one image to enter
	for (var i = leavingImageIndex; availWidth < incomingImagesWidth; i += delta) {
		availWidth += filmStrip.images[i].outerWidth[i];
		numOfLeavingImages++;
	}
	
	// Check if there is a space to enter for more that one image
	for (var i = incomingImageIndex+delta; i >=0 && i < filmStrip.totalImages; i += delta) {
		incomingImagesWidth += filmStrip.images[i].outerWidth;
		if (availWidth >= incomingImagesWidth) {
			numOfIncomingImages++;
			filmStrip.viewedImagesWidth = filmStrip.width - (availWidth - incomingImagesWidth);
		}
		else
			break;
	}

	if (dir == "right") {
		filmStrip.mostLeftViewedImage += numOfLeavingImages;
		filmStrip.mostRightViewedImage += numOfIncomingImages;
	}
	else {
		filmStrip.mostLeftViewedImage -= numOfIncomingImages;
		filmStrip.mostRightViewedImage -= numOfLeavingImages;
	}
	
	var transitionRatio = numOfIncomingImages < numOfLeavingImages ? numOfIncomingImages/numOfLeavingImages : numOfLeavingImages/numOfIncomingImages;
	var duration = 200;
	var steps = 10;
	var millisecondsPerStep = parseInt(duration/steps);
	var step = 1;

	for (var i = 0; i < numOfIncomingImages; i++) {
		var index = incomingImageIndex + i*delta;
		$screenshotLinks.eq(index).css({
			margin:		"0px",
			display:	"inline"
		});
		$images.eq(index).css({
			width:		"0px",
			height:		"0px",
			opacity:	0			
		});
	}

	window.setTimeout(rollAnimation, 0)
	
	function rollAnimation() {
		var percent = step/steps;
		
		for (var i = 0; i < numOfLeavingImages; i++) {
			var index = leavingImageIndex + i*delta;
			$screenshotLinks.eq(index).css({
				margin:		Math.round((1-percent)*screenShotsMargins)+"px"
			});
			
			$images.eq(index).css({
				width:		Math.round((1-percent)*filmStrip.images[index].width)+"px",
				height:		Math.round((1-percent)*filmStrip.images[index].height)+"px",
				opacity:	(1-percent)
			});
		}
	
		for (var i = 0; i < numOfIncomingImages; i++) {
			var index = incomingImageIndex + i*delta;
			
			$screenshotLinks.eq(index).css({
				margin:		Math.round(percent*screenShotsMargins)+"px"
			});
			
			$images.eq(index).css({
				width:		Math.round(percent*filmStrip.images[index].width)+"px",
				height:		Math.round(percent*filmStrip.images[index].height)+"px",
				opacity:	percent
			});
		}		

		step++;
		if (step <= steps)
			window.setTimeout(rollAnimation, millisecondsPerStep);
		else {
			for (var i = 0; i < numOfLeavingImages; i++) {
				var index = leavingImageIndex + i*delta;
				$screenshotLinks.eq(index).attr("style","display:none");
				$images.eq(index).attr("style","");
			}
			for (var i = 0; i < numOfIncomingImages; i++) {
				var index = incomingImageIndex + i*delta;
				$screenshotLinks.eq(index).attr("style","");
				$images.eq(index).attr("style","");
			}
		}
	}

	return false;
}

})();