/**
 * @author Kav
 *
 *	Heavy mods and VERTICAL feature by kythin.
 *
 */

// Build image gallery from id supplied
// Gallery ids should match sub-folder names in images folder
// Settings are controlled via element attributes in the html:
//
// Attributes and what they do:
//		data-autoscroll: should images autoscroll
//		data-offset: initial left offset of images
//		data-gallery: gallery id - the name of the folder containing images to load
//

var _gimages = []; // Array to hold jquery image objects
var _gwidth = 0; // Holds the combined width of all images in the gallery
var _gauto = false; // Autoscroll var, false by default
var _goffset = 0; // Initial left offset of gallery images, used for alignment
var _gtimer; // Interval for scroll animation
var _gcontainer; // The container div
var _ggalleryup = false;
var _ganimating = false;
var _horiz = false; //true = the images will scroll towards the left from the right. false = from the bottom to the top.
var _ispaused = false;

//var _speed = 1; //number of pixels changing per interval. lower number will be smoother.
//var _interval = 30; //milliseconds between each change.

$(window).unload(function() { if(_ganimating) clearInterval(_gtimer); })

function setGalleryContainer(cid) {
	_gcontainer = $('#'+cid);
}

function imageGallery (gallid) {

	if(_ganimating) {
		clearInterval(_gtimer); // stop scroll
		_ganimating = false;
	}
	if(_ggalleryup) {
		_gcontainer.html(''); // clear the container, needed for replacing the gallery on the one page
		_gimages = [];
		_ggalleryup = false;
	}
	
	// sets autoscroll from gallery container html attribute
	if(_gcontainer.attr('data-autoscroll') === "true") _gauto = true; 
	// sets inital offset from gallery container html attribute
	if(_gcontainer.attr('data-offset')) _goffset = parseInt(_gcontainer.attr('data-offset'));
	
	// Ajax call to get gallery list. Gallery ids should match folder name in images/.
	// See includes/evfunctions.php
	var reqid = new Date();
	reqid = reqid.getTime(); 
	
	$.getJSON(
		'includes/functions.php',
		'gallery=' + gallid + '&rid='+reqid,
		function(data) {
			_ggalleryup = true;
			
			if (_horiz == false) {
				buildImageGalleryV(data);
			} else {
				buildImageGallery(data);
			}
		}		
	);
}
	
function buildImageGallery(imagelist, width_itr) {
	
	var maxwidth = screen.availWidth; // maximum gallery container width to accomodate, based on screen width
	
	
	// Check width iterator variable, to accomodate recursive calls
	// Keeps building total width
	_gwidth = width_itr ? width_itr : 0;
	
	// Populate gallery from image list
	// Note that on each call it appends all images in the image list. This is to avoid image order getting mixed up
	for(var i=0; i < imagelist.length; i++) {
		var ni = new Image();
		ni.src = imagelist[i].source;
		ni.width = parseInt(imagelist[i].width);
		ni.height = parseInt(imagelist[i].height);
		
		_gimages.push($(ni));
		// Set initial position of image
		_gimages[_gimages.length - 1].css('left', _gwidth + _goffset);
		// Add width to toal width counter		
		_gwidth += parseInt(imagelist[i].width);
		
		// Add image to container width
		_gcontainer.append(_gimages[_gimages.length - 1]);
		// Set opacity to 0 until image loaded
		_gimages[_gimages.length - 1].animate({'opacity':0}, 0);
		// Fade in image on load
		_gimages[_gimages.length - 1].load(function(){ $(this).delay(100 + Math.random() * 200).animate({'opacity':1}, 400); });
	}
	
	// If first populate does not fill maximum width, and the images need to scroll, call this function again to avoid gaps
	if(_gwidth < maxwidth + parseInt(imagelist[0].width) && _gauto) {
		buildImageGallery(imagelist, _gwidth);
	}
	// If all is filled, and we want autoscroll, begin autoscroll
	else
	{
		if (_gauto) beginAutoScroll();
	}
	
}


function beginAutoScroll() {
	// Sets scroll animation interval
	_gtimer = setInterval(scrollImages, _interval);
	_ganimating = true;
}

function scrollImages() {
	for(var i=0; i < _gimages.length; i++) {
		// If image is too far left, stick to the rightmost position
		if(_gimages[i].offset().left <= -_gimages[i].width()) {
			_gimages[i].css('left', _gwidth - _gimages[i].width());
		}
		// And animate
		_gimages[i].css('left', _gimages[i].offset().left - _speed);
	}
}

function buildImageGalleryV(imagelist, width_itr) {
	
	var maxwidth = screen.availHeight; // maximum gallery container width to accomodate, based on screen width
	
	
	// Check width iterator variable, to accomodate recursive calls
	// Keeps building total width
	_gwidth = width_itr ? width_itr : 0;
	
	// Populate gallery from image list
	// Note that on each call it appends all images in the image list. This is to avoid image order getting mixed up
	for(var i=0; i < imagelist.length; i++) {
		var ni = new Image();
		ni.src = imagelist[i].source;
		ni.width = parseInt(imagelist[i].width);
		ni.height = parseInt(imagelist[i].height);
		
		_gimages.push($(ni));
		// Set initial position of image
		_gimages[_gimages.length - 1].css('top', _gwidth + _goffset);
		// Add width to toal width counter		
		_gwidth += parseInt(imagelist[i].height);
		
		// Add image to container width
		_gcontainer.append(_gimages[_gimages.length - 1]);
		// Set opacity to 0 until image loaded
		_gimages[_gimages.length - 1].animate({'opacity':0}, 0);
		// Fade in image on load
		_gimages[_gimages.length - 1].load(function(){ $(this).delay(100 + Math.random() * 200).animate({'opacity':1}, 400); });
	}
	
	// If first populate does not fill maximum width, and the images need to scroll, call this function again to avoid gaps
	if(_gwidth < maxwidth + parseInt(imagelist[0].height) && _gauto) {
		buildImageGalleryV(imagelist, _gwidth);
	}
	// If all is filled, and we want autoscroll, begin autoscroll
	else
	{
		if (_gauto) beginAutoScrollV();
	}
	
}


function beginAutoScrollV() {
	// Sets scroll animation interval
	_gtimer = setInterval(scrollImagesV, _interval);
	_ganimating = true;
}

function scrollImagesV() {
	for(var i=0; i < _gimages.length; i++) {
		// If image is too far left, stick to the rightmost position
		if(_gimages[i].offset().top <= -_gimages[i].height()) {
			_gimages[i].css('top', _gwidth - _gimages[i].height());
		}
		// And animate
		_gimages[i].css('top', _gimages[i].offset().top - _speed);
	}
}

function pausescroll() {
	clearInterval(_gtimer);
	_ispaused = true;
}

function resumescroll() {
	_gtimer = setInterval(scrollImagesV, _interval);
	_ispaused = false;
}

function togglescroll() {
	if (_ganimating) {
		if (_ispaused) {
			resumescroll();
		} else {
			pausescroll();
		}
		
		
	}
	// do nothing if false, this means autoscroll is off OR the array isn't fully loaded yet.
}