// simple all-javascript flickr viewer.
// amazingly, I couldn't find one of these out there.  Why?  Because nobody wants to put their API key
// into client-side javascript.  And now that I think of it, I don't want to do that either.  So we're
// going to do most of the flickr-communication in our PHP code, and then send the *results* to this
// viewer.

// Once again, multimegafuckingthankyous to quirksmode.org for cross-platform event handling.

flickr_photo=function(attrs) {
	//this.farm=attrs.farm;
	//this.server=attrs.server;
	//this.id=attrs.id;
	//this.secret=attrs.secret;
	if(attrs.title)
		this.title=attrs.title;
	else
		this.title='';
	//this.nsid=attrs.nsid;
	if(attrs.description)
		this.description=attrs.description;
	else
		this.description='';
	
	// 4/14/9 replacing the above flickr-specific attrs with something more generic
	this.fullsrc=attrs.fullsrc;
	this.thumbsrc=attrs.thumbsrc;
	if (attrs.link)
		this.link=attrs.link;
	else
		this.link='#';
}
//flickr_photo.prototype.imgsrc=function(size) {
//	return 'http://farm'+this.farm+'.static.flickr.com/'+this.server+'/'+this.id+'_'+this.secret+size+'.jpg';
//}
//flickr_photo.prototype.href=function() {
//	return 'http://www.flickr.com/photos/'+this.nsid+'/'+this.id;
//}
//flickr_photo.prototype.page=function() {
//	return 'bah';
//}


flickr_viewer=function(id,photos) {
	this.id=id;
	this.div=null;
	
	this.current_photo=-1;
	this.current_page=-1;
	
	this.photos=new Array();
	for(i=0;i<photos.length;i++) {
		this.photos.push(new flickr_photo(photos[i]));
	}
	this.make_widget();
}

flickr_viewer.prototype.bigsize=500;
//flickr_viewer.prototype.bigsize_param='';
flickr_viewer.prototype.bigsize_class='flickr_medium';

flickr_viewer.prototype.smallsize=75;
//flickr_viewer.prototype.smallsize_param='_s';
flickr_viewer.prototype.perpage=Math.floor(flickr_viewer.prototype.bigsize/flickr_viewer.prototype.smallsize);
flickr_viewer.prototype.smallsize_class='flickr_small';

flickr_viewer.prototype.make_widget = function() {
	if (this.photos.length>0) {
		if (!this.div) {
			this.div=$(this.id);
		}
		if (this.div) {
			// nav bar with thumbs and prev/next arrows
			nav=document.createElement('div');
			nav.className='flickr_controls';

			this.left_arrow=document.createElement('img');
			this.left_arrow.src='/editorial/images/arrow_left.gif';
			nav.appendChild(this.left_arrow);

			this.thumbs=document.createElement('span');
			this.thumbs.className='flickr_thumbs';
			nav.appendChild(this.thumbs);

			this.right_arrow=document.createElement('img');
			this.right_arrow.src='/editorial/images/arrow_right.gif';
			nav.appendChild(this.right_arrow);

			// the currently-displayed photo:
			displayed_photo=document.createElement('div');
			displayed_photo.className=this.bigsize_class;

			// currently displayed photo's name
			this.photo_title=document.createElement('h3');
			this.photo_title.className='flickr_title';
			displayed_photo.appendChild(this.photo_title);

			this.photohref=document.createElement('a');
			//this.bigphoto=document.createElement('img');
			
			//this.photohref.appendChild(this.bigphoto);
			displayed_photo.appendChild(this.photohref);
			
			// 12/8/8 switching to innerHTML assignment to pick up (sanitized on the PHP side) HTML markup
			this.caption=document.createElement('div');
			this.caption.className='flickr_description';
			this.caption_text=document.createElement('span');
			this.caption_text.className='flickr_description_text';
			this.caption.appendChild(this.caption_text);
			
			displayed_photo.appendChild(this.caption);

			// the whole thing:
			this.div.appendChild(nav); // small previews
			this.div.appendChild(displayed_photo); // big image
			
			this.show(0);
		} //else alert('I am lost');
	} //else alert('no photos');
}

