///
/// album_detail.js
/// Album detail page javascript

function Photo (id, title, desc, datetime, views, num_ratings, avg_rating, thumb, large, orig) {
	this.id = id;
	this.title = title;
	this.desc = desc;
	this.datetime = datetime;
	this.views = views;
	
	this.num_ratings = num_ratings;
	this.avg_rating = avg_rating;
	
	this.thumbnail = thumb;
	this.large_image = large;
	this.original = orig;
	
	this.getRating = function () {
		if (this.avg_rating >= 50)
			return '<span style="color:#006600;">'+this.avg_rating+'% cool</span>';
		else
			return '<span style="color:#660000;">'+this.avg_rating+'% cool</span>';
	};
}

window.onload = function () {
	if (window.location.href.indexOf('?id=') > -1) {
		var id = parseInt(window.location.href.split('?id=')[1]);
		var show_id = -1;
		for (var i=0; i<photo_list.length; i++) {
			if (photo_list[i].id == id) {
				show_id = i;
				break;
			}
		}
		if (show_id > -1) {
			ThumbnailView.page = 1;
			ThumbnailView.next_img = show_id;
			ImageView.showImage(show_id);
		}
		else
			ThumbnailView.init();
	}
	else ThumbnailView.init();
};

var ThumbnailView = {
	page		: 0,
	num_pages	: 0,
	start		: 0,
	end			: 0,
	per_page	: 18,
	
	next_img	: -1,
	
	init: function() {
		if (photo_list.length <= 0)
			document.getElementById('thumbnails').innerHTML = 'No photos have been uploaded yet.';
		else
			ThumbnailView.showPage(1);
	},
	
	showPage: function (p) {
		switchView('thumbnail', false);
		
		//var _tool_sponsor = document.getElementById("tool_sponsor");
		//if (_tool_sponsor) _tool_sponsor.style.display = "none";
		
		// Thumbnail Container
		var _container = document.getElementById('thumbnails');
		
		// Pagination Links (top)
		_container.innerHTML = ThumbnailView.paginate(p, 'top');
		
		_thumb_container = document.createElement('div');
		_thumb_container.id = 'thumbnail_container';
		for (i=ThumbnailView.start; i<ThumbnailView.end; i++) {
			// Prepping Values for Output
			if (photo_list[i].title)
				var _title = photo_list[i].title;
			else
				var _title = '&nbsp;';
			
			var _thumb = document.createElement('div');
			_thumb.id = 'thumbnail'+photo_list[i].id;
			_thumb.className = 'thumbnail';
			_thumb.innerHTML = 	'<a href="javascript:ThumbnailView.fadeThumbnails('+i+');">' +
									'<img src="'+photo_list[i].thumbnail+'" />' +
								'</a><br />' +
								'<nobr>'+_title+'</nobr>';
			
			_thumb_container.appendChild(_thumb);
		}
		_container.appendChild(_thumb_container);
		
		// Pagination Links (bottom)
		_container.innerHTML += ThumbnailView.paginate(p, 'bottom');
	},
	
	paginate: function (p, pos) {
		// Handling Pagination
		ThumbnailView.page = p;	// User-friendly Page Number
		p = p-1;
		
		ThumbnailView.start = 0;
		ThumbnailView.end = photo_list.length;
		
		if (photo_list.length > ThumbnailView.per_page) {
			ThumbnailView.start = (p*ThumbnailView.per_page);
			ThumbnailView.end = ThumbnailView.start + ThumbnailView.per_page;
		}
		
		if (ThumbnailView.end > photo_list.length)
			ThumbnailView.end = photo_list.length;
		
		// Number of Pages
		ThumbnailView.num_pages = Math.ceil(photo_list.length/ThumbnailView.per_page);
			
		//alert('start: '+ThumbnailView.start+'\nend: '+ThumbnailView.end+'\npages: '+ThumbnailView.num_pages);
		
		// Create Pagination Control <div>
		if (pos == 'bottom') 
			br = '<br clear="all" />';
		else
			br = '';
			
		var _output = br+'<div class="page_control '+pos+'">';
		
		// Next Page Link
		if (ThumbnailView.page < ThumbnailView.num_pages) 
			_output += '<a href="javascript:ThumbnailView.showPage('+(ThumbnailView.page+1)+');" style="float:right;">Next Page &rsaquo;</a>';
		else
			_output += '<span style="float:right;">Next Page &rsaquo;</span>';
			
		// Previous Page Link
		if (ThumbnailView.page > 1) 
			_output += '<a href="javascript:ThumbnailView.showPage('+(ThumbnailView.page-1)+');" style="float:left;">&lsaquo; Previous Page</a> ';
		else
			_output += '<span style="float:left;">&lsaquo; Previous Page</span>';
		
		// Page x of y Text
		_output += 'Page '+ThumbnailView.page+' of '+ThumbnailView.num_pages+' ';
		
		// Close Pagination Control <div>
		_output += '</div>';
			
		return _output;
	},
	
	fadeThumbnails: function (i) {
		ThumbnailView.next_img = i;
		new Effect.Fade('thumbnails',{duration:0.15,afterFinish:ImageView.init,queue:{scope:'image_fade',limit:1}});
	},
	
	fadeIn: function () {
		ThumbnailView.showPage(ThumbnailView.target_page);
		new Effect.Appear('thumbnails',{duration:0.15,queue:{scope:'image_fade',limit:1}});
	}
};

