/**
 * @author Paul Jones
 */


/*
 * 
 * Issues that need to be resolved:
 * 
 * 
 * when clicking on main links really fast mountains do no lower correctly - instead of returning 
 * 		the "last mountain" animation to original pos, do it for all mountains on click.
 * 
 * 
 * change highslide expander to transparent if possible
 * 
 * 
 * */

// User controlled
var SLIDER_SPEED = 1; // speed of slider increase for faster speed


// irregular
var wrapperCellCount = 0, activityCount = 0;


// Constants
var MAX_WRAPPER_CELLS = 3, 
	WRAPPER_CELL_HOLDS = 20, 
	ACTIVITY_WIDTH = 70, 
	WRAPPER_WIDTH = ACTIVITY_WIDTH * (WRAPPER_CELL_HOLDS / 2), 
	SLIDER_WIDTH = WRAPPER_WIDTH * MAX_WRAPPER_CELLS;


var lastActivityOpened;



/* ********************   Highslide Setup   *********************/

hs.graphicsDir = 'assets/highslide/graphics/';
//hs.align = 'top';
hs.transitions = ['expand', 'crossfade'];
//hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.showCredits = false;
hs.captionOverlay.position = 'top right';
hs.useBox = true;
hs.width = 350;
hs.height = 215;
//hs.dimmingOpacity = 0.75;


/* ----------------------   End Highslide Setup   -----------------------*/

function loadActivities() {
	
	var _divInfo = '';
	
	
	for (i = 0; i < MAX_WRAPPER_CELLS; i++) _divInfo += loadSliderData();
		
	var sliderDiv = $('<div id="slider" style="left:0px;width:' + SLIDER_WIDTH + 'px" />').append(_divInfo);
	
	$('#activities').append(sliderDiv);
	
	
	
	moveSlider(sliderDiv, '-=');
	
	
	/* This binds the hover and click events for the slider*/
	
	$('#activities, #flashCounter').mouseenter(function() {
		$(sliderDiv).stop(true);
		$(sliderDiv).find('.thumb').unbind('click.enlargePopup')
		.bind('click.enlargePopup', function() {
			$('#activities, #flashCounter').unbind('mouseleave.startSlider');
			
			
			if (lastActivityOpened) {
				lastActivityOpened.unbind('closeBox').bind('closeBox', function(){
					return hs.close(this);
				}).trigger('closeBox');
			}
			
			
			$('.close a').unbind('click.activateSlider')
			.bind('click.activateSlider',function() {
				moveSlider(sliderDiv, '-=');
				
				$('#activities, #flashCounter').bind('mouseleave.startSlider', function() {
					moveSlider(sliderDiv, '-=');
				});
			});
			
			lastActivityOpened = $('.close a');
		});
	}).bind('mouseleave.startSlider', function() {
		moveSlider(sliderDiv, '-=');
	});
	
}

function moveSlider(obj, direction){
		
        var _wrapperWidth = WRAPPER_WIDTH;
        
        var sliderXpos = $(obj).position().left;
        // Number of pixels to move slider	
        var slideAmount = (direction == '-=') ? (_wrapperWidth) + sliderXpos : -sliderXpos;
        var slideTime = (5 / SLIDER_SPEED) * (10 * slideAmount); // How long it takes to get from one point to the next in milliseconds : must be a Non-decimal Number
        $(obj).animate({
            left: direction + slideAmount + 'px'
        }, slideTime, 'linear', function() {
			
			var _wrapper = $('.wrapper');
			
			$(_wrapper[0]).remove();
			$(this).css({'left': '0px'}).append(loadSliderData());
			
			moveSlider(this, direction);
			
		});
        
		// this should never occur, but I put this here just incase
		if (sliderXpos < -700) {
			$(this).stop(true).css({'left': '0px'}).append(loadSliderData());
			moveSlider(this, direction);
		}
       
    }


function loadSliderData() {
	
	var colors = ['#0184f8', '#2ba3a4', '#25c9d3', '#5cc743', '#018560', '#42c7ac'];
	
	
	wrapperCellCount = (wrapperCellCount < MAX_WRAPPER_CELLS) ? wrapperCellCount : 0;
	
	var _divInfo = '<div id="wrapper_' + wrapperCellCount + '" class="wrapper" style="width:' + WRAPPER_WIDTH + 'px">';
	
	for (n = 0; n < WRAPPER_CELL_HOLDS; n++) {
		
		var _number = activities[activityCount]['number'];
		var _image = activities[activityCount]['picture'];
		var _divId = 'activity_' + activities[activityCount]['number'];
		var _highslideContent = 'highslide-html_' + activities[activityCount]['number'];
		
		var _imgDiv = '';
		var _contentClass = '';

		var _randColorNum = Math.floor(colors.length * Math.random());
		_divInfo += '<div id="'+_divId+'" class="highslide-gallery activity" '
					 + 'style="background-color:' + colors[_randColorNum] + ';">';
		
		
		if (_image != 'null') {
			_divInfo += '<a class="highslide thumb" href="#" ' + 'style="background:url(' + _image + ');" ' +
			'onclick="return hs.htmlExpand(this, {targetY: \'' + _divId + ' -200px\', targetX: null, contentId: \'' +
			_highslideContent + '\'});"></a>';
			
			_imgDiv = '<div class="image"><img src="'+ _image + '" /></div>';
			_contentClass = 'contentWithPic';
		}
		else {
			_divInfo += '<a class="highslide thumb" href="#" ' + 'onclick="return hs.htmlExpand(this, {targetY: \'' +
			_divId + ' -200px\', targetX: null, contentId: \'' +
			_highslideContent + '\'});"><span>' + _number + '</span></a>';
			
			_contentClass = 'contentNoPic';
		}
		
		
		_divInfo += '<div id="'+_highslideContent+'" class="highslide-html-content" style="background-color:'+ colors[_randColorNum] + ';">'
				 + '<div class="highslide-body" ><div class="close"><a href="#" onclick="return hs.close(this)">x</a></div>'
				 + _imgDiv+'<div class="number">'+_number+'</div><div class="'+_contentClass+'"><div class="title">'+ activities[activityCount]['title'] 
				 + '</div><div class="info">'+ activities[activityCount]['article'] +'</div></div></div>';
		
		_divInfo += '</div></div>';
		
		activityCount++;
		
		if (activityCount >= activities.length) 
			activityCount = 0;
	}
	
	
	
	_divInfo += '</div>';
		
	wrapperCellCount++;
	
	return _divInfo;
}