//flickr_viewer.prototype.listem=function() {
//	alert(this.photos);
//}

flickr_viewer.prototype.big_image_loaded = function(width) {
	this.caption.style.width=width+'px';
}

img_loaded=function() {
	if (viewer=this.getAttribute('x-viewer')) {
		runglobal('v'+viewer+'.big_image_loaded('+this.width+')',0);
	}
}

flickr_viewer.prototype.show = function(imgnum) {
	if (imgnum < this.photos.length) {
		if (this.current_photo != imgnum ) {
			// change big photo
			this.current_photo=imgnum;

			//this.photohref.href=this.photos[imgnum].href();
			this.photohref.href=this.photos[imgnum].link;
			this.photohref.title=this.photos[imgnum].title;
			this.photo_title.innerHTML=this.photos[imgnum].title;

			// 12/8/8 use innerHTML instead
			//this.caption_text.nodeValue=this.photos[imgnum].description;
			this.caption_text.innerHTML=this.photos[imgnum].description;
			this.caption_text.style.width='500px'; // default
			//this.photo_title.style.width='500px';

			this.bigphoto=document.createElement('img');
			this.bigphoto.alt=this.photos[imgnum].title;
			this.bigphoto.setAttribute('x-viewer',this.id);
			this.bigphoto.onload=img_loaded;
			this.bigphoto.src=this.photos[imgnum].fullsrc;
		
			if (this.photohref.firstChild)
				this.photohref.removeChild(this.photohref.firstChild);
			this.photohref.appendChild(this.bigphoto);
		
			pageno=Math.floor(imgnum/this.perpage);
			if (this.current_page != pageno) {
				this.show_page(pageno);
			}
		}
	}
}

flickr_viewer.prototype.clicky = function(e) {
	// for w3c browsers, e is the event
	if (!e) {
		// special case for MSIE
		e = window.event;
	}
	if (e.target) {
		/// w3c browsers
		targ = e.target;
	} else if (e.srcElement) {
		// special case for MSIE
		targ = e.srcElement;
	}
	callme=targ.getAttribute('x-callme');
	
	//alert('clicky about to run '+callme);
	
	//eval(callme);
	runglobal(callme);
}


flickr_viewer.prototype.show_page = function(pageno) {
	// change page
	//alert('show_page '+pageno);
	
	this.current_page=pageno;
	while (this.thumbs.firstChild)
		this.thumbs.removeChild(this.thumbs.firstChild);

	i=0;
	idx=pageno * this.perpage;
	
	if (pageno>0) {
		this.left_arrow.style.visibility='visible';
		this.left_arrow.onclick=this.clicky;
		this.left_arrow.setAttribute('x-callme','v'+this.id+'.show_page('+(pageno-1)+');');
		
	} else
		this.left_arrow.style.visibility='hidden';
	
	while (i<this.perpage && idx<this.photos.length ) {
		thumb=document.createElement('img');
		//thumb.src=this.photos[idx].imgsrc(this.smallsize_param);
		thumb.src=this.photos[idx].thumbsrc;
		thumb.alt=this.photos[idx].title;
		thumb.className=this.smallsize_class;
		
		thumb.onclick=this.clicky;
		thumb.setAttribute('x-callme','v'+this.id+'.show('+idx+');');

		this.thumbs.appendChild(thumb);
		idx++;
		i++;
	}

	if (idx < this.photos.length) {
		this.right_arrow.style.visibility='visible';
		this.right_arrow.onclick=this.clicky;
		this.right_arrow.setAttribute('x-callme','v'+this.id+'.show_page('+(pageno+1)+');');
	} else
		this.right_arrow.style.visibility='hidden';
}