//************************************************************************************************************//
//												CONFIG/GLOBALS
//************************************************************************************************************//



//************************************************************************************************************//
//												THE BASICS
//************************************************************************************************************//

// Sometimes I still like this instead of jQuery...
function getArrayByClass(tag_name,requested_class) {
	var dest_array = new Array();
	var all_elements_w_class = document.getElementsByTagName(tag_name);
	var obj_counter = 0;
	for (i=0; i<all_elements_w_class.length; i++) {
		var this_elements_class = all_elements_w_class[i].getAttribute("class");
		if (this_elements_class == requested_class) {
			dest_array[obj_counter] = all_elements_w_class[i];
			obj_counter++;
		}
	}
	return dest_array;
}

// Easy jQuery driven rollover init script. Not mine...
function initRollovers() {
	jQuery('.rollover').hover(function() {
        var currentImg = $(this).attr('src');
        
        // Adding an IF statement so current page image is not affected by rollover..
        if (currentImg.indexOf('_on') == -1) {
	        $(this).attr('src', $(this).attr('hover'));
	        $(this).attr('hover', currentImg);
	        $(this).attr('current','no');
	    }
	    // Add a CURRENT attribute so mouseouts don't remove image of current page.
	    else {
	    	$(this).attr('current','yes');
	    }
    }, function() {
    	var current = $(this).attr('current');
        if (current != 'yes') {
	        var currentImg = $(this).attr('src');
	        $(this).attr('src', $(this).attr('hover'));
	        $(this).attr('hover', currentImg);
	    }
    });
}

// Browser finder - could add on to this over time...
function getBrowser() {
	var browser;
	
	// Do mobile matching first.
	if (navigator.userAgent.match(/iphone/i)) {
		browser = "iphone";
	}
	else if (navigator.userAgent.match(/ipad/i)) {
		browser = "ipad";
	}
	else if (navigator.userAgent.match(/ipod/i)) {
		browser = "ipod";
	}
	else {
		if (navigator.userAgent.match(/chrome/i)) {
			browser = "chrome";
		}
		else if (navigator.userAgent.match(/safari/i) && !(navigator.userAgent.match(/chrome/))) {
			browser = "safari";
		}
		else if (navigator.userAgent.match(/firefox/i)) {
			browser = "firefox";
		}
		else if (navigator.userAgent.match(/opera/i)) {
			browser = "opera";
		}
		else if (navigator.userAgent.match(/MSIE/i)) {
			browser = "ie";
		}
	}
	return browser;
}

function isMobile(browser) {
	if (browser == 'iphone' || browser == 'ipad' || browser == 'ipod') {
		return 1;
	}
	else {
		return 0;
	}
}

// Returns exponential sloping values instead of linear - use w/ setInterval().
function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) { 
    var delta = maxValue - minValue; 
    var stepp = minValue+(Math.pow(((1 / totalSteps) * actualStep), powr) * delta); 
    return Math.ceil(stepp) 
}

// Preload image script...
function preloadImages() {
	var image_array = new Array();
	for (i=0; i<preload_array.length; i++) {
		image_array[i] = new Image;
		image_array[i].src = PRELOAD_BASE_PATH + preload_array[i];
	}
}

// Basic non jQuery fade functions. Should probably use jQuery for IE compatibility...
function fadeInImage(raw_element,steps,duration) {
	for (i=0.0; i<=1.1 ; i=i+(1/steps)) {
		var element = raw_element.toString();
		setTimeout("document.getElementById('" + element + "').style.opacity = 0.0 +" + i + ";",i * duration);
		/* setTimeout("document.getElementById('" + element + "').filters.alpha.opacity = 0.0 +" + i + ";",i * duration); */
	};
}
			
function fadeOutImage(element,steps,duration) {
	for (i=0.0; i<=1.0 ; i=i+(1/steps)) {
		setTimeout("document.getElementById('" + element + "').style.opacity = 1.0 -" + i + ";",i * duration);
		/* setTimeout("document.getElementById('" + element + "').filters.alpha.opacity = 1.0 -" + i + ";",i * duration); */
	};
}

// jQuery based Coda-style rising fade-out.
function codaExit(id,anim_time) {
	jQuery("#" + id).animate({'top' : '-=10px','opacity' : '0.0'},anim_time);
}

//************************************************************************************************************//
//												INITIALIZATION SECTION
//************************************************************************************************************//


// Browser fixes.
function fixBrowserStuff() {
	var browser = getBrowser();
	if (browser == 'safari') {
		jQuery('.bookitem p').css('margin-top','9px');
	}
}


