function getXMLHTTPRequest(){
	var xhr;
	if (window.XMLHttpRequest) {
	  xhr = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) {
	  xhr = new ActiveXObject("Msxml2.XMLHTTP");
	}
	
	return xhr;
}

function jsonFlickrApi(rsp){
	return rsp;
}

function Photo(id, secret, server, farm, title, originalFormat, originalSecret, media){
	
	this.id             = id;
	this.secret         = secret;
	this.server         = server;
	this.title          = title;
	this.farm           = farm;
	this.originalFormat = originalFormat;
	this.originalSecret = originalSecret;
	this.media          = media
	
	this.description    = null;
	
	this.setDescription = function(desc){
		this.description = desc;
	}
	
	this.hasDescription = function(){
		return this.description != null;
	}
}

Viewer = function(subViewer){
	this.canvas = document.createElement("div");
	this.canvas.id = "viewerCanvas";
	this.canvas.style.display = "none";
	this.canvas.onclick = function(){
		subViewer.hide();
	}
	document.body.appendChild(this.canvas);
	
	this.container = document.createElement("div");
	this.container.className = "container";
	this.container.onclick = function(){
		subViewer.hide();
	}
	this.canvas.appendChild(this.container);
	
	this.closeButton = document.createElement("div");
	this.closeButton.className = "closeButton";
	this.closeButton.innerHTML = "Click here to close this picture";
	this.closeButton.onclick = function(){
		subViewer.hide();
	}       
	this.container.appendChild(this.closeButton);
	
}
	Viewer.prototype.show = function(){
		this.expandCanvas();
		this.moveContainer();
		this.canvas.style.display = "block";
	}
	
	Viewer.prototype.hide = function(){
		this.canvas.style.display = "none";
	}
	
	Viewer.prototype.expandCanvas = function(){
		frameWidth = 0;
		frameHeight = 0;
		if(self.innerWidth){
			frameWidth = document.innerWidth;
			frameHeight = document.innerHeight;
		}else if(document.documentElement && document.documentElement.clientWidth){
			frameWidth = document.documentElement.clientWidth;
			frameHeight = document.documentElement.clientHeight;
		}
		
		this.canvas.style.width  = frameWidth;
	}
	
	Viewer.prototype.moveContainer = function(){
		if (navigator.appName == "Microsoft Internet Explorer"){
			if(document.body.scrollTop>0){
				var position = document.body.scrollTop;
			}
			else if(document.documentElement.scrollTop>0){
				var position = document.documentElement.scrollTop;
			}else{
				var position = 0;
			}
		}else{
			var position = window.pageYOffset;
		}
		
		this.container.style.marginTop = position + "px";
		this.canvas.style.height = (position + 3000) + "px";
	}

function PhotoViewer(){
	this.hide = function(){
		this.titleCell.innerHTML       = "";
		this.imageCell.src             = "";
		this.descriptionCell.innerHTML = "";
		
		this.viewer.hide();
	}
	
	this.showPhoto = function(photo){
		//change link
		if(photo.originalSecret){
			url = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.originalSecret + "_o." + photo.originalFormat;
		}
		else{
			url = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + ".jpg";
		}
		
		this.titleCell.innerHTML       = photo.title;
		this.imageCell.src             = url;
		this.descriptionCell.innerHTML = photo.description;
		
		this.viewer.show();
	}
	
	this.showLoading = function(){
		this.titleCell.innerHTML       = "loading...";
		this.imageCell.src             = "images/loading.png";
		this.descriptionCell.innerHTML = "loading...";
		
		this.viewer.show();
	}
	
	this.viewer = new Viewer(this);
	
	this.container = this.viewer.container;
	
	this.photoContainer = document.createElement("div");
	this.photoContainer.className = "photoContainer";
	this.container.appendChild(this.photoContainer);
	
	this.titleCell = document.createElement("h2");
	this.titleCell.className = "titleCell";
	this.photoContainer.appendChild(this.titleCell);
	
	this.imageCell = document.createElement("img");
	this.imageCell.className = "imageCell";
	iePhotoSelf = this;
	this.imageCell.onclick = function(){
		iePhotoSelf.hide();
	}
	this.photoContainer.appendChild(this.imageCell);
	
	this.descriptionCell = document.createElement("div");
	this.descriptionCell.className = "descriptionCell";
	this.photoContainer.appendChild(this.descriptionCell);
}

