/* 
 * IO Timeline Module
 */

(function($){
	$.fn.IOTimeline = function(options){
		
		//Attibutes
			var defaults = {
				timelineParent: $(this),
				timelineWidth:	0,
				timelineListWidth: 0,
				timelineListMarginLeft: 0,
				timelineYearWidth: 0,
				maxMarginLeft: 0,
				activeElementPositionLeft: 0,
				activeElementId: 0,
				visibleCount: 0,
				overflowBehaviour: ""
			};

			options = $.extend(defaults, options);

		return this.each(function(){

			obj = options.timelineParent;

			//Hide timeline overflow (elements)
			obj.find(".timeline").css("overflow","hidden");

			//Hide all years contents
			obj.find(".year").hide();

			//Set width of the list of years to "total width" of a year * number of years
			obj.find(".timeline ul").css("width",($(".history .timeline ul").children().length * 83));

			//Display the title & content for the initial active element
			//obj.find(".timeline ul li a.active").next().text($(".history .timeline ul li a.active").attr("title"));
			toggleActiveContent()

			//Preset the options
			options.timelineWidth = parseInt(obj.find(".timeline").css("width").replace("px", ""));
			options.timelineListWidth = parseInt(obj.find(".timeline ul").css("width").replace("px", ""));
			options.timelineListMarginLeft = parseInt(obj.find(".timeline ul").css("margin-left").replace("px", ""));
			options.timelineYearWidth = parseInt(obj.find(".timeline ul li").css("width").replace("px", ""))
									  + parseInt(obj.find(".timeline ul li").css("padding-left").replace("px", ""))
									  + parseInt(obj.find(".timeline ul li").css("padding-right").replace("px", ""));
			options.maxMarginLeft = (-1 * (options.timelineListWidth - options.timelineWidth)) + 2;
			options.activeElementPositionLeft = obj.find(".timeline").find("a.active").parent().position().left;
			options.activeElementId = getActiveElementId();
			options.visibleCount = Math.ceil(options.timelineWidth / options.timelineYearWidth);


			//Function for getting the active elements Id
			function getActiveElementId(){
				var activeElementId = 0;
				obj.find(".timeline a").each(function(i){
					if(obj.find(".timeline a").eq(i).is(".active")){
						activeElementId = i;
					}
				});
				return activeElementId;
			}

			//Function for displaying the active "years" theme and hiding all the other "years" themes
			function toggleActiveTheme(){
				//obj.find(".timeline ul li a.active").next().text(obj.find(".timeline ul li a.active").attr("title"));
				obj.find(".timeline ul li a.active").parent().siblings().children().removeClass("active").next().text("");
			}

			//Function for displaying the active "years" contents and hiding all other "years" contents
			function toggleActiveContent(){
				var activeYear = obj.find(".timeline ul li a.active").text().replace(".","").replace(" ","");
				obj.find(".year."+activeYear).show().siblings(".year").hide();
				var pHeight = parseInt(obj.find(".year."+activeYear+" .content .copy").css("height").replace("px",""));
					if($.browser.msie){
						pHeight = obj.find(".year."+activeYear+" .content .copy").height();
					}
				var cHeight = parseInt(obj.find(".year."+activeYear+" .content").css("height").replace("px",""));
				if(pHeight > cHeight){
					if(options.overflowBehaviour == "hide"){
						obj.find(".year."+activeYear+" .content .copy").css({"position": "static",
																			 "height": cHeight+"px",
																			 "overflow": "hidden" });
					}else if(options.overflowBehaviour == "topdown"){
						obj.find(".year."+activeYear+" .content .copy").css({"position": "static",
																			 "bottom": "auto"}).parent().parent().css({"position": "relative",
																													   "height": "auto"}).find(".caption").css({"position": "absolute",
																																								"left": "370px",
																																								"top": cHeight+30+"px"});
					}
				}
				var iWidth = obj.find(".year."+activeYear+" .content .rounded_img img").width();
				obj.find(".year."+activeYear+" .caption").css("width", iWidth+"px");

				if($.browser.msie && $.browser.version == "6.0"){
					obj.find(".year."+activeYear+" .content .rounded_img .x1").attr("style", "width: "+iWidth+"px !important;");

					var iHeight = obj.find(".year."+activeYear+" .content .rounded_img img").height();
					obj.find(".year."+activeYear+" .content").css("height", iHeight+"px");

					if((iHeight % 2) != 0){
						obj.find(".year."+activeYear+" .content .rounded_img .x2").attr("style", "width: "+iWidth+"px !important;margin-bottom:-1px !important;");
					}else{
						obj.find(".year."+activeYear+" .content .rounded_img .x2").attr("style", "width: "+iWidth+"px !important;");
					}
				}
			}

			//Function for moving the timeline
			function moveTimeline(toggler){
				var togglerClass = toggler.attr("class");
				options.timelineListMarginLeft = parseInt(obj.find(".timeline ul").css("margin-left").replace("px", ""));

				if(togglerClass == "next"){

					//Check if the left margin of the timeline(List) is greater than the maximum allowed left margin
					if(options.timelineListMarginLeft > options.maxMarginLeft){

						if(!$(".history .timeline ul").is(":animated")){

							//Slide the timeline(List) to the left by the width of a year element
							$(".history .timeline ul").stop().animate({"marginLeft": "-="+options.timelineYearWidth+"px"}, "slow");

							//"Activate" the "prev" button
							$(".prev").parent().removeClass("inactive");

							//Check if the left margin of the timeline(List) will be less or
							//or equal the maximum allowed left margin after another move
							if((options.timelineListMarginLeft - options.timelineYearWidth) <= options.maxMarginLeft){

								//"Deactivate" the "next" button
								toggler.parent().addClass("inactive");
							}
							return true;
						}else{
							return false;
						}

					}else{
						return false;
					}
					
				}else if(togglerClass == "prev"){

					//Check if the left margin of the timeline(List) is less than 0
					if(options.timelineListMarginLeft < 0){

						if(!$(".history .timeline ul").is(":animated")){

							//Slide the timeline(List)to the right by the width of a year element
							$(".history .timeline ul").stop().animate({"marginLeft": "+="+options.timelineYearWidth+"px"}, "slow");

							//"Activate" the "nexxt" button
							$(".next").parent().removeClass("inactive");

							//Check if the left margin of the timeline(List) will be 0 or
							//or higher after another move
							if((options.timelineListMarginLeft + options.timelineYearWidth) >= 0){

								//"Deactivate" the "prev" button
								toggler.parent().addClass("inactive");
							}
							return true;
						}else{
							return false;
						}
						
					}else{
						return false;
					}

				}else{
					return false
				}
			}
			
			//Function for moving the datePicker
			function moveDatePicker(toggler){
				var togglerClass = toggler.attr("class");
				var numberOfElements = $(".timeline ul").children().length;

				options.activeElementId = getActiveElementId();
				options.activeElementPositionLeft = obj.find(".timeline").find("a.active").parent().position().left;
				options.timelineListMarginLeft = parseInt(obj.find(".timeline ul").css("margin-left").replace("px", ""));

				if(togglerClass == "next"){
					
					//Check if the number of elements devided by the activle elements id id greater then the max. amount visible
					if((numberOfElements - options.activeElementId) > options.visibleCount){

						//"Activate" the next "year"
						obj.find(".timeline").find("a.active").removeClass("active").parent().next().children().addClass("active");
						
						//Toggle the "years" themes
						//toggleActiveTheme();

						return true;
					}else{
						return false;
					}
					
				}else if(togglerClass == "prev"){

					//--Check if the maximum margin to the left for the timeline(List) is less or equal the posotion of the
					//--active element to the left minus the timeline(List)s width
					//--if(options.maxMarginLeft >= (options.activeElementPositionLeft - options.timelineListWidth)){
					if(options.activeElementId >= options.visibleCount){

						//"Activate" the next "year"
						obj.find(".timeline").find("a.active").removeClass("active").parent().prev().children().addClass("active");

						//Toggle the "years" themes
						//toggleActiveTheme();

						return true;
					}else{
						return false;
					}

				}else{
					return false;
				}
			}

			//Display the theme of each year when hovering the year
			//and hide the theme when leaving the year
			var tlLinkTitle = "";
			obj.find(".timeline").find("a").bind("mouseenter", function(){
				tlLinkTitle = $(this).attr("title");
				$(this).attr("title","");
				$(this).next().text(tlLinkTitle);
			}).bind("mouseleave", function(){
				$(this).next().text("");
				$(this).attr("title",tlLinkTitle);
			}).bind("mouseup",function(){
				$(this).addClass("active").next().text("").parent().siblings().children().removeClass("active").next().text("");
				toggleActiveContent();
			});

			//Click functions of the "next" and "prev" buttons
			obj.find(".control a").click(function(){
				var hasMoved = moveTimeline($(this));
				if(hasMoved){
					var wasPicked = moveDatePicker($(this));
					if(wasPicked){
						toggleActiveContent();
					}
				}
				return false;
			});

		});
	};
})(jQuery);