var ImageView = {
	page	: 0,
	current	: -1,
	
	init	: function () {
		ImageView.current = ThumbnailView.next_img;
		ImageView.fadeInImage(ImageView.current);
	},
	
	showImage: function (i) {
		if (i >= photo_list.length)
			i = 0;
		if (i < 0)
			i = photo_list.length-1;
			
		switchView('image', false);
			
		ImageView.current = i;
		var _container = document.getElementById('thumbnails');
		_container.innerHTML = ImageView.paginate(ImageView.current, 'top');
		
		var _large = document.createElement('div');
		_large.id = 'large_image_view';
		var rate_images = (logged_in) ? '<img style="border:none;" src="'+fs_url+'community/img/rating/thumbs_cool.jpg" onclick="updateRating(1, '+photo_list[i].id+')" /> <img style="border:none;" src="'+fs_url+'community/img/rating/thumbs_not.jpg" onclick="updateRating(0, '+photo_list[i].id+')" /><br />': '';
		_large.innerHTML += '<a href="javascript:ImageView.fadeImage('+ThumbnailView.page+');">' +
								'<img src="'+photo_list[i].large_image+'" />' +
							'</a><br />' +
							'<div class="info" style="width:644px;">' +
								photo_list[i].title+'<br />' +
								'<div class="desc" style="width:644px;">'+photo_list[i].desc+'</div>' +
							'</div>' +
							
							'<div class="additional" style="width:644px;">' +
								'<div class="rate" style="background-color: #ffffff;">' +
									'<table cellspacing="0" cellpadding="1" border="0">' +
									'<tr>' +
										'<th>RATE PHOTO:</th>' +
									'</tr>' +
									'<tr>' +
										'<td><div id="thankyou_'+photo_list[i].id+'">' +
											rate_images +
											photo_list[i].getRating()+' - '+photo_list[i].num_ratings +
										'</div></td>' +
									'</tr>' +
									'</table>' +
								'</div>' +
								'<strong>'+photo_list[i].views+'</strong> - <a href="'+photo_list[i].original+'" target="_blank">Download/Print Full-Size Image</a> - <a href="mailto:?subject=Check%20Out%20This%20Photo&body=Check%20Out%20This%20Photo:%20'+photo_list[i].large_image+'">Forward This Image</a><br />' +
								//document.getElementById("tool_sponsor").innerHTML +
								'<br clear="all" /><br />' +
							'</div>';
		
		_container.appendChild(_large);
		
		updateViews(photo_list[i].id);
	},
	
	paginate: function (i, pos) {
		var _output = '';
		_output += '<div class="page_control '+pos+'">';
		_output += '<a href="javascript:ImageView.showImage('+(ImageView.current+1)+');" style="float:right;">Next Image &rsaquo;</a>';
		_output += '<a href="javascript:ImageView.showImage('+(ImageView.current-1)+');" style="float:left;">&lsaquo; Previous Image</a>';
		_output += 'Image '+(ImageView.current+1)+' of '+photo_list.length;
		_output += '</div>';
		
		return _output;
	},
	
	fadeImage: function (i) {
		ThumbnailView.target_page = i;
		document.getElementById('tool_sponsor').style.display = 'none';
		new Effect.Fade('thumbnails',{duration:0.15,afterFinish:ThumbnailView.fadeIn,queue:{scope:'image_fade',limit:1}})
	},
	
	fadeInImage: function (i) {
		ImageView.showImage(i);
		new Effect.Appear('thumbnails',{duration:0.15,queue:{scope:'image_fade',limit:1}, afterFinish:function (){document.getElementById('tool_sponsor').style.display='block';}});
	}
};

function deleteAlbum(url) {
	if (confirm("Are you sure you want to delete this album\nand all of its photos?")) {
		window.location.href = url;
	}
}


function updateViews(id) {
	var req = new Ajax.Request('/gallery/ajax/update_photo_views/'+id+'/',{
		method: 'get',
		asynchronous: true
	});
}

function updateRating(val, id) {
	var req = new Ajax.Request('/gallery/ajax/update_photo_rating/'+id+'/?rating='+val,{
		method: 'get',
		asynchronous: true,
		onComplete: function (r, h) {
			var str = 'thankyou_' + r.responseText;
			var _el = document.getElementById(str);
			if (_el) _el.innerHTML = 'Thank you for voting.';
		}
	});
}

function showOptionsWindow(i) {
	day = new Date();
	id = day.getTime();
	eval("page" + id + " = window.open('/gallery/imageoptions/"+i+"/', '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=670,height=520');");
}

function switchView(v, t) {
	var _t = document.getElementById('thumbnail_view_link');
	var _i = document.getElementById('image_view_link');
	if (v == 'thumbnail') {
		_i.className = '';
		_t.className = 'active';
		if (t)
			ImageView.fadeImage(1);
	}
	else if (v == 'image') {
		_i.className = 'active';
		_t.className = '';
		if (t)
			ThumbnailView.fadeThumbnails(0);
	}
}

function rate_hover (r, i) {
	var end = r+1;
	for (var x=1; x<end; x++) {
		var _s = "rate_"+x+"_"+i;
		var _img = document.getElementById(_s);
		_img.src = fs_url+'community/img/rating/star_active.jpg';
	}
}

function rate_out (i) {
	for (var x=1; x<=5; x++) {
		var _s = "rate_"+x+"_"+i;
		var _img = document.getElementById(_s);
		_img.src = fs_url+'community/img/rating/star_inactive.jpg';
	}
}