function VideoViewer(){
	this.hide = function(){
		this.titleCell.innerHTML       = "";
		this.photoCell.innerHTML       = '';
		this.descriptionCell.innerHTML = "";
		
		this.viewer.hide();
	}
	
	this.showPhoto = function(photo){
		//change link
		url = "http://www.flickr.com/apps/video/stewart.swf?v=71377&photo_id=" + photo.id + "&photo_secret=" + photo.secret
		
		this.titleCell.innerHTML = photo.title;
		/*
		objectCell = document.createElement("object");
		objectCell.setAttribute("type", "application/x-shockwave-flash")
		objectCell.setAttribute("width", "600")
		objectCell.setAttribute("height", "400")
		objectCell.setAttribute("data", url)
		objectCell.setAttribute("classid", "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000")
		objectCell.setAttribute("class", "imageCell");
		
		objectParam = document.createElement("param")
		objectParam.setAttribute("name", "bgcolor")
		objectParam.setAttribute("value", "#000000")
		objectCell.appendChild(objectParam)
		
		objectParam = document.createElement("param")
		objectParam.setAttribute("name", "allowFullScreen")
		objectParam.setAttribute("value", "true")
		objectCell.appendChild(objectParam)
		
		objectParam = document.createElement("param")
		objectParam.setAttribute("name", "flashvars")
		objectParam.setAttribute("value", "flickr_show_info_box=true")
		objectCell.appendChild(objectParam)
		
		movieParam = document.createElement("param")
		movieParam.setAttribute("name", "movie")
		movieParam.setAttribute("value", url)
		objectCell.appendChild(movieParam)
		
		movieEmbed = document.createElement("embed")
		movieEmbed.setAttribute("src", url)
		movieEmbed.setAttribute("bgcolor", "#000000");
		movieEmbed.setAttribute("allowFullScreen", "true");
		movieEmbed.setAttribute("height", "400");
		movieEmbed.setAttribute("width", "600");
		
		objectCell.appendChild(movieEmbed);
		
		this.photoCell.appendChild(objectCell);
		*/
		this.photoCell.innerHTML = '' + 
			'<object type="application/x-shockwave-flash" width="600" height="400" data="' + url + '" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" class="imageCell">' + 
			'<param name="bgcolor" value="#000000"/>' + 
			'<param name="allowFullScreen" value="true"/>' + 
			'<param name="flashvars" value="flickr_show_info_box=true"/>' + 
			'<param name="movie" value="' + url + '"/>' + 
			'<embed src="' + url + '" bgcolor="#000000" allowFullScreen="true" height="400" width="600"/>' + 
			'</object>';
		
		this.descriptionCell.innerHTML = photo.description;
		
		this.viewer.show();
	}
	
	this.showLoading = function(){
		this.titleCell.innerHTML       = "loading...";
		this.imageCell.src             = "images/loading.png";
		this.descriptionCell.innerHTML = "loading...";
		
		this.viewer.show();
	}
	
	this.viewer = new Viewer(this);
	
	this.container = this.viewer.container;
	
	this.photoContainer = document.createElement("div");
	this.photoContainer.className = "photoContainer";
	this.container.appendChild(this.photoContainer);
	
	this.titleCell = document.createElement("h2");
	this.titleCell.className = "titleCell";
	this.photoContainer.appendChild(this.titleCell);
	this.photoCell = document.createElement("div");
	this.photoContainer.appendChild(this.photoCell);
	this.descriptionCell = document.createElement("div")
	this.descriptionCell.className = "descriptionCell"
	this.photoContainer.appendChild(this.descriptionCell)
	
}

function AlbumViewer(workspace, photoSetId){
	
	this.photoSetId = photoSetId;
	//this.FLICKR_API_KEY = "0111e54ad623dff13a291726be7c022b";
	this.FLICKR_API_KEY = "3ae4fd1c6d852cca9bf346e14e82adac";
	this.FLICKR_SECRET  = "332d8e819f8dea4f";
	this.workspace = workspace;
	this.photoViewer = new PhotoViewer();
	this.videoViewer = new VideoViewer();
	
	this.loadPhotoList = function(){
		this.workspace.className = "loading";
		
		//create url
		url = "flickr.php?method=flickr.photosets.getPhotos&api_key=" + this.FLICKR_API_KEY + "&photoset_id=" + this.photoSetId + "&format=json&extras=original_format,original_secret,media";
		
		//XMLHTTPRequest
		request = getXMLHTTPRequest();
		instance = this;
		request.onreadystatechange = function(){
			instance.handlePhotoListRequest(request);
		}
		request.open("GET", url, true);
		request.send(null);
	}
	
	this.handlePhotoListRequest = function(request){
		if (request.readyState == 4) {
			if(request.status == 200){
				response = eval(request.responseText);
				photos = response.photoset.photo
				//load photos
				for(i=0;i<photos.length;i++){
					p = photos[i];
					photo = new Photo(p.id, p.secret, p.server, p.farm, p.title, p.originalformat, p.originalsecret, p.media);
					this.addPhoto(photo);
				}
				
			}
			else{
				//this.descriptionCell.innerHTML = "Could not load images: " + request.responseText;
			}
		}
	}
	
	this.addPhoto = function(photo){
		var imageContainer = document.createElement("div");
		imageContainer.className = "imageContainer";
		
		var image = document.createElement("img");
		image.src = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_m.jpg";
		image.setAttribute("title", photo.title);
		image.setAttribute("alt", photo.title);
		instance = this;
		image.onclick = function(){
			instance.showPhoto(photo);
		}
		imageContainer.appendChild(image);
		
		this.workspace.appendChild(imageContainer);
		
	}
	
	this.showPhoto = function(photo){
		if(photo.media=="video"){
			this.videoViewer.showPhoto(photo);
		}
		else if(photo.hasDescription()){
			this.photoViewer.showPhoto(photo);
		}else{
			this.photoViewer.showLoading();
			
			//create url
			url = "/flickr.php?method=flickr.photos.getInfo&api_key=" + this.FLICKR_API_KEY + "&photo_id=" + photo.id + "&format=json";
			
			//XMLHTTPRequest
			request = getXMLHTTPRequest();
			instance = this;
			request.onreadystatechange = function(){
				instance.handleDescriptionRequest(request, photo);
			}
			request.open("GET", url, true);
			request.send(null);
		}
	}
	
	this.handleDescriptionRequest = function(request, photo){
		if (request.readyState == 4) {
			if(request.status == 200){
				response = eval(request.responseText);
				if(response.photo.description._content != undefined){
					photo.setDescription(response.photo.description._content);
					
					this.photoViewer.showPhoto(photo);
				}
				else{
					this.photoViewer.showError("Error retrieving photo: " + request.responseText);
				}
			}
		}
	}
	
	
	
	this.current = 0;
	this.images = new Array();
	
	this.loadPhotoList();
}