var photos = [];
var apiKey = "6e2a2bc0544e852c6a68a6a9dc26192a";
var tagContainer = "tag_container";
var photoContainer = "photo_container";
var tagList = [];
var tagCountList = [];
var tagMaxCount = 0;
var tagNodes = [];
var searchTagList = [];
var checkedTagList = [];
var isSearching = false;
var tagCallCount = 0;
var defaultMessage = 'type text here to start';

var howTo = '';


/*
*
* Search
*
*/

function init() {
	isSearching = false;
	remove_children(photoContainer);
	remove_children(tagContainer);
	var div = document.getElementById(tagContainer);
	div.className = 'hidden';
	
	var div = document.getElementById(photoContainer);
	
	
	// SEARCH BOX
	var block = document.createElement( 'div' );
	block.id = 'search';
	var input = document.createElement( 'input' );
	input.type = 'text';
	input.id = 'search_text';
	input.value = defaultMessage;
	dom.event.addEventListner(input, 'click', onInputClick);
	var linkNode = document.createElement( 'a' );
	dom.event.addEventListner(linkNode, 'click', startSearch);
	var text = document.createTextNode('SEARCH');
	linkNode.appendChild(text);
	
	block.appendChild(input);
	block.appendChild(linkNode);
	div.appendChild(block);
	
	// HOT ITEMS LINK
	block = document.createElement( 'div' );
	block.id = 'RecentItemsLink';
	text = document.createTextNode('or ');
	block.appendChild(text);
	
	linkNode = document.createElement( 'a' );
	dom.event.addEventListner(linkNode, 'click', startRecentSearch);
	text = document.createTextNode('start from recent images');
	linkNode.appendChild(text);
	
	block.appendChild(linkNode);
	div.appendChild(block);
	
	//HOW TO
	block = document.createElement( 'div' );
	block.id = 'howto';
	block.innerHTML = howTo;
	div.appendChild(block);
	
	
	
	
}

function onInputClick(evt) {
	if (document.getElementById('search_text').value == defaultMessage) {
		document.getElementById('search_text').value = '';
	}
}

function startSearch() {
	if (document.getElementById('search_text').value != 'type text here to start') {
		getPhotosByTags(document.getElementById('search_text').value);
	}
}

function startRecentSearch() {
	getRecentPhotos()
}


function getPhotosByTags ( tag ) {
	var div = document.getElementById(tagContainer);
	div.className = '';
	tagCallCount = 0;
	
	isSearching = true;
	if (tag != '') {
		checkedTagList.push(tag);
	}
	param = {};
	param.tags = checkedTagList.join(',');
	param.tag_mode = 'all' 
    param.api_key  = apiKey;
    param.method   = 'flickr.photos.search';
    param.per_page = 30;
    param.format   = 'json';
    param.jsoncallback = 'onPhotosLoad';
	

    // APIリクエストURLの生成(GETメソッド)
    var url = 'http://www.flickr.com/services/rest/?'+
               obj2query( param );

	show_waiting(photoContainer);
    // script 要素の発行
    var script  = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src  = url;
    document.body.appendChild( script );
	
	resetTagList();
};

function getRecentPhotos () {
	var div = document.getElementById(tagContainer);
	div.className = '';
	tagCallCount = 0;
	
	isSearching = true;
	
	param = {};
    param.api_key  = apiKey;
    param.method   = 'flickr.photos.getRecent';
    param.per_page = 30;
    param.format   = 'json';
    param.jsoncallback = 'onPhotosLoad';
	

    // APIリクエストURLの生成(GETメソッド)
    var url = 'http://www.flickr.com/services/rest/?'+
               obj2query( param );

	show_waiting(photoContainer);
    // script 要素の発行
    var script  = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src  = url;
    document.body.appendChild( script );
	
	resetTagList();
};



function getInfo(id) {
	
	param = {};
	param.photo_id = id;
	param.api_key  = apiKey;
	param.method   = 'flickr.photos.getInfo';
    param.format   = 'json';
    param.jsoncallback = 'onInfoLoad';
	
	var url = 'http://www.flickr.com/services/rest/?'+
               obj2query( param );
	
	var script  = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src  = url;
    document.body.appendChild( script );
}


function searchByTag(evt) {
	getPhotosByTags(dom.event.target(evt).title);
}


function obj2query ( obj ) {
    var list = [];
    for( var key in obj ) {
        var k = encodeURIComponent(key);
        var v = encodeURIComponent(obj[key]);
        list[list.length] = k+'='+v;
    }
    var query = list.join( '&' );
    return query;
}

