var PixelFy = {

	init: function() {
		
		/* Thumbs */
		if(document.getElementById("browse")) {
			$(".thumbnails").bind("mouseover", function(event){ 
				$(this).css("border-color","#555555").css("background-color","#000000");
			});
			$(".thumbnails").bind("mouseout", function(event){ 
				$(this).css("border-color","#333333").css("background-color","#151515");
			});
		}
		
		
		
		/* Deal with image displays */
		var img = document.getElementById("image");
		if(!img) {
			return;
		}
		$("#image").css("z-index", 10);
		
		PixelFy.minContainerWidth = 480;
		PixelFy.containerWidth = PixelFy.minContainerWidth;
		PixelFy.setContainerWidth();

		$("#exif").hide();
		$("#commentWrap").hide();
		$("#statistics").hide();		
		$("#about").hide();				
		$("#fotoraw").hide();						

		PixelFy.exIfInit();
		PixelFy.commentsInit();
		PixelFy.statisticsInit();		
		PixelFy.aboutInit();				
		PixelFy.fotorawInit();						
		
		$("#image").css("z-index", 10);
		
		PixelFy.exifOn = false;
		PixelFy.commentsOn = false;
		PixelFy.statisticsOn = false;		
		PixelFy.aboutOn = false;				
		PixelFy.fotorawOn = false;						
		
		PixelFy.toggleExIf();
		PixelFy.toggleComments();
		PixelFy.toggleStatistics();		
		PixelFy.toggleAbout();				
		PixelFy.toggleFotoraw();						

	},
	
	
	toggleExIf: function() {
		$("#view_exif").bind("click", function(event){ 
			
			// If it's on
			if(PixelFy.exifOn) {
				$("#exif").fadeTo("slow", 0.99).fadeOut();
				PixelFy.exifOn = false;
				$("#view_exif").css("color","#777777");				
			
			// If it's off
			} else {
				$("#exif").fadeIn("slow").fadeTo("slow", 0.70);
				PixelFy.exifOn = true;
				$("#view_exif").css("color","orange");
			}
			
			
			
			// DOM Event Handling
			if(event.preventDefault) {
				event.preventDefault();

			// IE Event Handling
			} else {
				event.returnValue = false;
			}			
		});
	},
	
	toggleComments: function() {
		$("#view_comments").bind("click", function(event){ 

			// If it's on
			if(PixelFy.commentsOn) {
				$("#commentWrap").fadeTo("slow", 0.99).fadeOut();
				PixelFy.commentsOn = false;
				$("#view_comments").css("color","#777777");				
			
			// If it's off
			} else {
				$("#commentWrap").fadeIn("slow").fadeTo("slow", 0.70);
				PixelFy.commentsOn = true;
				$("#view_comments").css("color","orange");
			}


			// DOM Event Handling
			if(event.preventDefault) {
				event.preventDefault();

			// IE Event Handling
			} else {
				event.returnValue = false;
			}			
			
		});
	},

	toggleStatistics: function() {
		$("#view_statistics").bind("click", function(event){ 

			// If it's on
			if(PixelFy.statisticsOn) {
				$("#statistics").fadeTo("slow", 0.99).fadeOut();
				PixelFy.statisticsOn = false;
				$("#view_statistics").css("color","#777777");				
			
			// If it's off
			} else {
				$("#statistics").fadeIn("slow").fadeTo("slow", 0.90);
				PixelFy.statisticsOn = true;
				$("#view_statistics").css("color","orange");
			}


			// DOM Event Handling
			if(event.preventDefault) {
				event.preventDefault();

			// IE Event Handling
			} else {
				event.returnValue = false;
			}			
			
		});
	},

	toggleAbout: function() {
		$("#view_about").bind("click", function(event){ 

			// If it's on
			if(PixelFy.aboutOn) {
				$("#about").fadeTo("slow", 0.99).fadeOut();
				PixelFy.aboutOn = false;
				$("#view_about").css("color","#777777");				
			
			// If it's off
			} else {
				$("#about").fadeIn("slow").fadeTo("slow", 0.90);
				PixelFy.aboutOn = true;
				$("#view_about").css("color","orange");
			}


			// DOM Event Handling
			if(event.preventDefault) {
				event.preventDefault();

			// IE Event Handling
			} else {
				event.returnValue = false;
			}			
			
		});
	},
	
	toggleFotoraw: function() {
		$("#view_fotoraw").bind("click", function(event){ 

			// If it's on
			if(PixelFy.fotorawOn) {
				$("#fotoraw").fadeTo("slow", 0.99).fadeOut();
				PixelFy.fotorawOn = false;
				$("#view_fotoraw").css("color","#777777");				
			
			// If it's off
			} else {
				$("#fotoraw").fadeIn("slow").fadeTo("slow", 0.99);
				PixelFy.fotorawOn = true;
				$("#view_fotoraw").css("color","orange");
			}


			// DOM Event Handling
			if(event.preventDefault) {
				event.preventDefault();

			// IE Event Handling
			} else {
				event.returnValue = false;
			}			
			
		});
	},	
	
	
	
	exIfInit: function() {
		var offset = $("#image").offset();
		var gap = Math.floor( ($("#image").width() * 3) / 100);
		var width = Math.floor( ($("#image").width() * 30) / 100 );

		
		$("#exif").css("position", "absolute");
		$("#exif").css("top", offset.top);
		$("#exif").css("left", offset.left);
		$("#exif").css("z-index", 20);
		
		$("#exif").css("border", "1px solid #cccccc");
		$("#exif").css("background-color", "#ffffff");
		$("#exif").css("color", "#000000");
		$("#exif").css("margin", "0em");
		$("#exif").css("padding", gap+"px");
		$("#exif").width(width);		
		//$("#exif").fadeIn("slow").fadeTo("slow", 0.50);
	},
	
	commentsInit: function() {
		
		var offset = $("#image").offset();
		var width = Math.floor( ($("#image").width() * 55) / 100 );
		var gap = Math.floor( ($("#image").width() * 3) / 100);
		var left = offset.left + $("#exif").width() + (gap * 3);

		
		$("#commentWrap").css("position", "absolute");
		$("#commentWrap").css("top", offset.top);
		
		$("#commentWrap").css("left",left);

		$("#commentWrap").css("z-index", 30);

		$("#commentWrap").css("border", "1px solid #cccccc");
		$("#commentWrap").css("background-color", "#ffffff");
		$("#commentWrap").css("color", "#000000");
		$("#commentWrap").css("padding", gap+"px");
		$("#exif").css("margin", "0em");
		
		$("#commentWrap").width(width);
		$("#commentWrap").height(Math.floor( ($("#image").height() * 80) / 100 ));
		$("#commentWrap").css("overflow", "auto");
		
		//$("#commentWrap").fadeIn("slow").fadeTo("slow", 0.70);
	},

	statisticsInit: function() {
		
		var offset = $("#image").offset();
		var width = Math.floor( ($("#image").width() * 90) / 100 );
		var gap = Math.floor( ($("#image").width()) / 100);
		var left = offset.left + (gap * 3);

		
		$("#statistics").css("position", "absolute");
		$("#statistics").css("top", offset.top);
		
		$("#statistics").css("left",left);

		$("#statistics").css("z-index", 40);

		$("#statistics").css("border", "1px solid #cccccc");
		$("#statistics").css("background-color", "#ffffff");
		$("#statistics").css("color", "#000000");
		$("#statistics").css("padding", gap+"px");
		//$("#exif").css("margin", "0em");
		
		$("#statistics").width(width);
		$("#statistics").height(Math.floor( ($("#image").height() * 95) / 100 ));
		$("#statistics").css("overflow", "auto");
		
		//$("#commentWrap").fadeIn("slow").fadeTo("slow", 0.70);
	},
	
	aboutInit: function() {
		
		var offset = $("#image").offset();
		var width = Math.floor( ($("#image").width() * 90) / 100 );
		var gap = Math.floor( ($("#image").width()) / 100);
		var left = offset.left + (gap * 3);

		
		$("#about").css("position", "absolute");
		$("#about").css("top", offset.top);
		
		$("#about").css("left",left);

		$("#about").css("z-index", 50);

		$("#about").css("border", "1px solid #cccccc");
		$("#about").css("background-color", "#ffffff");
		$("#about").css("color", "#000000");
		$("#about").css("padding", gap+"px");
		//$("#exif").css("margin", "0em");
		
		$("#about").width(width);
		$("#about").height(Math.floor( ($("#image").height() * 95) / 100 ));
		$("#about").css("overflow", "auto");
		
		//$("#commentWrap").fadeIn("slow").fadeTo("slow", 0.70);
	},	

	fotorawInit: function() {
		
		var offset = $("#image").offset();
		//var width = Math.floor( ($("#image").width() * 100) / 100 );
		var gap = Math.floor( ($("#image").width()) / 100);
		var left = offset.left;

		
		$("#fotoraw").css("position", "absolute");
		$("#fotoraw").css("top", offset.top);
		
		$("#fotoraw").css("left",left);

		$("#fotoraw").css("z-index", 15);

		//$("#fotoraw").css("border", "1px solid #cccccc");
		$("#fotoraw").css("background-color", "#151515");
		$("#fotoraw").css("color", "#000000");
		//$("#fotoraw").css("padding", gap+"px");
		//$("#exif").css("margin", "0em");
		
		//$("#fotoraw").width(width);
		//$("#fotoraw").height(Math.floor( ($("#image").height() * 100) / 100 ));
		//$("#fotoraw").css("overflow", "auto");
		
		//$("#commentWrap").fadeIn("slow").fadeTo("slow", 0.70);
	},	

	
	setContainerWidth: function() {
		var pictureWidth = $("#image").width();
		PixelFy.containerWidth = (pictureWidth < PixelFy.minContainerWidth) ? PixelFy.minContainerWidth : pictureWidth;
		$("#container").width(PixelFy.containerWidth);
	}
}
$(document).ready(function(){
	PixelFy.init();
});