//************************************************************************************************************//
//												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_array[i];
	}
}

// Create an IMG table with absolute divs. Create a global array with img name variations for this to work.
function divTable(img_array,x_inc,y_inc,cols) {
	var html_string = "";
	var counter = 1;
	var x_increment = x_inc;
	var y_increment = y_inc
	var x_pos = 0;
	var y_pos = 0;
	
	for (i=0; i<img_array.length; i++) {
		
		html_string = html_string + ("<div id='" + img_array[i] + "' style='position:absolute;top:" + y_pos + "px;left:" + x_pos + "px;' class='div_table'><a class='slideshow' href='Media/almeria_" + img_array[i] + "_large.jpg' rel='group1'><img src='Media/almeria_" + img_array[i] + "_small.jpg' /></a></div>");
		
		if (counter <= cols - 1) {
			x_pos = x_pos + x_increment;
			counter++;
		}
		else {
			counter = 1;
			x_pos = 0;
			y_pos += y_increment;
		}
	}
	document.getElementById("img_container").innerHTML = html_string;	
}

// 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');
	}
}

// Sets up mouseout function for desk.
function initDesk() {
	var desk = jQuery('#desk img');
	var info_text = jQuery('#geartext');
	var duration = 1000
	if (!(isMobile(browser))) {
		desk.hover(function() {
			info_text.stop(true,true);
			info_text.css('opacity','1');
		},function() {
			info_text.delay(duration).fadeTo(duration,0);
		});
	}
}

// Generates html for belt images and hidden belt according to length/content of belt_array.
function initBelt() {
	var belt_string = "";
	var hidden_belt_string = "";
	
	// Build the string...
	for (i=0; i<(belt_array.length * 2); i++) {
		if (i >= belt_array.length) {
			var index = i - belt_array.length;
		}
		else {
			var index = i;
		}
		if (i < 9) {
			var img_num = "0" + (i + 1);
		}
		else {
			var img_num = i + 1;
		}
		belt_string += "<a href='#' name='belt_img" + img_num + "' onmouseover='stopBelt(this);' onmouseout='imageBelt();hideText(this);'><img src='" + MEDIA_URL + "images/albums/" + belt_array[index] + ".jpg' /></a>\n";
	
		hidden_belt_string += "<a href='#' name='belt_img" + img_num + "' onmouseover='stopBelt(this);' onmouseout='imageBelt();hideText(this);'><div class='hiddenbeltdiv'>lorem</div></a>\n";
	}
	
	// Apply the string to both belt and hiddenbelt divs...
	document.getElementById('belt').innerHTML = belt_string;
	document.getElementById('hiddenbelt').innerHTML = hidden_belt_string;
	
	// Call up and position all belt components.
	initBeltText();
	positionImages();
	
	// Run functions to initialize belt being draggable.
	makeBeltDraggable();
}


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

// Distributes all belt components to their appropriate places.
function positionImages() {
	var belt_images = document.getElementById("belt").getElementsByTagName("img");
	var belttext_images = document.getElementById("belttext").getElementsByTagName("div");
	var hidden_images = document.getElementById("hiddenbelt").getElementsByTagName("div");
	var hidden_links = document.getElementById("hiddenbelt").getElementsByTagName("a");
	var array_length = belt_array.length;
	for (i=0;i<belt_images.length;i++) {
		
		if (i >= (array_length)) {
			var array_index = i - array_length;
		}
		else {
			var array_index = i;
		}
		var href_index = belt_array[array_index];
		belt_images[i].style.position = "absolute";
		belt_images[i].style.top = "0px";
		belt_images[i].style.left = (i * 112) + "px";
		belttext_images[i].style.position = "absolute";
		belttext_images[i].style.top = "50px";
		belttext_images[i].style.left = (i * 112) + "px";
		hidden_images[i].style.position = "absolute";
		hidden_images[i].style.top = "0px";
		hidden_images[i].style.left = (i * 112) + "px";
		hidden_links[i].setAttribute("href",href_array[href_index]);
		hidden_links[i].setAttribute("target","itunes_store");
	}
	document.getElementById("belttext").style.top = "-20px";
}

// Inits and sets belt text div content. Uses data arrays to pull from for this...
function initBeltText() { 
	num_of_albums = belt_array.length;
	var belt_text_string = "";
	for (i=0; i<(num_of_albums * 2); i++) {
		if (i >= num_of_albums) {
			var index = i - num_of_albums;
		}
		else {
			var index = i;
		}
		if (i < 9) {
			var img_num = "0" + (i + 1);
		}
		else {
			var img_num = i + 1;
		}
		var this_artist = artist_array[belt_array[index]];
		var this_album = album_array[belt_array[index]];
		var this_label = label_array[belt_array[index]];
		var this_role = role_array[belt_array[index]];
		
		belt_text_string += "\n<div id='belttextitem" + img_num + "' class='belttextitem' style='left:0px;top:" + ((100 * i)) + "px;'><a href='#'><p><span class='belttextartist'>" + this_artist + "</span>&nbsp;/&nbsp;<span class='belttextalbum'>" + this_album + "</span><br /><span class='belttextrole'>" + this_role + "</span><br /><span class='belttextlabel'>" + this_label + "</span></p></a></div>"
	}
	document.getElementById("belttext").innerHTML = belt_text_string;
	document.getElementById("belttext").style.left = "0px";
	
	// Raise z-index above content whenever mouseover happens.
	/*
jQuery('#hiddenbelt').hover(function() {
		jQuery('#belttextcontainer').css('z-index','5');
	},function() {
		jQuery('#belttextcontainer').css('z-index','0')
	})
*/
}