/*
*
* Handler
*
*/

function onPhotosLoad ( data ) {
	
	if (!isSearching) { return }
	
    if ( ! data ) return;
    if ( ! data.photos ) return;
    var list = data.photos.photo;
    if ( ! list ) return;
    if ( ! list.length ) return;

    remove_children(photoContainer);
	

    var div = document.getElementById(photoContainer);
    for( var i=0; i<list.length; i++ ) {
        var photo = list[i];


        var linkNode = document.createElement( 'a' );
        linkNode.href = 'http://www.flickr.com/photos/'+
                    photo.owner+'/'+photo.id+'/';
		linkNode.target = 'photo';

        var img = document.createElement( 'img' );
        img.src = 'http://static.flickr.com/'+photo.server+
                  '/'+photo.id+'_'+photo.secret+'_s.jpg';
        img.style.border = '0';
        linkNode.appendChild( img );
        div.appendChild( linkNode );
		
		
		tagCallCount ++;
		if (tagCallCount %= 3) {
			getInfo(photo.id);
		}
    }
}

function onInfoLoad ( data ) {
	
	if (!isSearching) { return }
	
    if ( ! data ) return;
    if ( ! data.photo ) return;
    if ( ! data.photo.tags) return;
    if ( ! data.photo.tags.tag ) return;
	
	var list = data.photo.tags.tag ;

	for( var i=0; i<list.length; i++ ) {
        var tag = list[i].raw;
		
		addToTagList(tag);
	}
}


/*
*
* TagControle
*
*/

function addToTagList(tag) {
	
	for (var i = 0; i < checkedTagList.length; i ++) {
		if (checkedTagList[i] == tag) {
			return;
		}
	}
	
	
	for (var j = 0; j < tagList.length; j ++) {
		
		if (tagList[j] == tag) {
			tagCountList[j] ++;
			if (tagCountList[j] < 1) {
				tagNodes[j].className = 'tag_level_1';
			} else if (tagCountList[j] < 2) {
				tagNodes[j].className = 'tag_level_2';
			} else if (tagCountList[j] < 5) {
				tagNodes[j].className = 'tag_level_3';
			} else if (tagCountList[j] < 10) {
				tagNodes[j].className = 'tag_level_4';
			} else {
				tagNodes[j].className = 'tag_level_5';
			}
				
			
			if (tagMaxCount < tagCountList[j]) {
				tagMaxCount = tagCountList[j];	
			}
			return
		}
		
	}
	tagList.push(tag);
	tagCountList.push(1);
	
	var div = document.getElementById(tagContainer);
	
	var linkNode = document.createElement( 'a' );
	linkNode.title = tag;
	linkNode.id = tag;
		
	dom.event.addEventListner(linkNode, 'click', searchByTag);

    var text = document.createTextNode( tag + ' ' );
	linkNode.appendChild( text );
    div.appendChild( linkNode );
	
	
	tagNodes.push(linkNode);
	
}

function resetTagList() {
	remove_children(tagContainer);
	tagList = [];
	tagCountList = [];
	tagNodes = [];
	tagMaxCount = 0;
	
	var div = document.getElementById(tagContainer);
    for( var i=0; i<checkedTagList.length; i++ ) {
        var tag = checkedTagList[i];
		var block = document.createElement('div');
		var check = document.createElement('img');
		check.src = 'img/check.gif';
		check.id = i;
		dom.event.addEventListner(check, 'click', deleteCheckedTag);

        var text = document.createTextNode(tag );
        
		block.appendChild(check);
        block.appendChild(text);
		div.appendChild(block);

    }
}

function deleteCheckedTag(evt) {
	checkedTagList.splice(Number(dom.event.target(evt).id), 1);
	if (checkedTagList.length == 0) {
		init();
	} else {
		getPhotosByTags('');
	}
}

/*
*
* Display
*
*/


function remove_children ( id ) {
    var div = document.getElementById( id );
    while ( div.firstChild ) { 
        div.removeChild( div.lastChild );
    }
};

function show_waiting ( id ) {
	remove_children(id);
    var div = document.getElementById( id );
	var img = document.createElement( 'img' );
    img.src = 'img/wait.png';
    img.style.border = '0';
    div.appendChild(img);
};


/*
*
* Debug
*
*/


function toConsole(str) {
	return
	var div = document.getElementById('console');
	var text = document.createTextNode(str + ' ');
    div.appendChild(text);	
}

function clearConsole() {
	remove_children('console');
}