/*

Welcome & have fun reading my Photo & Video javascript file. Perhaps you are
interested in my Photo & Video widget. However this javascript is still fragmented,
I intended to make it portable & more user friendly in future. Feel free to modify
& use it in your websites or blogs for the time being, appreciate if you can provide
a link back to my FlexiJourney blog at http://www.flexijourney.com/blog/

You need both Flickr API & Youtube API keys to show their photos & videos in
your websites/blogs. Both my API key is not workable in your sites.

# Licensed under GNU GPL at http://www.opensource.org/licenses/gpl-license.php #
# Copyright(c) 2009 Philip Ze #

*/

var dc=document;
var flicjson='';
var flickey='&api_key=49886672c25f8bdfbdc770826a051767';
var flicapi='http://api.flickr.com/services/rest/?method=flickr.photos';
var flicapi1='.search&format=json&sort=interestingness-desc&jsoncallback=fkpaint';
var flicapi2='.getSizes&format=json&jsoncallback=flickshows';
var flicapi3='&per_page=360&tag_mode=all&tags=';
var flicpgcn=36;var flicrow=9;var fliccol=4;
var desttag='';var destdef='';
var videobar=true;

function addmedia(videooff)
{
	hm1=
	'<div id="divmedia">' +
		'<div id="flickrdiv" class="mediadiv">' +
			'<h4 id="h4photo">'+trim(destdef+' Photos')+'</h4>' +
			'<div style="font-size:8pt">Click on the following tags to change Photos</div>' +
			'<div id="flickrtag" class="mediatag"></div>' +
			'<div id="phodefdiv"><input type="checkbox" name="phodef" class="check" id="phodef" checked onclick="exphoto(-1)" /><label for="phodef"><b> '+trim(destdef)+'</b></label></div>' +
			'<div id="fckdot" class="mediadot"><span id="fckpre"><em>&laquo;</em> Prev</span><em id="fckcnt"> &nbsp;&#8226;&nbsp; </em><span id="fcknex">Next <em>&raquo;</em></span></div>' +
			'<div id="photobar" style="text-align:center"><span class="loading">Loading ...</span></div>' +
			'<div class=copyphot>Copyright details for Flickr photos can be found at the respective photo page in <a rel="nofollow" href="http://www.flickr.com/" target="_blank">Flickr</a>.</div>' +
		'</div>' +
		'<div class="clearbr"></div>' +
		'<div id="youtubediv" class="mediadiv">' +
			'<h4 id="h4video">'+trim(destdef+' Videos')+'</h4>' +
			'<div style="font-size:8pt">Click on the following tags to change Videos</div>' +
			'<div id="youtubetag" class="mediatag"></div>' +
			'<div id="viddefdiv"><input type="checkbox" name="viddef" class="check" id="viddef" checked onclick="exvideo(-1)" /><label for="viddef"><b> '+trim(destdef)+'</b></label></div>' +			
			'<div id="videobar" style="text-align:center"><span class="loading">Loading ...</span></div>' +
		'</div>' +
	'</div>';
	dc.write(hm1);
	hm1='';hm2='';
	for(i=0;i<desttag.all.length;i++){
		nn=(i+1).toString();
		if(desttag.all[i].toLowerCase()!='br'){
		  dd=(i==desttag.all.length-1)?'':(desttag.all[i+1].toLowerCase()=='br')?'':'&nbsp;&#8226;&nbsp;';
			hm1+="<em><a id=you"+nn+" href=\"javascript:exvideo("+nn+")\">"+desttag.all[i]+"</a>"+dd+"</em>";
			hm2+="<em><a id=fkr"+nn+" href=\"javascript:exphoto("+nn+")\">"+desttag.all[i]+"</a>"+dd+"</em>";		
		}else{
			hm1+="<br/>";
			hm2+="<br/>";
		}	
	}
	ad1=dc.getElementById('youtubetag');
	ad2=dc.getElementById('flickrtag');
	if(ad1){ad1.innerHTML=hm1}
	if(ad2){ad2.innerHTML=hm2}
	if(destdef==''){
		dc.getElementById('phodef').checked=false;
		dc.getElementById('viddef').checked=false;
		dc.getElementById('phodef').style.display='none';
		dc.getElementById('viddef').style.display='none'
	};
	if(!videobar){
		dc.getElementById('youtubediv').style.display='none';
	}
	loadphotobar();
}