// 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) {
	// Hide text bubbles.
	/*
var text_divs = document.getElementById("belttext").getElementsByTagName("div");
	for (i=0; i<text_divs.length; i++) {
		text_divs[i].style.display = "none";
	}
*/
	
	// 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 > 0) {
			new_pos = 0;
		}
		else if (new_pos < belt_start) {
			new_pos = belt_start;
		}
		
		// Adjust belt, belttext, and hiddenbelt appropriately.
		jQuery('#belt').css('left',new_pos);
		jQuery('#belttext').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 > 0) {
			belt_pos = 0;
		}
		
		// 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();hideText(this);');
			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 ------------------------------------------------------------<

// 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 end_pos = 0;
	var frame_time = 30;
	var frame_distance = 1;
	var belt = jQuery('#belt');
	var belttext = jQuery('#belttext');
	var hiddenbelt = jQuery('#hiddenbelt');
	belt_animation = window.setInterval( function() {
		belt.css('left',belt_pos + frame_distance);
		belttext.css('left',belt_pos + frame_distance);
		hiddenbelt.css('left',belt_pos + frame_distance);
		belt_pos = belt_pos + frame_distance;
		if (belt_pos >= end_pos) {
			clearInterval(belt_animation);
			imageReset();
			imageBelt();
		}
	},frame_time)
}

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

// Fires on mouseover...
function stopBelt(event) {
	window.clearInterval(belt_animation);
	displayText(event);
}

// Fade in/out the text info - have to do two as the belt is doubled so as to appear infinite.
function displayText(event) {
	var img_num = event.getAttribute('name').substring(8,10);
	var img_num2 = parseInt(img_num) + (parseInt(num_of_albums)/2);
	var this_item_id1 = "belttextitem" + img_num;
	var this_item_id2 = "belttextitem" + img_num2;
	/* alert(this_item_id1 + "; " + this_item_id2); */
	var element1 = document.getElementById(this_item_id1);
	var element2 = document.getElementById(this_item_id2);
	element1.style.display = "block";
/* 	jQuery('#belttextcontainer').css('z-index','5'); */

	/* element2.style.display = "block"; */
	
}

function hideText(event) {
	var img_num = event.getAttribute('name').substring(8,10);
	var img_num2 = parseInt(img_num) + (parseInt(num_of_albums)/2);
	var this_item_id1 = "belttextitem" + img_num;
	var this_item_id2 = "belttextitem" + img_num2;
	var element1 = document.getElementById(this_item_id1);
	var element2 = document.getElementById(this_item_id2);
	
	element1.style.display = "none";
/* 	jQuery('#belttextcontainer').css('z-index','0'); */
	/* element2.style.display = "none"; */
}

//************************************************************************************************************//
//												NAV SECTION
//************************************************************************************************************//

// Main change frame function.
function changePage(evt) {
	var name = evt.getAttribute('name');
	var target_url = '/inner/' + name + '/'; 
	// Change the actual frame location.
	window.frames['contentframe'].location = target_url;
	// Set new ON nav image.
	var old_img = jQuery('#navitem' + page + ' a img').first();
	var new_img = jQuery('#navitem' + name + ' a img').first();
	var old_img_url = MEDIA_URL + 'images/nav/' + page + '_off.png';
	var new_img_url = MEDIA_URL + 'images/nav/' + name + '_on.png';
	old_img.attr('src',old_img_url).attr('current','no');
	new_img.attr('src',new_img_url).attr('current','yes');
	// If page is studio, extend the height, else reduce it.
	if (name == 'studio') {
		jQuery('#content').height(507);
		jQuery('#main').height(764);
	}
	else {
		jQuery('#content').height(412);
		jQuery('#main').height(670);
	}
	
	// Set global page variable.
	page = name;	
}


//************************************************************************************************************//
//												GEAR SECTION
//************************************************************************************************************//
var gear_gk = 0;

// Fades in studio from iframe link.
function showStudio() {
	var duration = 1000;
	var studio = jQuery('#studio',window.parent.document);
	var lights = jQuery('#lights',window.parent.document);
	lights.css('display','block').fadeTo(duration,0.8);
	studio.css('display','block').delay(duration).fadeTo(duration/2,1);
}

// Hides studio from main frame.
function hideStudio() {
	var duration = 150;
	var studio = jQuery('#studio');
	var lights = jQuery('#lights');
	lights.fadeTo(duration,0).delay(duration);
	studio.fadeTo(duration,0).delay(duration);
	window.setTimeout(function() {
		lights.css('display','none');
		studio.css('display','none');
	},duration);
}

function showGearInfo(event) {
	var gear_num = parseInt(event.getAttribute('arraynum')) - 1;
	var this_title = gear_array[gear_num];
	var gear_div = jQuery('#geartext');
	
	gear_div.stop(true,true);
	gear_div.html(this_title);
}

function hideGearInfo(event) {
	var gear_num = parseInt(event.getAttribute('arraynum')) - 1;
	var gear_div = jQuery('#geartext');
	
	gear_div.stop(true,true);
	gear_div.html('');
}