// flickr js badge
// originally by christian heilmann

fjb = {

	// Properties to change
	pics:4, // how many image thumbs to show
	nextLabel:'next',
	prevLabel:'prev',
	linkID:'flickrlink',
	largePicID:'flickrshot',
	navClass:'nav',
	loadingMessage:'Loading images...',
	fullImageLink:'See full image on flickr',
	
	
	ls:null, // Large (Image) Shown?
	current:1,
	
	init:function(){ 
		fjb.srcLink = document.getElementById(fjb.linkID);
		if(!fjb.srcLink) {return;}
		
		// getting flickr tag (if any) from the class attribute and strippng the initial 'ps_'
		var tag = fjb.srcLink.className.substr(3); 
		fjb.srcLink.innerHTML = fjb.loadingMessage;
		
		// getting the flickr user/group id
		var flickrID = fjb.srcLink.href.replace(/.*photos\//,''); 
		
		// attaching users pics info in JSON format
		var url = 'http://flickr.com/services/feeds/photos_public.gne?id='+flickrID+'&size=m&format=json';
		if(tag && tag != '') { url += '&tags=' + tag; }
		var script = document.createElement('script');
		script.type = 'text/javascript';
		script.src = url;
		document.getElementsByTagName("head")[0].appendChild(script);
	},
	
	compute:function(obj) {
		fjb.stream = document.createElement('ul');
		fjb.stream.id = fjb.linkID;
		
		var output='', temp='';
		
		// looping over 'items' array in JSON response and building the HTML output
		for(i in obj.items){
			temp = obj.items[i].description.match(/src="([^"]*)"/)[1];			
			temp = temp.replace(/_m.jpg/g,'_s.jpg');
			output += '<li class="photoMid"><a href="'+obj.items[i].link + '" title="'+obj.items[i].title + '" onclick="fjb.show(this); return false"><img src="' + temp+'" alt="'+obj.items[i].title+'" /></a></li>';
		}		
		
		// element to be replaced with UL
		var rep = fjb.srcLink.parentNode.nodeName.toLowerCase() === 'p' ? fjb.srcLink.parentNode : fjb.srcLink;		
		rep.parentNode.replaceChild(fjb.stream,rep);
		
		// output HTML to UL
		fjb.stream.innerHTML=output;
		
		// adding previous & next links
		var prevlink = '<li class="photoLeft"></li><li class="photoArrow lft '+fjb.navClass+'"><a href="#" onclick="fjb.navigate(-1);return false"><img src="images/arrow_left.gif" alt="click to scroll more images" title="click to scroll more images"/></a></li>';
		fjb.stream.innerHTML = prevlink+fjb.stream.innerHTML;
		var nextlink='<li class="photoArrow '+fjb.navClass+'"><a href="#" onclick="fjb.navigate(1);return false"><img src="images/arrow_right.gif" alt="click to scroll more images" title="click to scroll more images"/></a></li><li class="photoRight"></li>';
		fjb.stream.innerHTML += nextlink;
		
		// hide all LIs by default
		fjb.all = obj.items.length;
		for(var i = 2; i <= fjb.all + 1; i++) { 
			var l = fjb.stream.getElementsByTagName('li')[i];
			if(l.className.indexOf("photoLeft") != -1 || l.className.indexOf("photoRight") != -1 || l.className.indexOf("photoArrow") != -1 ) { continue; } 
			// photoArrow
			// if(l.className == 'photoLeft' || l.className == 'photoRight') { continue; }
			l.style.display = 'none';
		}
		
		fjb.navigate(0);
	},
	
	
	
	
	navigate:function(offset) { 	
		
		// hide all
		for(var i = 2; i <= fjb.all + 1; i++) {
			fjb.stream.getElementsByTagName('li')[i].style.display='none';
		}
		
		var change= fjb.pics * offset; // e.g. 5*0, 5*-1, 5*1
		fjb.current += change; // 1 + 0, 1 - 5, 1 + 5 
		
		// show the new current image
		for(var i=fjb.current+1; i<fjb.current+fjb.pics+1; i++) {	
			if(fjb.stream.getElementsByTagName('li')[i]) { 
				fjb.stream.getElementsByTagName('li')[i].style.display='block';
			}
		}
		
		// hide 'previous' link if current img is 1
		var fl = fjb.stream.getElementsByTagName('a')[0];	
		fl.style.display = fjb.current == 1 ? 'none':'block';		
		
		// hide 'next' link if last image
		var ll = fjb.stream.getElementsByTagName('a')[fjb.all+1];
		ll.style.display = fjb.current > fjb.all - fjb.pics ? 'none' : 'block';
		
	},
	
	// show the large image in a div
	show:function(o) { 
		
		if(fjb.ls===null) { 
			fjb.ls = document.createElement('div');
			document.body.appendChild(fjb.ls);
			fjb.ls.id = fjb.largePicID;
			fjb.ls.style.position = 'absolute';
		} 
		
		var prev='<p><a href="'+o.href+'">'+fjb.fullImageLink+'</a></p>';
		
		// html for the large image div
		fjb.ls.innerHTML='<a href="#" onclick="this.parentNode.style.display=\'none\'; this.parentNode.parent.focus(); return false" class="fjbcloser">X</a><h4>'+o.title+'</h4><a href="#" onclick="this.parentNode.style.display=\'none\'; this.parentNode.parent.focus(); return false">'+o.innerHTML.replace(/_s.jpg/,'_m.jpg')+'</a>'+prev;
		fjb.ls.style.display='block';
		
		// determine vertical offset of the div based on whether the page has been scrolled
		var y=0;		
		if(self.pageYOffset) { 
			y=self.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop) { 
			y=document.documentElement.scrollTop;
		} else if(document.body) { 
			y=document.body.scrollTop;
		}	
		fjb.ls.style.top=y+'px';
		
		// accessibility
		fjb.ls.parent = o;
		fjb.ls.getElementsByTagName('a')[0].focus();
		
	},
	
	
	addLoadEvent:function(func) { 
		var oldonload = window.onload;
		if (typeof window.onload != 'function') { 
			window.onload=func;
		} else { 
			window.onload=function() { 
				if(oldonload) { 
					oldonload();
				} 
			func();
			}
		}
	}
	
	

};


function jsonFlickrFeed(obj) {
	fjb.compute(obj);
}


fjb.addLoadEvent(fjb.init);