var gsv1=null;
function loadvideobar()
{
	if(!videobar){return};
	vr1=dc.getElementById('videobar');
	if(vr1){
		opts={ largeResultSet : true, string_allDone : "CLOSE" , horizontal : true, thumbnailSize : GSvideoBar.THUMBNAILS_SMALL };
		gsv1=new GSvideoBar(vr1,GSvideoBar.PLAYER_ROOT_FLOATING,opts);
		exvideo(1);
	}
}
var vididx=1;
function exvideo(ix)
{
	vididx=(ix==-1)?vididx:ix;
	tag1=dc.getElementById('you'+vididx.toString()).innerHTML;
	tag2=(dc.getElementById('viddef').checked)?((destdef=='')?'':','+destdef):'';
	tg=trim(tag1+tag2);
	if(gsv1){
		makebold(vididx,'you');
		dc.getElementById('h4video').innerHTML=trim(tg.replace(',',' ')+' Videos');
		gsv1.execute(tg);
	}
}
function loadphotobar()
{
	exphoto(1,true);
}
var phoidx=1;
function exphoto(ix,nowork)
{
	phoidx=(ix==-1)?phoidx:ix;
	tag1=dc.getElementById('you'+phoidx.toString()).innerHTML;
	tag2=(dc.getElementById('phodef').checked)?((destdef=='')?'':','+destdef):'';
	flicjson=trim(tag1+tag2);
	makebold(phoidx,'fkr');
	dc.getElementById('h4photo').innerHTML=trim(flicjson.replace(',',' ')+' Photos');
	if(!nowork){flickwork(true)};
	writescript(encodeURI(flicapi+flicapi1+flicapi3+flicjson+flickey),'flckjv');
}

var jsonflick=null;
var fkthumbed=false;
function fkpaint(j)
{
	if(!fkthumbed){addthumb()};
	if(!j){return};
	jsonflick=j;
	flickpage(1);
}
function addthumb()
{
	hm='';
	for(c=0;c<fliccol;c++){
		hm+='<table cellspacing="0" cellpadding="0" align="center"><tr><td>';
		for(r=0;r<flicrow;r++){
			hm+='<div id=F'+(r+(c*flicrow)).toString()+' class=mpy></div>';
		}
		hm+='</td></tr></table>';
	}
	dc.getElementById('photobar').innerHTML=hm;
	fkthumbed=true;
}
function flickpage(n)
{
	flickwork(false);
	if(!jsonflick.photos){return};
	s=jsonflick.photos.photo;
	ped=(flicpgcn+(flicpgcn*(n-1))<s.length);
	for(i=0;i<flicpgcn;i++){
		p=dc.getElementById('F'+i.toString());
		e=i+(flicpgcn*(n-1));
		if(s&&p){
			if(e<s.length){
				t3='http://farm'+s[e].farm+'.static.flickr.com/'+s[e].server+'/'+s[e].id+'_'+s[e].secret+'_s.jpg';
				p.innerHTML='<a href="javascript:flicklarge('+e.toString()+','+i.toString()+')"><img src="'+t3+'" alt="" title=\''+s[e].title+' [click to enlarge]\'></a>';
			}else{
				p.innerHTML='<img src="'+stylesheetdir+'/images/bg-trang.png" alt="">';
			}
		}else{
			break;
		}
	}
	hp=(n==1)?'<em>&laquo;</em> Prev':'<a href="javascript:flickpage('+(n-1).toString()+');"><em>&laquo;</em> Prev</a>';
	hn=(n==24||!ped)?'Next <em>&raquo;</em>':'<a href="javascript:flickpage('+(n+1).toString()+');">Next <em>&raquo;</em></a>';
	hc='&nbsp;&nbsp;'+n.toString()+'&nbsp;&nbsp;';
	k1=dc.getElementById('fckpre');
	k2=dc.getElementById('fcknex');
	k3=dc.getElementById('fckcnt');
	if(k1){k1.innerHTML=hp}
	if(k2){k2.innerHTML=hn}
	if(k3){k3.innerHTML=hc}
}
var flickix;var flickid;var flickfollow=false;
var fckori=null;
function flickshows(j)
{
	if(!jsonflick.photos||!j){return};
	fckori=null;
	s=jsonflick.photos.photo;
	ix=flickix;id=flickid;
	pw=500;ph=500;
	for(ff=4;ff>=0;ff--){
		sz=j.sizes.size[ff];
		if(sz&&(sz.label=='Medium')){
			pw=parseInt(sz.width);
			ph=parseInt(sz.height);
			break;
		}
		if(sz&&(sz.label=='Original')){
			fckori=j.sizes.size[ff];
		}
	}
	flickshowsup(sz,ix,pw,ph);
}
function flickshowsup(sz,ix,pw,ph,isbig)
{
	s=jsonflick.photos.photo;
	dvp=dc.getElementById('photoframe');
	dv1=dc.getElementById('photodiv1');
	dv2=dc.getElementById('photodiv2');
	setsize(dv1,pw,ph,'<img src="'+stylesheetdir+'/images/bg-trang.png">');
	setsize(dvp,pw+20,ph+90);
	posidiv('photoframe',null,null,null,true);
	stt1=s[ix].title;
	stt1=(stt1=="")?"(untitled)":stt1;
	dv1.innerHTML='<img src="'+sz.source+'" alt="">';
	tt2=(ix+1).toString()+'. <a rel="nofollow" href="http://www.flickr.com/photos/'+s[ix].owner+'/'+s[ix].id+'" target="_blank">'+stt1+'</a> [<a rel="nofollow" href="http://www.flickr.com/" target="_blank">Flickr</a>]';
	tt2+=(!fckori||isbig)?'':'<br>[<a href="javascript:flickorigin('+ix.toString()+')">Original photo ('+fckori.width.toString()+'x'+fckori.height.toString()+') is available</a>]';
	dv2.innerHTML=tt2;
	showhide(1,'photoframe',null,true);
	flickwork(false);
}
function originalphoto(sz,pw,ph,tit)
{
	dvp=dc.getElementById('photoframe');
	dv1=dc.getElementById('photodiv1');
	dv2=dc.getElementById('photodiv2');
	setsize(dv1,pw,ph,'<img src="'+stylesheetdir+'/images/bg-trang.png">');
	setsize(dvp,pw+20,ph+90);
	posidiv('photoframe',null,null,null,true);
	stt1=tit;
	stt1=(stt1=="")?"(untitled)":stt1;
	dv1.innerHTML='<img src="'+sz+'" alt="">';
	dv2.innerHTML=tit;
	showhide(1,'photoframe',null,true);
	flickwork(false);
}
function flicklarge(ix,id)
{
	if(!jsonflick){return};
	s=jsonflick.photos.photo;
	flickwork(true);
	flickix=ix;
	flickid=id;
	jp='&photo_id='+s[ix].id;
	writescript(encodeURI(flicapi+flicapi2+jp+flickey,'fckpjv'));
}
function flickorigin(ix)
{
	if(!fckori){return};
	pw=parseInt(fckori.width);
	ph=parseInt(fckori.height);
	flickshowsup(fckori,ix,pw,ph,true);
}
function closephoto(tid,imp)
{
	showhide(0,tid,null,true);
	dv=dc.getElementById(imp);
	ia=dv.getElementsByTagName('IMG');
	for(i=0;i<ia.length;i++){
		ia[i].src=stylesheetdir+'/images/bg-trang.png';
	}
}
function flickwork(shw,ptop,pleft)
{
	dvp=dc.getElementById('fckwork');
	if(!dvp){return};
	sw=(shw)?1:0;
	if(shw){
		setsize(dvp,200,40);
		if(ptop){
			dvp.style.top=ptop;
			dvp.style.left=pleft;
		}else{
			posidiv('fckwork',null,null,null,true)
		}
	}
	showhide(sw,'fckwork',null,true);
}


