/* Rentokil-Initial Timeline
** Purpose: To link a carousel and a clickable SVG/VML timeline
**
** Dependencies:
**  - /static/j/raphael-1.5.2.min.js (raphaeljs.com)
**  - /static/j/jquery-1.2.6.js (jquery.com)
*/
var carousel_index = 0;
var timeline, timeline_items, background;
var scrolling_available = false;
var interval_hook = {};
var timeline_animation_speed = 150;
var carousel_count = 0;

var timeline_inactive_colour = '#444';
var timeline_active_colour = '#035AAA';

var timeline_debug = [];
// check for firebug console avilability
if( 'undefined' === typeof console )
{
	// No console so create a dummy object so we don't get errors when trying to log events.
	console = {
		"log":function(){},
		"info":function(){},
		"warn":function(){},
		"error":function(){}
	}
}

function show_timeline_item(index) {
	// This function ties the carousel and timeline together

	// Handle carousel
	var item_name_old = "#carousel_item_" + carousel_index;			
	var item_name_new = "#carousel_item_" + index;			

	if ( carousel_index != index) {
	// Timeline
		if(false === isIE6) {
			timeline_items[index].animate({fill: timeline_active_colour}, timeline_animation_speed);
			timeline_items[carousel_index].animate({fill: timeline_inactive_colour}, timeline_animation_speed);
		} else {
			timeline_items[index].show();
			timeline_items[carousel_index].hide();
		}
		$(item_name_old).fadeOut(timeline_animation_speed, function() {$(item_name_new).fadeIn(timeline_animation_speed);});
	} else {
		$(item_name_new).fadeIn(timeline_animation_speed); 
	}

	// Housekeeping
	carousel_index = index;
	timeline.safari();			
}

function scroll_timeline(offset) {
	if (scrolling_available) {
		var index_next = carousel_index + offset;
		var item_name = "carousel_item_" + index_next;

		if ( document.getElementById(item_name) ) {
			show_timeline_item (index_next);
		}
		else {
			if (index_next > carousel_index ) {
				show_timeline_item (0);
			}
			else {
				show_timeline_item (carousel_count-1);
			}
		}

		//  Disable the scroll buttons while things are fading in and out.
		scrolling_available = false;
		setTimeout(function () {scrolling_available = true;}, timeline_animation_speed*2.33);
	}
}

