// index page tools for product focus website, August 2010, Roger Lewis, www.rogerlewis.fr

// much could be done to improve code reuse so that these two elements share code -
// a work in progress as I push my procedural instincts into best (OOP) practises

$(document).ready(function() {
	init_all();
});

function init_all() {
	image_fader();
	div_slider();
};

// dissolve transition on images contained in div element
// div element must have a class (id is irrelevant - though the code could be modified)
//
// can change the number of images in feature
// can change filepath for images - images/index_left()n.jpg in this case
// can change speed of dissolve - in seconds
// can change containing element for images - 'div.outdentedleft' in this case
//
// NOTE dissolve can only be applied to images contained in a div and its class (no other container 
// and you must refer to its class and not its id)

function image_fader() {	

	// set number of images to be used and
	// set image src (file path plus file name prefix plus filename suffix)
	var image_fader = {
		"number": 8, // min 3, max 99
		"speed": 10, // number of seconds
		"file_path": "images/", // filepath
		"name_prefix": "index_left", // non-dynamic part of file name
		"suffix": ".jpg", // file type suffix
		"element": "div.outdented_left", // for the moment, this must always be div.something
		"swap_element": "div.outdented_left_changer"
	};
	
	if(!image_fader.speed) {
		image_fader.speed = 1;
	};
	image_fader.speed *= 1000;
	
	// start sequence
	image_fader.sequence = imageFaderSequence(image_fader);
};

// sequence of functions for loop
function imageFaderSequence(image_fader) {
	// check to see if image numbers are in range - if not stop otherwise run sequence
	if ((image_fader.number < 3) || (image_fader.number > 99)) {
		return;
	} else {
		var now_showing = nowShowing(image_fader);
		var next_number = nextNumber(image_fader.number, now_showing);
		var img_src = imageFaderSrc(image_fader.file_path, image_fader.name_prefix, image_fader.suffix, next_number);
		var new_image = newImage(img_src, image_fader.element, image_fader.swap_element);
		var image_animate = imageFaderAnimate(image_fader);
	}
}

// return random number
function randomise(n) {
		var rnd = Math.ceil(Math.random() * n);
		return rnd;
}

// find out which image is currently displayed and store name
function nowShowing(image_fader) {
	var n = image_fader.number;
	var el = image_fader.element + " img";
	if ( n < 10 ) {
		image_fader.now_showing = ($(el).attr('src')).slice(17, 18);
	} else {
		image_fader.now_showing = ($(el).attr('src')).slice(17, 19);
	};
	return image_fader.now_showing;
}

// clean up dom after animation completes
function cleanUp(image_fader) {
	$(image_fader.element).detach();
	var addclass = (image_fader.element).slice(4);
	var removeclass = (image_fader.swap_element).slice(4);
	$(image_fader.swap_element).addClass(addclass).removeClass(removeclass);
}

// get image src
function imageFaderSrc(fpath, prfix, sfix, index) {
	var image_src = fpath + prfix + index + sfix;
	return image_src;
}

// select a new image to replace the one on display
function nextNumber(n, s) {	
	var nextN = randomise(n);
	if ( image_fader.next_number === s ) {
		image_fader.next_number = randomise(image_fader.number);
	};
	return nextN;
}

// load new image into div.outdented_left_changer and insert
function newImage(i_src, el, swap_el) {
	var swapper = (swap_el).slice(4);
	$(el).after('<div class=' + swapper + '></div>');
	var newImage = $('<img />').attr('src', i_src);
	$(swap_el).append(newImage);
	var swap_image = swap_el + ' img';
	$(swap_image).addClass('outdented'); // add supplementary classes here
}