function setsize(obj,pw,ph,inn)
{
  if(!pw||!ph){return};
  obj.style.width=pw.toString()+'px';
  obj.style.height=ph.toString()+'px';
  if(inn){obj.innerHTML=inn};
}
function showhide(k,tid,mos,fade,pad)
{
	bx=dc.getElementById(tid);if(!bx){return};
	if(mos){posidiv(tid,mos,pad)};
	bn=dc.getElementById('mn'+tid);
	if(k==1){dis=true};
	if(k==0){dis=false};
	if(k==-1){dis=(bx.style.display=='none')};
	if(fade){fadeit(tid,dis)};
	if(!fade){bx.style.display=(dis)?'block':'none'};
	if(bn){bn.innerHTML=(dis)?'&nbsp;&raquo;&nbsp;':'&nbsp;+&nbsp;'};
	if(mos){dc.getElementById(tid).focus()};
}
function fadeit(id,show,tm)
{
	tm=(tm)?tm:4;
	t=0;
	oid=dc.getElementById(id);
	if(show){
		doopc(0,id);
		oid.style.display='block';
		for(i=0;i<=100;i++){
		 setTimeout("doopc("+i+",'"+id+"')",(t*tm));t++;
		}
	}else{
		for(i=100;i>=0;i--){
		 setTimeout("doopc("+i+",'"+id+"',true)",(t*tm));t++;
		}
	}
}
function doopc(opa,id,hide)
{
	oid=dc.getElementById(id);
	oid.style.opacity=(opa/100);
	oid.style.MozOpacity=(opa/100);
	oid.style.KhtmlOpacity=(opa/100);
	oid.style.filter="alpha(opacity="+opa+")";
	if(opa==0&&hide){
		oid.style.display='none';
		doopc(100,id);
	}
}
var dmoux=0;var dmouy=0;var dragobj=null;
function dodrag(idb,idh)
{
	ozh=dc.getElementById(idh);
	ozb=dc.getElementById(idb);
	if(ozh&&ozb){
		ozh.onmousedown=dragdown;
		ozh.obody=ozb;
	}
}
function dragdown(e)
{
	e=(!e)?window.event:e;
	ozh=dragobj=this;
	ozb=dragobj.obody;
	dmoux=e.clientX;
	dmouy=e.clientY;
	ozb.style.left=posi(ozb.id,'x').toString()+'px';
	ozb.style.top=posi(ozb.id,'y').toString()+'px';
	dc.onmousemove=dragmove;
	dc.onmouseup=dragup;
}
function dragmove(e)
{
	e=(!e)?window.event:e;
	ozh=dragobj;
	ozb=ozh.obody;
	mx=parseInt(ozb.style.left);
	my=parseInt(ozb.style.top);
	tx=e.clientX;
	ty=e.clientY;
	ozb.style.left=parseInt(mx+tx-dmoux).toString()+'px';dmoux=tx;
	ozb.style.top=parseInt(my+ty-dmouy).toString()+'px';dmouy=ty;
	return false;
}
function dragup(e)
{
	dc.onmousemove=null;
	dc.onmouseup=null;
	dragobj=null;
}
function posidiv(tid,mos,plf,ptp,ctr)
{
	dv=dc.getElementById(tid);if(!dv){return};
	tgg=false;
	if(mos){
		mx=posi(mos,'x');
		my=posi(mos,'y');
		tgg=true;
	}else if(typeof(window.pageYOffset)=='number'){
		mx=window.pageXOffset;
		my=window.pageYOffset;
	}else if(dc.body&&(dc.body.scrollLeft||dc.body.scrollTop)){
		mx=dc.body.scrollLeft;
		my=dc.body.scrollTop;
	}else if(dc.documentElement&&(dc.documentElement.scrollLeft||dc.documentElement.scrollTop)){
		mx=dc.documentElement.scrollLeft;
		my=dc.documentElement.scrollTop;
	}else{
		mx=0;
		my=0;
	}
	dw=Number(dv.style.width.replace('px',''));
	dh=Number(dv.style.height.replace('px',''));
	bd=945;
	if(window.self&&self.innerHeight){
		h=self.innerHeight;
		bd=(ctr)?self.innerWidth:bd;
	}else if(dc.documentElement&&dc.documentElement.clientHeight){
		h=dc.documentElement.clientHeight;
		bd=(ctr)?dc.documentElement.clientWidth:bd;
	}else{
		h=dh+10;
	}
	if(tgg){
		dtop=((my-dh-5)<12)?5:(my-dh-12);
		dlef=(mx<20)?20:(mx-20);
		dlef=(dlef+dw>bd)?(dlef-(dlef+dw-bd)):dlef;
	}else if(ctr){
		dtop=parseInt(my+(h-dh)/2);
		dlef=parseInt((bd-dw)/2);
	}else{
		dtop=my+5;
		dlef=parseInt((bd-dw)/2);
	}
	dlef=(dlef<5)?5:dlef;
	dtop=(dtop<135&&!ctr)?135:dtop;
	dtop=(dtop<5)?5:dtop;
	dv.style.top=(dtop+((ptp)?ptp:0)).toString()+'px';
	dv.style.left=(dlef+((plf)?plf:0)).toString()+'px';
}


function trim(txt)
{
	if(!txt||txt=='')return '';
	while(txt.charAt(0)==' '){txt=txt.substring(1,txt.length)};
	while(txt.charAt(txt.length-1)==' '){txt=txt.substring(0,txt.length-1)};
	return txt;
}
function posi(tid,offs)
{
  ob=dc.getElementById(tid);if(!ob){return};
  le=0;
  if(ob.offsetParent){
    while(true){
      if(!ob.id||!ob==dc.body||ob.id=='bpan'){break};
      le+=(offs=='x'||offs=='X')?ob.offsetLeft:ob.offsetTop;
      ob=ob.offsetParent;
    }
  }
  return le;
}
function makebold(ix,tid)
{
	for(i=1;i<100;i++){
		eo=dc.getElementById(tid+i.toString());
		if(eo){
			eo.style.fontWeight=(i==ix)?'bold':'normal';
			eo.style.color=(i==ix)?'#d40':'#02b';
		}
	}
}
function writescript(jsxn,tname)
{
	if(jsxn!=''){
		var sp=dc.createElement('script');
		sp.setAttribute('src',jsxn);
		sp.setAttribute('id',tname);
		sp.setAttribute('type','text/javascript');
		dc.documentElement.firstChild.appendChild(sp);
	}
}