// Generates html for belt images and hidden belt according to length/content of belt_array.
function initBelt() {
	belt_width = getBeltWidth();
	belt_end = -(belt_width/2); // Belt end should be negative if belt moves left, positve if belt moves right.
	belt_start = 0;
	var belt = jQuery('#belt');
	var hidden_belt = jQuery('#hiddenbelt');
	// Set belt widths based on belt end.
	belt.width(belt_width);
	hidden_belt.width(belt_width);
	// Fade in the belt images.
	showBelt();
	// Run functions to initialize belt being draggable.
	makeBeltDraggable();
	// Initialize and fade in shuttle buttons.
	initBeltShuttling();
	// Start up the belt animation.
	imageReset();
	imageBelt();
	// Make belt accessible to mouse events.
	jQuery('#beltcover').css('display','none');
	// Fade in shuttle buttons.
	jQuery('.beltshuttle').delay(1500).fadeTo(750,1);
}

// Sets up fancybox effect on any href with designated class.
function setupZoom() {
	jQuery("a.slideshow").fancybox();
}


//************************************************************************************************************//
//												ALBUM BELT SECTION
//************************************************************************************************************//

// Initializes and fades in belt shuttle buttons.
function initBeltShuttling() {
	var shuttles = jQuery('.beltshuttle');
	var left_shuttle = jQuery('#beltshuttleleft');
	var right_shuttle = jQuery('#beltshuttleright');
	var belt = jQuery('#belt');
	var hidden_belt = jQuery('#hiddenbelt');
	
	// Make sure belt stays motionless when moused over the buttons:
	shuttles.mouseover(function(e) {
		stopBelt(e);
	});
	// If the device is mobile or an ipad, attach shuttling to click events (mousedown/mouseup won't register):
	if (is_mobile || browser == 'ipad') {
		left_shuttle.click(function() {
			shuttleImageBelt('left','discreet');
		});
		right_shuttle.click(function() {
			shuttleImageBelt('right','discreet');
		});	
	}
	// Else the device is a computer, so attach shuttling to mousedown and mouseup events:
	else {
		left_shuttle.mousedown(function() {
			shuttleImageBelt('left','continuous');
		});
		right_shuttle.mousedown(function() {
			shuttleImageBelt('right','continuous');
		});
		left_shuttle.mouseup(function(e) {
			stopBelt(e);
			jQuery('#beltshuttleleft').removeClass('beltshuttleactive');
		});
		right_shuttle.mouseup(function(e) {
			stopBelt(e);
			jQuery('#beltshuttleright').removeClass('beltshuttleactive');
		});	
	}
}


// BELT DRAGGING STUFF ------------------------------------------------------->

// Global VAR set on mousedown event - function works by comparing all subsequent movement to this start point and applying the difference to the overall BELT POSITION.

var drag_start;
var drag_gk = 0;

// jQuery event handler init...
function makeBeltDraggable() {
	jQuery('#hiddenbelt a').mousedown(function(e) {
		e.preventDefault();
		startDrag(e);
	});
	jQuery(document).mouseup(function(e) {
		stopDrag(e);
	});
}

function startDrag(evt) {	
	// Set the start pos to mouse pageY event.
	drag_start = evt.pageX;
	// Do it!
	drag();
}

function drag() {
	jQuery(document).mousemove(function(event) {
	
		drag_gk = 1;
	
		// Turn off event functions to avoid conflict.
		var links = document.getElementById("hiddenbelt").getElementsByTagName("a");
		for (i=0; i<links.length; i++) {
			links[i].setAttribute('onclick','return false;');
			links[i].setAttribute('onmouseout','return false;');
			links[i].setAttribute('onmouseover','return false;');
		}
	
		// Generate amount of movement VAR...
		var offset = event.pageX - drag_start;
		var new_pos = belt_pos + offset;
		if (new_pos > belt_start) {
			new_pos = belt_start;
		}
		else if (new_pos < belt_end) {
			new_pos = belt_end;
		}
		
		// Adjust belt, belttext, and hiddenbelt appropriately.
		jQuery('#belt').css('left',new_pos);
		jQuery('#hiddenbelt').css('left',new_pos);
	})
}

function stopDrag(evt) {
	if (drag_gk == 1) {
		// Remove the onmousemove event.
		jQuery(document).unbind('mousemove');
		
		// Generate final amount of movement...
		var offset = evt.pageX - drag_start;
		belt_pos = belt_pos + offset;
		
		// Enforce movement constraints on dragging.
		if (belt_pos > belt_start) {
			belt_pos = belt_start;
		}
		else if (belt_pos < belt_end) {
			belt_pos = belt_end;
		}
		
		// Reinstate event functions(main belt animation stuff).
		var links = document.getElementById("hiddenbelt").getElementsByTagName("a");
		for (i=0; i<links.length; i++) {
			links[i].setAttribute('onmouseout','imageBelt();');
			links[i].setAttribute('onmouseover','stopBelt(this);');
		}
		
		// Reinstate link functionality...slightly after mouseup event.
		window.setTimeout(function() {
			for (i=0; i<links.length; i++) {
				links[i].removeAttribute('onclick');
			}
		},150)
		
		drag_gk = 0;
	}
	else {
		jQuery(document).unbind('mousemove');
	}
}


// END BELT DRAGGING ------------------------------------------------------------<