// animate and clean up
function imageFaderAnimate(image_fader) {
	var swap_image = image_fader.swap_element + ' img';
	// set opacity of new image to 0
	$(swap_image).css('opacity', '0');
	
	// make div.outdented_left_changer display block
	$(image_fader.swap_element).css('display', 'block');
	
	// fade up opacity of image and remove div.outdented_left
	// add outdented_left class to remaining div and remove outdented_left_changer class
	$(swap_image).animate({
		opacity: 1
	}, image_fader.speed, function() {
		cleanUp(image_fader);
		image_fader.repeat = repeatSequence(image_fader);
	});
}

// repeat sequence (could add a limit to number of repeats here)
function repeatSequence(image_fader) {
	image_fader.repeat = imageFaderSequence(image_fader);
}

// slide transition on div elements
// div element must have a class (id is irrelevant - though the code could be modified)
// div and its replacement need to be absolute positioned
//
// can change number of divs in cycle 
// can change filepath for images - images/index_left()n.jpg in this case
// can change speed of dissolve - in seconds
// can change containing element for images - 'div.outdentedleft' in this case
//
// NOTE the animation is top down as it relies on jquery's slideDown - this
// can be rewritten to be more generic at some point so that it can go from left to right
// and should also be able to be modded to allow for whole sliding of divs

function div_slider() {

	// set data structure
	var div_slider = {
		"number": 4,
		"duration": 4,
		"speed": 1,
		"file_path": "",
		"file_prefix": "keynote",
		"file_suffix": ".php",
		"container_element": "div.keynote",
		"new_container": "div.newnote",
		"replace_element": "div.slider",
		"direction": "left_to_right"
	};

	div_slider.speed *= 1000;
	div_slider.duration *= 1000;
	
	// run sequence
	div_slider.slider_animate = sliderAnimate(div_slider);
}

// sequence of functions for loop
function sliderAnimate(div_slider) {
	div_slider.showing = divName(div_slider);
	div_slider.next = nextDiv(div_slider);
	div_slider.src = setSrc(div_slider);
	div_slider.loader = loadContent(div_slider);
	div_slider.do_slider = doSlide(div_slider);
}

// get name of div currently displayed
function divName(div_slider) {
	var slide_number = $(div_slider.replace_element).attr('id');
	div_slider.now_showing = (slide_number).slice(7);
	return div_slider.now_showing;
}

// set name of next div to display
function nextDiv(div_slider) {
	if (div_slider.now_showing >= div_slider.number) {
		div_slider.now_showing = 0;
	}
	div_slider.now_showing++;
	return div_slider.now_showing;
}

function setSrc(div_slider) {
	div_slider.src = div_slider.file_path + div_slider.file_prefix + div_slider.now_showing + div_slider.file_suffix;
	return div_slider.src
}

// load new container div
function loadContent(div_slider) {
	$(div_slider.container_element).after('<div class="' + ((div_slider.new_container).slice(4)) + '"></div>');

	// load content into container div
	$(div_slider.new_container).load(div_slider.src);
}

// slide div into position
function doSlide(div_slider) {
	div_slider.animate = setTimeout(function() {
		$(div_slider.new_container).slideDown(div_slider.speed, function() {
			$(div_slider.container_element).detach();
			var addclass = (div_slider.container_element).slice(4);
			var removeclass = (div_slider.new_container).slice(4);
			$(div_slider.new_container).addClass(addclass).removeClass(removeclass);
			slideRepeat(div_slider);
		});
	}, div_slider.duration);
//	set ul.keynote_link background color using div_slider.showing value
	var slider_link = "#keynote" + div_slider.showing + "_link";
	var slider_link_previous = "#keynote" + (div_slider.showing - 1) + "_link";
	if(slider_link_previous === '#keynote0_link') {
		slider_link_previous = '#keynote4_link';
	};
	$(slider_link).css('background', '#366');
	$(slider_link_previous).css('background', '#89A6A6').hover(
	function() {
		$(this).css('background', '#568585');
	},
	function() {
		$(this).css('background', '#89A6A6');
	});

}

// on animation complete start again
function slideRepeat(div_slider) {
	div_slider.slider_animate = sliderAnimate(div_slider);
}