﻿// Sub Class

window.$BTJ.Tabs = new function() {

	// Variables
	var $this = this;
		
	// Methods	
	$this.init = function() {

		$this.configureTabClick('.TabNav  li  a.TabLink');
		$this.configureArticleSubTabLink('a.jsArticleSubTabLink');
		$this.configureSubTabClick('.SubTabNav li a.SubTabLink', '.DetailBody');
	
		// Check if there is a selected tab in querystring, if so select this tab
		var urlTab = window.location.hash;
		if(urlTab.indexOf('#') !=-1) { 
			$this.openTabs(urlTab, "all"); 
		}
	
		$this.fixIE6detailsProblem();
		$this.configureTitleClick();
		$this.configureImageClick();
		
	};
	
	
	//Single Tab
	/*
	* Edited by björn@firstflight to make sure that things dont get messed up
	* if the user double clicks on a tab. Messed up means that the animations
	* dont get to finish before jquery tries to animate again meaning that
	* elements gets placed where thet shouldn't.
	*/
	$this.configureTabClick = function(selector) {
	
		$(selector).click(function(event) {
			
			$("div:animated").stop(false, true); //If anything is animated, we stop it but don't clear the queue, and the jump tp the end of that animation. 
			
			var linkElm = $(this);
			
			// Check if we are currently busy
			if(linkElm.data('busy') == true) {
				return false;
			} else {
				linkElm.data('busy', true)
			}

			event.preventDefault();
				
			$(".aT").removeClass("aT");
			$(this).parents(".Tabs").addClass("aT");
			$this.openTabs($(this).attr("href"), ".aT");
			
			// bjorn@firstflight
			// We need to tell the element that it is done
			// but we have to wait a small amount of time before telling it that.
			// The link will be disabled until the function has executed but it should
			// not affect the user experience
			setTimeout(function() {
							linkElm.data('busy', false);
						}, 1000);
		
		});
	};


	// Configures click on subtabs
	$this.configureSubTabClick = function(selector, container) {
		$(selector).click(function(event) {
			$this.subTabOnClick(event, $(this), selector, container);
		});
	};
	
	// Eventhandler for subtab clicks
	$this.subTabOnClick = function(event, caller, selector, container) {
		var jContainer = caller.parents(container);
	
		// set css classes for the active tab
		caller.parents('ul:eq(0)').children('.activeSubTab').removeClass('activeSubTab');
		caller.parent().addClass('activeSubTab');
		caller.parent().siblings("li").children(".SubTabLink").removeClass("Active");
		caller.addClass("Active");
		
//		todo: behövs detta?		
//		$(".aT").removeClass(".aT");
//		jContainer.addClass(".aT");
		
		// show/hide tab content
		openSub = $this.removeHash(caller.attr("href"));
		$('.TabContainer', jContainer).hide();
		$("." + openSub, jContainer).show();
		
		event.preventDefault();	
	}	

	
	// Configures "Lektörsomdöme" link from snabbfakta to details
	$this.configureArticleSubTabLink = function(selector) {
		$(selector).click(function(event) {
			var elem = $(this);
			$(".aT").removeClass("aT"); 
			elem.parents(".Tabs").addClass("aT");
			var tab = elem.attr("href");
			var subtab = elem.attr("subtab");
			$this.openTabs(tab, null, subtab);
			event.preventDefault(); 
		});
	};

		
	// When the title is clicked in quick fact tab, the detail tab is opened.
	$this.configureTitleClick = function() {
		$('.BookFacts').find('.Title').click(function(e) {
			var article = $(this).closest('.Article');
			var link = article.find('.DetailTab').children();
			link.click();
		});
	};
	
	// When the image is clicked in quick fact tab, the detail tab is opened.
	$this.configureImageClick = function() {
		$('.BookFacts').find('.BookImgHolder').click(function(e) {
			var article = $(this).closest('.Article');
			var link = article.find('.DetailTab').children();
			link.click();
		});
	};
	
	$this.fixIE6detailsProblem = function() {
		// Fix for IE6 leaving elements behind when opening and closing details
		// Simply replaces the label-tags with span since the label seems to be the problem.
		// I have tried with setting position relative but that messes up the labels
		// in the article below the opened one and we have to touch that element too.
		if($.browser.msie && $.browser.version < 7) {
		
			$('#Content .BookConfirmation').each(function() {
			
				var h = $(this).html();
				h = h.replace('<LABEL>', '<span class="label">');
				$(this).html(h.replace('</LABEL>', '</span>'));
				
			});
			
		}
	};
	
	
	//Tab-öppnare
	/// @param t = which tab to open
	/// @param a = "all"/id/null
	/// @param subtab = the subtab to show
	$this.openTabs = function(t, a, subtab) {

	//alert('opentabs t:' + t + ', a: ' + a  + ', subtab: '+ subtab);

		if (a == null) {//om a är null är det en enskild tab vi klickat på
			a = ".aT ";
		} else if (a == "all") {//om a är all vill vi öppna alla tabbar som matchar länkens mål
			a = "";
		} else { //annars syftar länken på ett id (eller en klass...) och vi vill öppna en speciell artikel.
			a = a + " ";
		}
	
		var prevTab = $(a + ".TabNav li.Active a").attr("href");
		
		$(a + ".TabNav li.Active").removeClass('Active'); //Tar bort "öppen tab"-utseende från alla öppna tabbar i den aktuella artikeln
	
		var tabLink = $(a + "a[href*='" + t + "']");
		tabLink.parent().addClass('Active');
		tabLink.parents().siblings().removeClass("DividerLeft");
		tabLink.parents().prevAll("li").addClass("DividerLeft");
		
		var openTab = $this.removeHash(t);
		
		if ($(".Tabs").hasClass("Article") && a == ".aT ") { //Specialare för artikel-tabarna
			
			if (t.indexOf('#Details') != -1) { //Om det är det är detaljvyn vi öppnar
				$this.openArticleDetailTab(a, subtab, prevTab, tabLink); 
			} else if (t.indexOf('#Snabbfakta') != -1) { // Om det är snabbfakta
				$this.openArticleSnabbFaktaTab(a, prevTab);
			} 
			
		} else { //Om det är "vanliga tabbar" dvs öppning av övriga tabbar på sidan - todo: den här kommentaren är felaktig, när hamnar man här eg??
				$this.openNonArticleTab(openTab, a);
		}

		return false;

	}; //end openTabs
	
	// todo: det här metodnamnet är felaktigt, när anropas den här metoden eg??
	// anropas vid sökning samt andra tab-sidor (2 gånger på kundservicesidan om # är angett i url)
	$this.openNonArticleTab = function(openTab, a) {
		$(a + "div.TabContainer").hide();	
		$(a + "." + openTab).show(); //visar tabben med länkens mål som namn
		
		if (openTab == "Details") { // vid sökning med 1 resultat så att vi ska öppna details  (TODO: gör i .net istället? varför köra js?)
			$(a + ".DetailBody .TabContainer").hide();
			$(a + ".DetailBody .FirstCont").show();

			$(a + ".BookFacts").hide();
			$(a + ".NotisFields").show();
			
			$this.setDetailDimensions($('.DetailTab'));
		} 
	
		if (openTab != "Snabbfakta") {
			window.location.hash = openTab; //Ändrar URL-en för att möjliggöra bokmärkning av en sida med en viss tab öppen.
		}
		
	};
	
	$this.openArticleSnabbFaktaTab = function(a, prevTab) {
		// FYI: param a will always be ".aT"

		// If snabbfakta tab is already selected, do nothing
		if(prevTab == "#Snabbfakta") {
			return false;
		} 
		
		$(a + "div").stop({
			clearQueue: true,
			gotoEnd: true
		});

		$(a + "div.TabContainer").slideUp();
		
		// Show/hide/animate bookfacts and notisfields
		$this.animateShowQuickFacts(a);
		
	};
	
	
	
	$this.openArticleDetailTab = function(a, subTab, prevTab, tabLink) {
		// FYI: param a will always be ".aT"
		
		// If details tab is already selected, do nothing
		if(prevTab == "#Details") {
			return false;
		} 
		 
		// Open Details tab
		var openContainer = $(a + ".Details");
		$(a + "div.TabContainer").hide();
		if($.browser.safari) {
			openContainer.show("slide", {direction: "up"}, 300);
		} else {
			openContainer.slideDown("slow");
		}
		
		// Is this the first time the detail view opens? Send AJAX request to get HTML from web server
		if ($(a + ".Loading").is(":visible")) {
			// Hide all elements during AJAX call
			$(a + ".BookFacts").hide();
			$(a + ".BookOptions").hide();
			$(a + ".ActionBar").hide(); 

			// Send AJAX request
			var ajaxurl = $(tabLink.parent().parent().siblings(".jsAjaxLoadDetailsURL")).attr('title');
			$this.ajaxLoadDetails(ajaxurl, subTab);
		} else {
		// HTML for detail view already loaded, just open the tab
			
			// Which subtab shall we show? 
			// 1. subtab from parameter
			// 2. currently selected subtab
			// 3. FirstCont
			var tabToShow = "FirstCont";
			var currentTab = $(a + ".DetailBody .SubTabNav li.activeSubTab a.Active");
			if(currentTab.length > 0) {
				tabToShow = $this.removeHash(currentTab.attr('href'));
			}
			if (subTab != null && subTab != tabToShow) {  
				tabToShow = subTab;	
				
				// Subtab is not currently selected, un-select previous selected subtab
				$(a + ".DetailBody .SubTabNav li.activeSubTab a.Active").removeClass('Active'); 
				$(a + ".DetailBody .SubTabNav li.activeSubTab").removeClass('activeSubTab');

				// Mark subtab as selected
				var tabLink = $(a + ".DetailBody .SubTabNav a[href*='" + tabToShow + "']");
				tabLink.parent().addClass('activeSubTab'); 
				tabLink.addClass('Active');	
			}
					
			// Hide all subtab content, and show the selected subtab content
			$(a + ".DetailBody .TabContainer").hide();
			$(a + ".DetailBody ." + tabToShow).show();	
			
			// Show/hide/animate bookfacts and notisfields
			$this.animateShowDetails(a);
		}
	};

	
	

	// Show/hide/animate bookfacts and notisfields, when showing Details
	$this.animateShowDetails = function(a) {
		var bookFacts = $(a + ".BookFacts");
		var notisFields = $(a + ".NotisFields");
				
		if (bookFacts.is(":visible") || notisFields.is(":hidden")) {
			bookFacts.hide("slide", {direction: "right"}, 300, function () {
				notisFields.show("slide", {direction: "left"}, 300, function() {
					notisFields.css("left", 0);
				});
			});
		}		
	};

	// Show/hide/animate bookfacts and notisfields, when showing Snabbfakta
	$this.animateShowQuickFacts = function(a) {
		var bookFacts = $(a + ".BookFacts");
		if (bookFacts.is(":hidden")) {
			var notisFields = $(a + ".NotisFields");
			notisFields.hide("slide", { direction: "left"}, 300, function () {
				bookFacts.show("slide", { direction: "right"}, 300);
				
			});
		}
	};

	// Populate details view with HTML from AJAX call
	$this.populateDetails = function(data, textStatus) {
		a = ".aT ";
		
		// Get HTML for details view from AJAX call
		$(a + ".Details").html(trimAjaxData(data));
		
		// Show elements that was hidden before AJAX call was made
		$(a + ".BookOptions").show();
		$(a + ".ActionBar").show();
		
		// Set height of details view
		$this.setDetailDimensions($(a + ".Details"));
		
		// Show/hide/animate bookfacts and notisfields
		$this.animateShowDetails(a);
			
		//Hook up jQuery events
		$this.configureSubTabClick('.SubTabNav li a.SubTabLink', '.DetailBody');
		
	};
	
	
	// If AJAX call to get detail view fails, show Snabbfakta
	$this.revertToQuickFacts = function() {
	    alert('Laddning av detaljer misslyckades');
		a = ".aT ";
		
		
		// Show elements that was hidden before AJAX call was made
//		$(a + ".BookFacts").show();
		$(a + ".BookOptions").show();
		$(a + ".ActionBar").show();
		
	    window.$BTJ.Tabs.openTabs('#Snabbfakta', null);
	};

	// Sends AJAX request to get html for detail view from webserver
	$this.ajaxLoadDetails = function(ajaxurl, subtab) {
		if (subtab != null) {
			$.ajax({
			    url: ajaxurl+ "&subtab=" + subtab,
			    success: window.$BTJ.Tabs.populateDetails,
			    error: window.$BTJ.Tabs.revertToQuickFacts
			});
		} else {
			$.ajax({
			    url: ajaxurl,
			    success: window.$BTJ.Tabs.populateDetails,
			    error: window.$BTJ.Tabs.revertToQuickFacts
			});
		}
	};

	
	// Adjusts article dimensions, to fit content (area will grow to fit image and lista-till-höger)
	/**
	 * @var trigger The link that triggered the tab change
	 */
	$this.setDetailDimensions = function(trigger) {
	
		var detailsWrapper = trigger.parents('.Article').find('.Details');
		var detailsTitleImg = $('.DetailTitleImg', detailsWrapper);
		var detailsList = $('.DetailList', detailsWrapper);
			
		// Array to store heights in
		var heights = new Array();
		heights[0] = 260; // Min height
		heights[1] = detailsTitleImg.height();	 // Height of article image		
		heights[2] = detailsList.height();		 // Height of lista-till-höger
		
		// Get the largest height value
		var highestHeight = Number(heights.sort(function(a,b){return a - b}).slice(-1));
		
		// Compensate for the padding on the other elements
		var heightInclPadding = (highestHeight + 30); 
		
		// Compensation for margin of detailNavigation
		var marginCompensation = 10;
			
		var navigationHeight = $('.detailNavigation', detailsWrapper).height();
		var innerDetailBodyHeight = heightInclPadding - (navigationHeight + marginCompensation);	
		
		// Set height of all columns to new height
		detailsTitleImg.height(highestHeight);
		detailsList.height(highestHeight);			
		$('.DetailBody', detailsWrapper).height(heightInclPadding);
		$('.innerDetailBody', detailsWrapper).height(innerDetailBodyHeight);
		$('.DetailWrapper', detailsWrapper).height(heightInclPadding);
			
	}; //end article dimensions

	
	$this.removeHash = function(s) {
		s = s.replace(/^[^#]+#/, ""); //tar bort staket
		s = s.replace(/^#/, ""); //tar bort staket  
		return s; 
	};

	

}; //end btj.Tabs