// Fades in the belt - used after images load right now.
function showBelt() {
	var loading = jQuery('#beltloading');
	var belt = jQuery('#belt');
	loading.fadeTo(300,0);
	belt.fadeTo(1300,1);
}

// Gets the combined width of all photos in a given gallery.
function getBeltWidth() {
	var belt_width = 0;
	var photos = jQuery('#belt a img');
	photos.each( function() {
		var photo = jQuery(this);
		belt_width += photo.width() + 1; // +1 for the border.
	});
	
	return belt_width;
}

// Actual belt animation using setInterval().
function imageBelt() {

	// belt_pos VAR must be set GLOBALLY in INITALL() so that it doesn't reset with each imageBelt function call.
	var frame_time = 10;
	var frame_distance = 1;
	var belt = jQuery('#belt');
	var hiddenbelt = jQuery('#hiddenbelt');
	// Do it.
	belt_animation = window.setInterval( function() {
		belt.css('left',belt_pos - frame_distance);
		hiddenbelt.css('left',belt_pos - frame_distance);
		belt_pos = belt_pos - frame_distance;
		if (belt_pos <= belt_end) {
			clearInterval(belt_animation);
			imageReset();
			imageBelt();
		}
	},frame_time)
}

// Fast belt animation called when shuttle buttons are pressed.
function shuttleImageBelt(direction,type) {
	var belt = jQuery('#belt');
	var hiddenbelt = jQuery('#hiddenbelt');
	var belt_cover = jQuery('#beltcover');
	
	// Show active button image for duration of animation:
	jQuery('#beltshuttle' + direction).addClass('beltshuttleactive');

	// Perform one time discreet animation:
	if (type == 'discreet') {
		// Make sure shuttle buttons can't be clicked during animation:
		belt_cover.css('display','block');
	
		// Set animation variables:
		if (is_mobile) {
			var frame_time = 8;
			var frame_distance = 60;
			var total_distance = 1001; 
			var covered_distance = 0;
		}
		else {
			switch (browser) {
				case 'safari':
					var frame_time = 5;
					var frame_distance = 60;
					break;
				case 'firefox':
					var frame_time = 10;
					var frame_distance = 130;
					break;
				case 'chrome':
					var frame_time = 8;
					var frame_distance = 80;
					break;
				default:
					var frame_time = 8;
					var frame_distance = 80;
			}
			var total_distance = 1001; 
			var covered_distance = 0;
		}
		// Do it.
		belt_animation = window.setInterval( function() {
			if (direction == 'right') {
				belt.css('left',belt_pos - frame_distance);
				hiddenbelt.css('left',belt_pos - frame_distance);
				belt_pos = belt_pos - frame_distance;
				covered_distance -= frame_distance;
		
				if (belt_pos <= belt_end) {
					loopBelt(direction,type,belt_animation);
				}
				
				if (covered_distance < -(total_distance)) {
					stopBelt(1);
					jQuery('#beltshuttle' + direction).removeClass('beltshuttleactive');
				}
			}
			else if (direction == 'left') {
				belt.css('left',belt_pos + frame_distance);
				hiddenbelt.css('left',belt_pos + frame_distance);
				belt_pos = belt_pos + frame_distance;
				covered_distance += frame_distance;
				
				if (belt_pos >= belt_start) {
					loopBelt(direction,type,belt_animation);
				}
				
				if (covered_distance > total_distance) {
					stopBelt(1);
					jQuery('#beltshuttle' + direction).removeClass('beltshuttleactive');
				}
			}
		},frame_time)
	}
	// Perform continuous animation:
	else {
		// Set animation variables:
		var frame_time = 5;
		var frame_distance = 25;
		// Do it.
		belt_animation = window.setInterval( function() {
			if (direction == 'right') {
				belt.css('left',belt_pos - frame_distance);
				hiddenbelt.css('left',belt_pos - frame_distance);
				belt_pos = belt_pos - frame_distance;
				if (belt_pos <= belt_end) {
					loopBelt(direction,type,belt_animation);
				}
			}
			else if (direction == 'left') {
				belt.css('left',belt_pos + frame_distance);
				hiddenbelt.css('left',belt_pos + frame_distance);
				belt_pos = belt_pos + frame_distance;
				if (belt_pos >= belt_start) {
					loopBelt(direction,type,belt_animation);
				}
			}
		},frame_time)
	}
}

// Performs all necessary functions to loop belt and make the belt images appear infinite.
function loopBelt(direction,type,belt_animation) {
	clearInterval(belt_animation);
	if (direction == 'right') {
		imageReset();
	}
	else if (direction == 'left') {
		belt_pos = belt_end;
	}
	shuttleImageBelt(direction,type);
}

// Loops the belt.
function imageReset() {
	/* alert('pre: ' + belt_pos); */
	belt_pos = belt_start;
	/* alert('post: ' + belt_pos); */
}

// Fires on mouseover...
function stopBelt(event) {
	belt_init_state = 0;
	window.clearInterval(belt_animation);
	jQuery('#beltcover').css('display','none');
}