/* 
THIS NOTICE MUST REMAIN INTACT.

Copyright  2011 Quincy Lam aka Micro01 aka reikaze
E-mail: [email protected]

This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.

*/

var $ = jQuery;

//this holds the current jquery object that points to the currently shown thumbnail <img>
var currentImage = null; 
// a jquery collection of every image in the article
var allThumbnails = null;


// if this is true, a delay will change the picture periodically
var inSlideshow = false;

// if this is true, the info bar is shown
var infoPaneShown = false;

function thumbnailToFull(thumbnailURI) {
	// Breakup of thumbnail URIs:
	//
	// AAAAAAAAAAAAAAAAAAAA/thumb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAA/image.jpg/123px-image.jpg
	//
	// where 123px is the thumbnail height. Removing /thumb/ and the /123px... gives us a URI to the fullsize image.

	//get the full size image's URI
	var fullImageURI = thumbnailURI.substr( 0, thumbnailURI.search(/thumb\//i) ) + thumbnailURI.substr( thumbnailURI.search(/thumb\//i) + 'thumb/'.length, thumbnailURI.search(/\/\d+px/i) -  thumbnailURI.search(/thumb\//i) - 'thumb/'.length );

	return fullImageURI;
}

// given the jquery object thumbnail pointing to a <img>, set the current image to be shown
function setBigImage(thumbnail) {
	//fade out the old picture's thumbstrip thumb and fade in the new picture's
	$('#thumbStrip img').eq( allThumbnails.index(currentImage) ).fadeTo('fast',0.61);
	$('#thumbStrip img').eq( allThumbnails.index(thumbnail) ).fadeTo('fast',0.98);

	// do nothing if the picture doesn't need changing
	if (allThumbnails.index(thumbnail) != allThumbnails.index(currentImage)) {
		currentImage = thumbnail;

		// change #previousImage to hold the old image, so it looks like a direct fade...
		var oldThumbnailURI = $('#bigImage').attr('src');
		$('#previousImage').attr('src', oldThumbnailURI);
		$('#previousImage').fadeTo(0,1.0);

		var thumbnailURI = thumbnail.attr('src');
		//put the full size version of the newimage into the centre and hide it
		$('#bigImage').fadeTo(0,0);
		$('#bigImage').attr('src',thumbnailToFull(thumbnailURI));

		$('#previousImage').fadeOut(400);
		$('#bigImage').fadeIn(400);
	}
	
	// extract just the filename (e.g. Queens_House.jpg) by cutting it from the colon
	var pictureFilename = currentImage.parents('a').attr('href').substr( currentImage.parents('a').attr('href').search(/:/i) + 1 );
	// insert the image info into #infoPane
	// use of the commons API
	// i.e. http://toolserver.org/~magnus/commonsapi.php?image=Queens_House.jpg

	//$('#infoPane').load('http://toolserver.org/~magnus/commonsapi.php?image=' + pictureFilename + ' license name');
}

$(document).ready( function() {
	"use strict";

	//add my stylesheet manually, just in case
	//mw.loader.load("//en.wikipedia.org/wiki/User:Micro01/vector.css");

	// get a list of every thumbnail in the article
	// the second search condition is for some div's that hold multiple images
	allThumbnails = $('#bodyContent img.thumbimage, #bodyContent div.thumbimage img');

	// load all the full size images in a hidden div to reduce loading time
	$('body').append('<div id="preload"></div>');
	allThumbnails.each(function() {	
		var copy = $(this).clone();
		copy.attr('src',thumbnailToFull(copy.attr('src')));
		$('#preload').append(copy);
	});

	//create a variable of the new element for easy access
	var darkness = $('<div id="darknessBox"></div>');
	$('body').append(darkness);

	darkness.append('<a id="closeText">Close</a>');

	// this is the slideshow enabler
	// when pressed, slideshows will be enabled (high opacity). when pressed again, they will be disabled (low opacity).
	darkness.append('<div id="startSlideshow"></div>');
	$('#startSlideshow').append('<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/07/X-office-presentation.svg/48px-X-office-presentation.svg.png" alt="Start Slideshow" />');
	$('#startSlideshow').append('<div id="timeoutForm"></div>');
	$('#timeoutForm').append('Timeout (ms)<br/><input id="timeoutField" title="Timeout" value="" />');
	$('#startSlideshow img').click(function() {
		inSlideshow = !inSlideshow;
		if (inSlideshow) {
			$('#startSlideshow').fadeTo('fast',0.98);
			$('#timeoutForm').show('fast');
			$('#startSlideshow').find('input').focus();
		}
		else {
			$('#startSlideshow').fadeTo('fast',0.61);
			$('#timeoutForm').hide('fast');
			$('#startSlideshow').find('input').blur();
		}
	});
	$('#startSlideshow').fadeTo(0, 0.61);
	$('#timeoutForm').hide(0);

	//an info slider
	darkness.append('<div id="infoSlider"></div>');
	$('#infoSlider').append('<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Emblem-question.svg/48px-Emblem-question.svg.png" alt="Image Info" />');
	$('#infoSlider').append('<div id="infoPane"></div>');
	$('#infoPane').slideUp('fast');
	$('#infoSlider img').click(function() {
		if (!infoPaneShown) {
			$('#infoPane').slideDown('fast');
			$('#infoSlider').fadeTo('fast',0.98);
			infoPaneShown = true;
		}
		else {
			$('#infoPane').slideUp('fast');
			$('#infoSlider').fadeTo('fast',0.61);
			infoPaneShown = false;
		}
	});
	$('#infoSlider').fadeTo(0,0.61);


	darkness.append('<div id="imageContainer"></div>');
	$('#imageContainer').append('<img id="bigImage"/>');
	$('#imageContainer').append('<img id="previousImage"/>');

/*
	//$('#imageContainer').append('<div class="upScrollContainer"><div id="upChangeButton" class="scrollButton"></div></div>');
	//$('#imageContainer').append('<div class="downScrollContainer"><div id="downChangeButton" class="scrollButton"></div></div>');
	$('#imageContainer').append('<div class="upScrollContainer"></div>');
	$('#imageContainer').append('<div class="downScrollContainer"></div>');
*/
	
	darkness.append('<div id="listContainer"></div>');
/*
	//$('#listContainer').append('<div class="upScrollContainer"><div id="upScrollButton" class="scrollButton"></div></div>');
	//$('#listContainer').append('<div class="downScrollContainer"><div id="downScrollButton" class="scrollButton"></div></div>');
	$('#listContainer').append('<div class="upScrollContainer"></div>');
	$('#listContainer').append('<div class="downScrollContainer"></div>');
*/

	$('#listContainer').append('<ul id="thumbStrip"></ul>');


	//draw the switch-image up and down buttons. the arrows are x21bf and x21c3 respectively
	$('.upScrollContainer').each(function() { 
		$(this).text('↿'); 
	}); 
	$('.downScrollContainer').each(function() { 
		$(this).text('⇃'); 
	});

	$('div.upScrollContainer, div.downScrollContainer').each( function() { 
		$(this).hover(function(e) {
			e.stopPropagation();
			$(this).children('div').fadeIn('fast');
		},
		function (e) {
			e.stopPropagation();
			$(this).children('div').fadeOut('fast');
		});
	} );


	// when hovering over these buttons, the list will automatically scroll
	var scrollInterval = 0;
	/*$('#upScrollButton').hover(function(e) {
		function a () { $('#listContainer').scrollTop( $('#listContainer').scrollTop() - 2 ); }
		scrollInterval = setInterval(a, 15);		
	},
	function () {
		clearInterval(scrollInterval);
	});

	$('#downScrollButton').hover(function(e) {
		function a () { $('#listContainer').scrollTop( $('#listContainer').scrollTop() + 2 ); }
		scrollInterval = setInterval(a, 15);
	},
	function () {
		clearInterval(scrollInterval);
	});*/

	// scroll faster if the user clicks and holds the horizontal bars at the edges 
	$('#listContainer div.upScrollContainer').mousedown(function() {
		function a () { $('#listContainer').scrollTop( $('#listContainer').scrollTop() - 5 ); }
		scrollInterval = setInterval(a, 15);		
	}).mouseup(function () {
		clearInterval(scrollInterval);
	});
	$('#listContainer div.downScrollContainer').mousedown(function() {
		function a () { $('#listContainer').scrollTop( $('#listContainer').scrollTop() + 5 ); }
		scrollInterval = setInterval(a, 15);		
	}).mouseup(function () {
		clearInterval(scrollInterval);
	});

	// make a dark translucent box
	darkness.css('width', $(document).width());
	darkness.css('height', $(document).height());
	darkness.css('overflow','visible');
	darkness.offset({top: 0, left: 0});

	// filmstrip of thumbnails for selection
	allThumbnails.each(function() {
		var currentListItem = $('<li></li>');
		$('#thumbStrip').append(currentListItem);
		currentListItem.append($(this).clone());
		currentListItem.find('img').attr('width','');
		currentListItem.find('img').attr('height','');
		currentListItem.find('img').fadeTo(0,0.61);	
	});

	// change the image by clicking on a thumbnail
	$('#thumbStrip li img').click(function() {
		var i = $('#thumbStrip img').index($(this));
		setBigImage(allThumbnails.eq(i));
	});

	// hovering fades
	$('#thumbStrip li img').hover(function() {
		var i = $('#thumbStrip img').index($(this));
		if ( i != allThumbnails.index(currentImage) ) {
			$(this).fadeTo('fast',1.0);
		}
	},
	function() {
		var i = $('#thumbStrip img').index($(this));
		if ( i != allThumbnails.index(currentImage) ) {
			$(this).fadeTo('fast',0.61);
		}
		else {
			$(this).fadeTo('fast',0.98);
		}
	});

	//hide until called for
	darkness.hide(0);

	//disable the standard image magnify links
	$('div.magnify a').attr('href',''); 

	$('div.magnify a').click(function(e) { 
		e.preventDefault();

		var thumbnail = $(this).parents('.thumbinner').find('img.thumbimage');
		setBigImage(thumbnail);
	
		//disable outer scrollbar
		$('body').css('overflow','hidden'); 
		
		//resize the dark screen to take up the space previously occupied by scrollbars
		$(window).resize();

		//everything is ready. showtime!
		darkness.fadeIn(100); 
		return false;
	});

	// automatically resize #darknessBox with the size of the viewport
	$(window).resize(function(e) {		
		darkness.css('width', $(window).width());
		darkness.css('height', $(window).height());
	});

	$('#closeText').click(function() {
		darkness.fadeOut(200);
		$('body').css('overflow','auto'); 
	});

}); //ends .ready