// -----------------------------------------------------------------------------------
// 
// This page coded by Scott Upton
// http://www.uptonic.com | http://www.couloir.org
//
// This work is licensed under a Creative Commons License
// Attribution-ShareAlike 2.0
// http://creativecommons.org/licenses/by-sa/2.0/
//
// Associated frameworks copyright their respective owners
//
// -----------------------------------------------------------------------------------
// --- version date: 07/23/2007 ------------------------------------------------------


/* Basic settings to allow URL-based bookmarking
------------------------------------------------------------*/

// Specify your design's photo CSS border size
var borderSize = 0;

// Get current photo id from URL
var curURL = document.location.href;
var splitURL = curURL.split("#");
var photoId = splitURL[1] - 1;

// If no photoId supplied then set default
var photoId = (!photoId)? 0 : photoId;


// Multiply user-supplied CSS border size from layout
var borderSize = borderSize*2;

// Thumbnails shown already?
var hasThumbs = false;


/* ShowPix Class
------------------------------------------------------------*/
var ShowPix = new Class({
	initialize: function(rsp){
		this.registerEvents();
		this.tweenTimer	= 500;
		this.playTimer	= 5000;
		this.tweenType	= Fx.Transitions.quintOut;
		this.loadDelay	= 10;
		this.loadTimer	= this.tweenTimer + this.loadDelay;
		this.photoNum	= rsp.photos.photo.length;
		this.photoInfo	= {};
		this.rsp 		= rsp;
		
		// Loop through to build object with each photo's info
		for (var i=0; i<this.photoNum; i++){
			this.photoInfo[i] = {
				'id': rsp.photos.photo[i].id,
				'owner': rsp.photos.photo[i].owner,
				'src': 'http://static.flickr.com/'+rsp.photos.photo[i].server+'/'+rsp.photos.photo[i].id+'_'+rsp.photos.photo[i].secret+'.jpg',
				'title': rsp.photos.photo[i].title,
                'date': '',
                'video': false
			}
            new MooPix().callFlickrUrl({method: 'flickr.photos.getInfo', photo_id: this.photoInfo[i].id});
			if(i == this.photoNum-1){this.initSwap();}
		}		
        this.createThumbs(this.rsp);
	},
	setNewPhotoParams: function(){
		// Set source of new image
        if (this.photoInfo[photoId].video) {
            $('Video').setHTML('<object type="application/x-shockwave-flash" width="500" height="281" data="http://www.flickr.com/apps/video/stewart.swf?v=71377" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"><param name="flashvars" value="intl_lang=en-us&photo_secret=0b32aa16f9&photo_id=' + this.photoInfo[photoId].id + '&hd_default=false"></param><param name="movie" value="http://www.flickr.com/apps/video/stewart.swf?v=71377"></param><param name="bgcolor" value="#000000"></param> <param name="allowFullScreen" value="true"></param><embedtype="application/x-shockwave-flash" src="http://www.flickr.com/apps/video/stewart.swf?v=71377" bgcolor="#000000" allowfullscreen="true" flashvars="intl_lang=en-us&photo_secret=0b32aa16f9&photo_id=' + this.photoInfo[photoId].id + '&hd_default=false" height="281" width="500"></embed></object>');
        } 
		$('Photo').setProperty('src', this.photoInfo[photoId].src);
	},
	setPhotoCaption: function(){
		// Add caption from gallery array
		// $('Caption').setHTML('<a href="http://www.flickr.com/photos/'+ this.photoInfo[photoId].owner + '/' + this.photoInfo[photoId].id + '/" title="View at Flickr...">' + this.photoInfo[photoId].title + '</a>');
		// $('Counter').setHTML(((photoId+1) + '/' + this.photoNum));
		$('Flickr').setHTML('<a href="http://www.flickr.com/photos/'+ this.photoInfo[photoId].owner + '/' + this.photoInfo[photoId].id + '/" title="View at Flickr..." target="_blank">Flickr</a>');
		$('Enlarge').setHTML('<a href="http://www.flickr.com/photos/'+ this.photoInfo[photoId].owner + '/' + this.photoInfo[photoId].id + '/sizes/l" title="Enlarge" target="_blank">Enlarge</a>');
        $('Date').setHTML('<span>' + this.photoInfo[photoId].date + '</span>');
		
		// Pop caption link in new window
		$$('#Caption a').addEvent("click", function(e) {
			window.open(this.href);
			new Event(e).stop();
		});
	},
	startResize: function(pid){
		// Get current photo dimensions
		this.wCur = $('Container').getStyle('width').toInt();
		this.hCur = $('Container').getStyle('height').toInt();
		
		// Get new photo dimensions from Flickr
		new MooPix().callFlickrUrl({method: 'flickr.photos.getSizes', photo_id: pid});
	},
    setInfo: function(rsp) {
        for (var i=0; i<this.photoNum; i++) {
            if (rsp.photo.id == this.photoInfo[i].id) {
                this.photoInfo[i].date = rsp.photo.dates.taken.split(' ')[0];
                if (rsp.photo.video) {
                    this.photoInfo[i].video = true;
                }
            }
        }
    },
	endResize: function(rsp){
		// Set new photo dimensions from response
		this.wNew = rsp.sizes.size[3].width;
		this.hNew = rsp.sizes.size[3].height;
		
		if(this.hCur == this.hNew && this.wCur == this.wNew){
			// Set photo source and links on delay (Firefox bug)
			this.setNewPhotoParams.delay(10, this);
		} else {
			// Set photo source and links
			this.setNewPhotoParams.delay(10, this);
			// Only resize if needed
			var myPhoto = new Fx.Styles('Container', { duration: this.tweenTimer, transition: this.tweenType }).custom({
				'height': [this.hCur, this.hNew],
				'width': [this.wCur, this.wNew]
			});
			var myCaption = new Fx.Styles('CaptionContainer', { duration: this.tweenTimer, transition: this.tweenType }).custom({
				'width': [this.wCur, this.wNew],
                'margin-left': [500 - this.wCur, 500 - this.wNew]
			});
		}
	},
	showVideo: function(){		
		// Show video block, but hide loading graphic
		$('Loading').setStyle('display','none');
		$('Photo').setStyle('display','none');
        // if (this.photoInfo[photoId].video) {

        $('Video').setStyle('display','block');
        // Fade in
        $('Video').effect('opacity').custom(0,1).chain(function(){
            $('Controls').setStyle('display','block');
		    $('CaptionContainer').setStyle('display','block');
        });
	},
	showPhoto: function(){		
		// Show photo block, but hide loading graphic
		$('Loading').setStyle('display','none');

        if (this.photoInfo[photoId].video) {
            this.showVideo();
        } else {
            $('Photo').setStyle('display','block');

            // Fade photo in
            $('Photo').effect('opacity').custom(0,1).chain(function(){
                $('Controls').setStyle('display','block');
		        $('CaptionContainer').setStyle('display','block');
            });
        }
	},
	nextPhoto: function(){		
		// Figure out which photo is next
		(photoId == (this.photoNum - 1)) ? photoId = 0 : photoId++;
		this.initSwap();
	},
	prevPhoto: function(){
		// Figure out which photo is previous
		(photoId == 0) ? photoId = this.photoNum - 1 : photoId--;
		this.initSwap();
	},
	jumpToPhoto: function(id){
		// Enable direct jumps to specific photos
		photoId = id;
		this.initSwap();
	},
	initSwap: function(){
		// Show loading graphic
		$('Loading').setStyle('display','block');
		
		// Hide photo, caption, navigation	
		$('Photo').setStyles({opacity: 0, display: 'none'});
		$('Video').setStyles({opacity: 0, display: 'none'});
        $('Video').empty();
		$('Controls').setStyle('display','none');
		$('CaptionContainer').setStyle('display','none');
		
		// Resize container and set caption
		this.startResize(this.photoInfo[photoId].id);
		this.setPhotoCaption.delay(10, this);
		
		// Highlight the selected image in thumbnail view
		this.setActiveThumb();
	},
	toggleAutoPlay: function(timer){
		if(this.playingInt){
			this.stopAutoPlay();
		} else {
			this.nextPhoto(); 
			this.startAutoPlay(timer);
		}
	},
	startAutoPlay: function(timer){
		this.playingInt = (function(){ this.nextPhoto(); }).bind(this).periodical(timer);
		$('PlayToggle').addClass('pause');
	},
	stopAutoPlay: function(){
		$clear(this.playingInt);
		this.playingInt = null;
		$('PlayToggle').removeClass('pause');
	},
	createThumbs: function(rsp){
		var thumbLink = {};
		var thumbImage = {};
		
		// Loop through photos to generate gallery
		rsp.photos.photo.each(function(value, key) {
			
			// Create links to large photos
			thumbLink[key] = new Element('a', {
				'href': 'javascript://',
				'title': value.title,
				'events': {
					click: function(){
						Slideshow.jumpToPhoto(key); // hack because bind(this) fails
						// $('ThumbContainer').setStyle('display','none');
						$('Container').setStyle('display','block');
						$('CaptionContainer').setStyle('display','block');
					}
					//.bind(this)
				}
			}).injectInside('ThumbContainer');
			
			// 
			thumbImage[key] = new Element('img', {
				'height': '75',
				'width': '75',
				'alt': value.title,
				'src': 'http://static.flickr.com/'+value.server+'/'+value.id+'_'+value.secret+'_s.jpg'
			}).injectInside(thumbLink[key]);
		});
		
		hasThumbs = true;
	},
	setActiveThumb: function(){
		$$('#ThumbContainer a').each(function(el, key){
			el.removeClass('selected');
			if(key == photoId) { el.addClass('selected'); }
		});
	},
	registerEvents: function(){
		// Pop all links in paragraphs in new windows
		$$('p a').each(function(el) {
			el.addEvent("click", function(e) {
				window.open(el.href);
				new Event(e).stop()
			});
		});
		
		// Add events for slideshow
		$('PrevLink').addEvent( 'click', function(){ this.prevPhoto(); }.bind(this));
		$('NextLink').addEvent( 'click', function(){ this.nextPhoto(); }.bind(this));
		$('Photo').addEvent( 'load', function(){ this.showPhoto(); }.bind(this));

		$('Controls').addEvent( 'mouseover', function(){ $('Controls').setStyle('opacity','1.0'); }.bind(this));
		$('Controls').addEvent( 'mouseout', function(){ $('Controls').setStyle('opacity','0.7'); }.bind(this));
		
		// Add events for thumbnails		
		$('ViewThumbs').addEvent( 'click', function(){
			// Creat thumbnails only once
			if(hasThumbs == false) { this.createThumbs(this.rsp);this.setActiveThumb(); }
			
			// $('ThumbContainer').setStyle('display','block');
			$('Container').setStyle('display','none');
			$('CaptionContainer').setStyle('display','none');
		}.bind(this));
	}
});