/*
 * flickr.js
 * 
 * Copyright (C) 2011 GLIDE ARTS STUDIO.
 * @ version 0.1
 * @ 2011-08-05
 * @ 2012-01-19 last.
 * @ author http://www.glide.co.jp
 * 
 */



var FPA_showItemLength = new Array();

var FlickrPhotoAPI = function () {
	
	this.target = "";
	this.key = "";
	this.name = "";
	this.size = "";
	this.callback = "";
	this.currentLineMaxImages = 0;
	this.page = 0;
	this.totalphotos = 0;
	this.start = 0;
	this.last = 0;
	
	
	this.search = function (target, name, param, page, totalphotos, size, callback) {
		
		this.target = target;
		this.name = name;
		this.size = size;
		this.page = page;
		this.callback = callback;
		this.currentLineMaxImages = totalphotos;
		this.totalphotos = totalphotos;
		
		FPA_showItemLength[page - 1] = totalphotos;
		
		FlickrAPIPhotoSearch(param, page, name, this.currentLineMaxImages);
	}
	
	// Callback
	this.JSONFlickrApi = function (data) {
		
		var list = data.photos.photo;
		var items = list.length;
		var len = list.length;
		var container = document.getElementById(this.target).getElementsByTagName("ul")[0];
		var size = this.size;
		var containerWidth = 100;
		var containerHeight = 100;
		var liArray = new Array(len);
		var spanArray = new Array(len);
		var imgArray = new Array(len);
		
		
		for (var j = 0; j < this.page - 1; j++) {
			this.start += FPA_showItemLength[j];
		}
		
		this.last = this.start + this.totalphotos;
		
		if (len < this.start) {
			document.getElementById(this.target).style.display = "none";
			return;
		}
		
		removeChildren(this.target);
		
		for(var i = this.start; i < this.last; i++) {
			var photo = list[i];
			var li = document.createElement("li");
			var span = document.createElement("span");
			var img = document.createElement("img");
			
			liArray[i] = li;
			spanArray[i] = span;
			imgArray[i] = img;
			
			li.appendChild(span);
			li.style["-moz-animation-delay"] = (0.1 * i) + "s";
			li.style["-webkit-animation-delay"] = (0.1 * i) + "s";
			
			if (photo) {
				span.title = photo.title;
				span.setAttribute("class", "modal");
				span.setAttribute("rel", "flickr");
				span.setAttribute("data-href", "http://static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_z.jpg");
				span.setAttribute("data-id", photo.id);
				span.appendChild(img);
				container.appendChild(li);
				
				loadImage(i, len);
				//getPhotoInfomation(photo.id, a);
			}
		}
		
		containerWidth = liArray[this.start].offsetWidth;
		containerHeight = liArray[this.start].offsetHeight;
		
		function loadImage(i) {
			var photo = list[i];
			imgArray[i].src = "http://static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + size + ".jpg";
			imgArray[i].id = "image" + i;
			imgArray[i].title = photo.title;
			imgArray[i].onload = function () {
				
				this.style.left = (containerWidth / 2 - this.width / 2) + "px";
				this.style.top = (containerHeight / 2 - this.height / 2) + "px";
				this.setAttribute("class", "fadeIn");
			};
		}
		
		this.callback();
	}
	
	function removeChildren(id) {
		var element = document.getElementById(id).getElementsByTagName("ul")[0];
		while (element.firstChild) { 
			element.removeChild(element.lastChild);
		}
	}
}



function getPhotoInfomation(id, callback) {
	
	if (document.getElementById("FlickrPhotoInfomation")) {
		document.body.removeChild(document.getElementById("FlickrPhotoInfomation"));
	}
	// JSONP
	var JSONFlickrApi = callback;
	var reqURL = "http://www.flickr.com/services/rest/?photo_id=" + id + "&api_key=e7f675962b52f27feb1b4067d6a1d9e1&method=flickr.photos.getInfo&format=json&jsoncallback=" + JSONFlickrApi;
	var script  = document.createElement("script");
	script.src  = reqURL;
	script.setAttribute("id", "FlickrPhotoInfomation");
	document.body.appendChild(script);
}



function FlickrAPIPhotoSearch(param, page, name, max) {
	// API Request Parameter
	param.api_key  = "e7f675962b52f27feb1b4067d6a1d9e1";
	param.method   = "flickr.photos.search";
	param.per_page = 90;
	param.page     = 1;
	param.sort     = "date-posted-desc";
	param.format   = "json";
	param.jsoncallback = name + ".JSONFlickrApi";
	
	// JSONP
	var url = "http://www.flickr.com/services/rest/?" + getQuerystring(param);
	var script  = document.createElement("script");
	script.src  = url;
	document.body.appendChild(script);
}



function getQuerystring(object) {
	
	var query = new Array();
	
	for(var keyword in object) {
		query[query.length] = encodeURI(keyword + "=" + object[keyword]);
	}
	
	return query.join("&");
}