function init_timeline() {

	if ( 0 < $("#timeline").length ) {
		var start = new Date();
		var timeline_width = 896;
		var timeline_height = 64;
		var timeline_item_width = 7;
		var timeline_item_height = 24;
		var timeline_endcap_width = 15;

		$(".carousel_item").hide();
		$("#timeline").css({'display':'block'});

		$(".prev_button img").hide().css('visibility', 'hidden');
		$(".next_button img").hide().css('visibility', 'hidden');
		$(".prev_button").hide().css('visibility', 'hidden');
		$(".next_button").hide().css('visibility', 'hidden');

		$("#prev_button").css('display', 'block');
		$("#next_button").css('display', 'block');

		// Set up Raphael Canvas
		timeline = Raphael('timeline', 900, timeline_height);

		// Draw the clickable items on the timeline
		carousel_count = $(".carousel_item").length;

		var n = 0,
			year = 0,
			x = 0,
			y = timeline_height - timeline_item_height-1;

		var text_x_offset = 15,
			text_y_offset = -20,
			min_gap = 25,
			bg_text_attr = {"rotation": "310", "font-size": "18", fill:"#eee", "font-weight": "bold", "font-family":"Arial, sans-serif"},
			text_attr = {"rotation": "310", "font-size": "17", fill:"#aaa", "font-family":"Arial, sans-serif"};
			box_attr = {"rotation": "310", fill:"#aaa", opacity:0};


		var bg_attr = {gradient: "270-#eee-#fff:33-#aaa", stroke:"#eee", "stroke-width":"1px"},
			t, box, r; // holds text objects;
		var prev_x = 0-min_gap,
			bevel1_src = [],
			bevel2_src = [];

		// Draw the timeline background
		background = timeline.path(
			"M" + (x+timeline_endcap_width) + "," + y +
			"L" + (timeline_width-timeline_endcap_width) + "," + y +
			"C" + timeline_width + "," + y + " " + timeline_width + "," + (y +timeline_item_height) + " " + (timeline_width-timeline_endcap_width) + "," + (y +timeline_item_height) +
			"L" + timeline_endcap_width + "," + (y +timeline_item_height) +
			"C0," + (y +timeline_item_height) + " 0," + y + " " + timeline_endcap_width + "," + y
			).attr(bg_attr);
		
		timeline_items = new Array(carousel_count);
		n = 0;

		var setup_end = new Date();
		timeline_debug.push('<div>Timeline setup: ' + (setup_end - start) + 'ms.</div>');
		
		var timeline_draw_start = new Date();

		var years = $(".carousel_item_right span").text();
		
		for( var n = 0, m = $(".carousel_item_right span").length; n<m; n+=1) {
			var item_start = new Date();
			var year = years.substr(n*4, 4);
			// Use double compliment operators to truncate towards zero (~~)
			x = ~~((timeline_width * (parseInt(year)-1900)) / 120);
			
			// Enforce a nice gap between items so they dont form aggregate blue blocks and text doesn't overlap.
			if ((x-min_gap)<prev_x) { x = prev_x + min_gap; }
			timeline_items[n] = timeline.rect(x, y+1, timeline_item_width-1, timeline_item_height-4);
			
			bevel1_src.push("M" + x + "," + (y + timeline_item_height - 3) + " L" + x + "," + (y + 1) + " L" + (x + timeline_item_width -1) + "," + (y+1));
			bevel2_src.push("M" + (x + timeline_item_width) + "," + (y + 1) + " L" + (x + timeline_item_width) + "," + (y + timeline_item_height - 2) + " L" + x + "," + (y + timeline_item_height - 2));

			if(false === isIE6) {
				timeline_items[n].attr({fill: ((0===n) ? timeline_active_colour: timeline_inactive_colour), stroke: "#fff", "stroke-opacity":0, "stroke-width": "0px", opacity:0.8});
			} else {
				if (0===n) {
					timeline_items[n].attr({fill: timeline_active_colour, stroke: "#fff", "stroke-opacity":0, "stroke-width": "0px", opacity:0.8});
				} else {
					timeline_items[n].attr({fill: timeline_inactive_colour, stroke: "#fff", "stroke-opacity":0, "stroke-width": "0px", opacity:0.8}).hide();
				}
			}

			timeline_items[n][0].style.cursor = "pointer";
			timeline_items[n][0].timeline_index = n;

			// Create the text labels
			// t = timeline.text(x + text_x_offset + 0, y + text_y_offset - 0, year).attr(bg_text_attr);
var marker1 = new Date();

			var t = timeline.text(x + text_x_offset, y + text_y_offset, year).attr(text_attr);

var marker2 = new Date();

			var box = t.getBBox(); // x, y, width, height

var marker3 = new Date();

			var r = timeline.rect(box.x, box.y, box.width, box.height).attr(box_attr);
var marker4 = new Date();

			r[0].style.cursor = "pointer";

			// Set onClick events
			(function(item,index){item.onclick = function() {
				show_timeline_item(index); clearInterval(interval_hook);
			}; })(timeline_items[n].node,n);

			(function(item,index){item.onclick = function() {
				show_timeline_item(index); clearInterval(interval_hook);
			}; })(r.node,n);

			var item_end = new Date();
			timeline_debug.push('<div>Item ' + n + '. Text: ' + (marker2 - marker1) + 'ms. Box: ' + (marker4 - marker3) + 'ms. Total: ' + (item_end - item_start) + 'ms</div>');

			prev_x = x;
		}
		var new_bevel = new Date();
		// Bevel
		var b1 = timeline.path(bevel1_src.join(' ')).attr({stroke:"#444", "stroke-width":"1px"});
		var b2 = timeline.path(bevel2_src.join(' ')).attr({stroke:"#fff", "stroke-width":"1px"});

		// Bring timeline items to front otherwise bevel prevents them being clicked on
		for(n=0, m=timeline_items.length; n<m; n+=1) {
			timeline_items[n].toFront();
		}
		
		var timeline_draw_end = new Date();
		timeline_debug.push('<div>One-time bevel: ' + (timeline_draw_end - new_bevel) + 'ms</div>');

		timeline_debug.push('<div>Timeline itself rendered in ' + (timeline_draw_end - timeline_draw_start) + 'ms</div>');
		// Set the click events on the Next and Prev buttons.
		document.getElementById("prev_button").onclick = function() { scroll_timeline(-1); clearInterval(interval_hook); return false; };
		document.getElementById("next_button").onclick = function() { scroll_timeline(1);  clearInterval(interval_hook); return false; };

		// Show the first item.
		show_timeline_item(carousel_index);
		interval_hook = setInterval(function() { scroll_timeline(1); }, 9000);

		// Housekeeping
		scrolling_available = true;
		timeline.safari();
		var end = new Date();

		timeline_debug.push('<div>Rendered in ' + (end - start) + 'ms</div>');
		
		// $('body').append(timeline_debug.join(''));
	}
}