var ScreenViewerManager = {
	screenShots: [],
	minWindowWidth: 690,
	minWinowHeight: 400,
	intCurrImg: 1,
	intThumbWidth: 60,
	intThumbHeight: 45,
	intThumbCount: 8,
	objBtnPrev: null,
	objBtnNext: null,
	objCurrentImage: null,
	objTotalImages: null,
	objThumbContainer: null,
	objMainImage: null,
	bolHasChanged: false,
	
	initialize: function() {
		this.objBtnPrev = p$('buttonPrev');
		this.objBtnNext = p$('buttonNext');
		this.objCurrentImage = p$('currImg');
		this.objTotalImages = p$('totImg');
		this.objThumbContainer = p$('screenImages');
		this.objMainImage = p$('mainImage');
		
		Event.observe(this.objBtnPrev, 'click', this.moveToPreviousImage.bind(ScreenViewerManager), false);
		Event.observe(this.objBtnNext, 'click', this.moveToNextImage.bind(ScreenViewerManager), false);
		Event.observe(this.objMainImage, 'load', this.changeWindowSize.bind(ScreenViewerManager), false);
		
		this.cacheImages();
		this.displayCurrentImage();
	},
	
	updateImageStatus: function() {
		Element.update(this.objCurrentImage, this.intCurrImg.toString());
		Element.update(this.objTotalImages, this.screenShots.length.toString());
	},
	
	addImage: function(imgUrl, imgThumbUrl, platName) {
		this.screenShots.push({imagePath: imgUrl, imageThumbPath: imgThumbUrl, platformName: platName, imageObj: null, imageThumbObj: null});
	},
	
	cacheImages: function() {
		if (this.screenShots.length<1 ) return;
		
		this.screenShots.each(function(screenShot, index) {
			screenShot.imageObj = new Image().src = screenShot.imagePath;
			screenShot.imageThumbObj = new Image().src = screenShot.imageThumbPath;
		});	
	},
	
	changeWindowSize: function() {
		var screenWidth = window.screen.width;
		var screenHeight = window.screen.height;
		
		var newWidht, newHeight;
		var imgDim = Element.getDimensions(this.objMainImage);
		newWidth = imgDim.width + 40;
		newHeight = imgDim.height + 134;
		if ( newWidth<this.minWindowWidth ) newWidth = this.minWindowWidth;
		if ( newHeight<this.minWinowHeight ) newHeight = this.minWinowHeight;
		
		/* compensate for brower titlerow, statusbar etc */
		if ( Browser.isFirefox ) newHeight += 26;
		else newHeight += 10;
		
		window.resizeTo(newWidth, newHeight);
		if ( !this.bolHasChanged ) this.centerWindow();
	},
	
	centerWindow: function() {
		var screenWidth = screen.availWidth;
		var screenHeight = screen.availHeight;
		var wiWidth = (document.layers)?window.outerWidth:document.body.clientWidth;
		var wiHeight = (document.layers)?window.outerHeight:document.body.clientHeight;
		
		var x = parseInt((screenWidth-wiWidth)/2);
		var y = parseInt((screenHeight-wiHeight)/2);
		
		window.moveTo(x, y);
		this.bolHasChanged = true;
	},
	
	displayCurrentImage: function() {
		var imgIndex = (this.intCurrImg-1);
		if ( imgIndex>=0 && imgIndex<this.screenShots.length ) {
			this.objMainImage.src = this.screenShots[imgIndex].imagePath;
			this.objMainImage.onload = function() {
				this.changeWindowSize();
				this.objMainImage.onload = function() {};
			}.bind(this);
			this.renderThumbnails();
			this.updateImageStatus();
		}
	},
	
	renderThumbnails: function() {
		while (this.objThumbContainer.childNodes[0]) {
			Event.stopObserving(this.objThumbContainer.childNodes[0], 'click', function(event) { this.moveToImageIndex; }, false);
			this.objThumbContainer.removeChild(this.objThumbContainer.childNodes[0]);
		}

		if ( this.screenShots.length <= this.intThumbCount ) {
			this.screenShots.each(function(screenShot, index) {
				var imgObj = this.createThumbNail(index+1, screenShot.imageThumbPath, this.intThumbWidth, this.intThumbHeight, ((index+1)==this.intCurrImg)?'active':'', screenShot.platformName);
				this.objThumbContainer.appendChild(imgObj);
			}.bind(ScreenViewerManager));
		} else {
			for ( i=this.intCurrImg-2; i<=this.intCurrImg+5; i++ ) {
				screenIndex = i <= 0 ? this.screenShots.length + i : i > this.screenShots.length ? i - this.screenShots.length : i;
				
				var screenShot = this.screenShots[screenIndex-1];
				var imgObj = this.createThumbNail(screenIndex, screenShot.imageThumbPath, this.intThumbWidth, this.intThumbHeight, ((screenIndex)==this.intCurrImg)?'active':'', screenShot.platformName);
				this.objThumbContainer.appendChild(imgObj);
			}
		}
	},
	
	createThumbNail: function(id, src, width, height, strClass, altTag) {
		var imgObj = document.createElement('img');
		imgObj.src = src;
		imgObj.width = width;
		imgObj.height = height;
		if ( strClass ) Element.addClassName(imgObj, strClass);
		imgObj.setAttribute('title', altTag);
		Event.observe(imgObj, 'click', function(event) { this.moveToImageIndex(id); }.bind(ScreenViewerManager), false);
		return imgObj;
	},
	
	moveToPreviousImage: function() {
		this.intCurrImg--;
		if ( this.intCurrImg<1 ) this.intCurrImg=this.screenShots.length;
		this.displayCurrentImage();
	},	

	moveToNextImage: function() {
		this.intCurrImg++;
		if ( this.intCurrImg>this.screenShots.length ) this.intCurrImg=1;
		this.displayCurrentImage();
	},
	
	moveToImageIndex: function(index) {
		this.intCurrImg = index;
		this.displayCurrentImage();
	}
}
Event.observe(window, 'load', ScreenViewerManager.initialize.bind(ScreenViewerManager), false);