//Scrollvalue for Navigation to be fixed on top
var NAVVALUE = 0;
//Image Preloader
var cache = [];
  // Arguments are image paths relative to the current page.
function preLoadImages() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
}

// Scroll to Top of the window, animated
function scrollToTop() {
        $('html,body')
        .animate({scrollTop: 0}, 700);
}

//Everything related to the Arrow
function arrowSlider(targetSlide) {
	var current = targetSlide;
	
	
	if (current == 1) {
		$('#arrow')
		.animate({left: 10}, 200);
	}
	if (current == 2) {
		$('#arrow')
		.animate({left: 75}, 200);
	}
	if (current == 3) {
		$('#arrow')
		.animate({left: 150}, 200);
	}
	if (current == 4) {
		$('#arrow')
		.animate({left: 225}, 200);
	}
	if (current == 5) {
		$('#arrow')
		.animate({left: 300}, 200);
	}
	if (current == 6) {
		$('#arrow')
		.animate({left: 380}, 200);
	}
	if (current == 7) {
		$('#arrow')
		.animate({left: 455}, 200);
	}
	if (current == 8) {
		$('#arrow')
		.animate({left: 605}, 200);
	}
	if (current == 9) {
		$('#arrow')
		.animate({left: 795}, 200);
	}
	if (current == 10) {
		$('#arrow')
		.animate({left: 890}, 200);
	}
	else {
	
	}

}

//calculate Whitespace on Top of Content and right-value for stripes
function calculateWhitespace (){
	
	// desired height of seen navigation = 165 px
	// height of main container = 470 px
	
	var browserHeight = $(window).height();
	
	var whiteSpace = browserHeight - 600;
	if (whiteSpace > 0) {
		whiteSpace = whiteSpace / 2;
		SCROLLVALUE = whiteSpace;
		$('#whitespaceTop').css('height', whiteSpace+'px');
		$('#whitespaceBottom').css('height', whiteSpace+'px');
	}
	
	//right-value for Stripes
	var browserwidth = $(window).width();
	var stripeMargin = (browserwidth - 960)	/ 2;
	
	$('#stripes').css('right', stripeMargin+'px');
	
	
	
}

$(window).resize(function() {
calculateWhitespace()
});

//Set the current (target)-Slide "active" and slide the stripes aaaand set breadcrumb aaaaaaaand active separator
function setLinkActive(targetSlide) {
	var current = targetSlide;
	var previous = $('#slider').data('AnythingSlider').currentPage;
	
	if (current > 7) {
		$('#goto_'+previous).removeClass('jFlowActive jFlowActiveGreen');
		$('#goto_'+current).addClass('jFlowActiveGreen');
	}
	else {
		//blue stripes
		$('#goto_'+previous).removeClass('jFlowActive jFlowActiveGreen');
		$('#goto_'+current).addClass('jFlowActive');
	}
	//slide Stripes
	$('#stripes').animate({marginTop:-120}, 300);
	$('#stripes').delay(300).animate({marginTop:0}, 300);
	
	//set Breadcrumb
	if (current < 7) {
		$('#newToThisBreadcrumb').removeClass('invisible');
		$('#newToThisBreadcrumb').removeClass('noDisplay');
		$('#serviceDesignerBreadcrumb').addClass('invisible');
		$('#separator_arrows').attr('src','img/separator_left_active.jpg');
	}
	if (current > 7){
	    $('#newToThisBreadcrumb').addClass('invisible');
	    $('#newToThisBreadcrumb').addClass('noDisplay');
		$('#serviceDesignerBreadcrumb').removeClass('invisible');
		$('#separator_arrows').attr('src','img/separator_right_active.jpg');
	}
	if (current == 7) {
		$('#newToThisBreadcrumb').addClass('invisible');
	    $('#serviceDesignerBreadcrumb').addClass('invisible');
	    $('#separator_arrows').attr('src','img/lower_seperator.jpg');
	}
}


//Tag Navigation to Top when scrolling down

//FIXME Needs to be adopted (jumps when scrolling down)
$(window).scroll(function(){

  		topInt = NAVVALUE;
  		
		
		if($(window).scrollTop() > topInt) {
			$('#navigation').css('top', '0px');
			$('#navigation').css('position', 'fixed');
			$('#lineOfInteraction').css('padding-top', '50px');
		}
		else {
			$('#navigation').css('position', 'relative');
			$('#lineOfInteraction').css('padding-top', '0px');
		}
});

//Load Tooltips for Authors
//FIXME Duplicate Code, unsauber
$(".author img").live({
  mouseover: function() {
  	var personName = $(this).attr('title');
  	var jobDescription = $(this).attr('alt');
  	
  	var AUTHOR = $(this).parent();
  	
  	var offSet = $(this).offset();
  	var leftInt = offSet.left;
  	var topInt = offSet.top;
  	
  	var tooltip = $('#tooltip');
    tooltip.html('<div id="name">' + personName + '</div><div id="jobDescription">' + jobDescription + '</div>');
	tooltip.css('left',leftInt-60);
	tooltip.css('top', topInt+40);
	tooltip.css('display', 'block');
	tooltip.css('cursor', 'hand')
	
	tooltip.live({
	//keep tooltip displayed while hovering from the image to the tooltip
	mouseover: function(){
		var tooltip = $('#tooltip');
    	tooltip.html('<div id="name">' + personName + '</div><div id="jobDescription">' + jobDescription + '</div>');
		tooltip.css('left',leftInt-60);
		tooltip.css('top', topInt+40);
		tooltip.css('display', 'block');		
	},
	mouseout: function() {
		tooltip.css('display', 'none');
	},
	click: function(){
		//AUTHOR.next().css('display','block');
	}
	});
  },
  mouseout: function() {
    $('#tooltip').css('display', 'none');
  },
  click: function(){
    var AUTHOR = $(this).parent();
	AUTHOR.next().css('display','block');
  }
});

//CLOSE WINDOW FOR DESCRIPTION ON CLICK OF X
$('.boxClose').live({
	click: function(){
	$('.box').css('display','none');
}
});



//On Page LOAD ###################################
$(function(){
  calculateWhitespace();
  preLoadImages("../img/icon_new_active.png", "../img/icon_servicedesigner.png");
  
  //Calculate margin of Navigation
  var offSet = $('#navigation').offset();
  var topInt = offSet.top;
  NAVVALUE = topInt;
  		
  
  
  $('#slider').anythingSlider({
 
    // *********** Appearance ***********
    // Theme name; choose from: minimalist-round, minimalist-square, metallic, construction, cs-portfolio
    theme: 'default',
    // If true, the entire slider will expand to fit the parent element
    expand: false,
    height: 670,
    // If true, solitary images/objects in the panel will expand to fit the viewport
    resizeContents: false,
    // Set this value to a number and it will show that many slides at once
    showMultiple: false,
    // Anything other than "linear" or "swing" requires the easing plugin
    easing: "swing",
 
    // If true, builds the forwards and backwards buttons
    buildArrows: false,
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    // If true, builds the start/stop button
    buildStartStop: false,
 
    // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
    appendFowardTo: null,
    // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
    appendBackTo: null,
    // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
    appendControlsTo: null,
    // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
    appendNavigationTo: null,
    // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null
    appendStartStopTo: null,
 
    // If true, side navigation arrows will slide out on hovering & hide @ other times
    toggleArrows: false,
    // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
    toggleControls: false,
 
    // Start button text
    startText: "Start",
    // Stop button text
    stopText: "Stop",
    // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
    forwardText: "&raquo;",
    // Link text used to move the slider back (hidden by CSS, replace with arrow image)
    backText: "&laquo;",
    // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
    tooltipClass: 'tooltip',
 
    // if false, arrows will be visible, but not clickable.
    enableArrows: true,
    // if false, navigation links will still be visible, but not clickable.
    enableNavigation: true,
    // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
    enableStartStop: true,
    // if false, keyboard arrow keys will not work for this slider.
    enableKeyboard: true,
 
    // *********** Navigation ***********
    // This sets the initial panel
    startPanel: 7,
    // Amount to go forward or back when changing panels.
    changeBy: 1,
    // Should links change the hashtag in the URL?
    hashTags: true,
    // if false, the slider will not wrap
    infiniteSlides: true,
    // Details at the top of the file on this use (advanced use)
    navigationFormatter: function(index, panel) {
        // This is the default format (show just the panel index number)
        return "" + index;
    },
 
    // *********** Slideshow options ***********
    // If true, the slideshow will start running; replaces "startStopped" option
    autoPlay: false,
    // If true, user changing slides will not stop the slideshow
    autoPlayLocked: false,
    // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
    autoPlayDelayed: false,
    // If autoPlay is on, this can force it to start stopped
    startStopped: false,
    // If true & the slideshow is active, the slideshow will pause on hover
    pauseOnHover: true,
    // If true & the slideshow is active, the  slideshow will stop on the last page. This also stops the rewind effect  when infiniteSlides is false.
    stopAtEnd: false,
    // If true, the slideshow will move right-to-left
    playRtl: false,
 
    // *********** Times ***********
    // How long between slideshow transitions in AutoPlay mode (in milliseconds)
    delay: 3000,
    // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
    resumeDelay: 15000,
    // How long the slideshow transition takes (in milliseconds)
    animationTime: 600,
 
 
    // *********** Callbacks ***********
    // Callback before the plugin initializes
    onBeforeInitialize: function(e, slider) {},
    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {},
    // Callback on slideshow start
    onShowStart: function(e, slider) {},
    // Callback after slideshow stops
    onShowStop: function(e, slider) {},
    // Callback when slideshow pauses
    onShowPause: function(e, slider) {},
    // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
    onShowUnpause: function(e, slider) {},
    // Callback when slide initiates, before control animation
    onSlideInit: function(e, slider) {},
    // Callback before slide animates
    onSlideBegin: function(e, slider) {},
    // Callback when slide completes - no event variable!
    onSlideComplete: function(slider) {},
 
    // *********** Interactivity ***********
    // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
    clickForwardArrow: "click",
    // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
    clickBackArrow: "click",
    // Events used to activate navigation control functionality
    clickControls: "click focusin",
    // Event used to activate slideshow play/stop button
    clickSlideshow: "click",
 
    // *********** Video ***********
    // If true & the slideshow is active & a  youtube video is playing, it will pause the autoplay until the video is  complete
    resumeOnVideoEnd: true,
    // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
    addWmodeToObject: "opaque",
    // return true if video is playing or false if not - used by video extension
    isVideoPlaying: function(base) {
        return false;
    }
 
	});
$("#goto_1").click(function(){
  arrowSlider(1);
  setLinkActive(1);
  scrollToTop();
  $('#slider').anythingSlider(1);
});
$("#goto_2").click(function(){
  arrowSlider(2);
  setLinkActive(2);
  scrollToTop();
  $('#slider').anythingSlider(2);
});
$("#goto_3").click(function(){
  arrowSlider(3);
  setLinkActive(3);
  scrollToTop();
  $('#slider').anythingSlider(3);
});
$("#goto_4").click(function(){
  arrowSlider(4);
  setLinkActive(4);
  scrollToTop();
  $('#slider').anythingSlider(4);
});
$("#goto_5").click(function(){
  arrowSlider(5);
  setLinkActive(5);
  scrollToTop();
  $('#slider').anythingSlider(5);
});
$("#goto_6").click(function(){
  arrowSlider(6);
  setLinkActive(6);
  scrollToTop();
  $('#slider').anythingSlider(6);
});
$("#goto_7").click(function(){
  arrowSlider(7);
  setLinkActive(7);
  scrollToTop();
  $('#slider').anythingSlider(7);
});
$("#goto_8").click(function(){
  arrowSlider(8);
  setLinkActive(8);
  scrollToTop();
  $('#slider').anythingSlider(8);
});
$("#goto_9").click(function(){
  arrowSlider(9);
  setLinkActive(9);
  scrollToTop();
  $('#slider').anythingSlider(9);
});
$("#goto_10").click(function(){
  arrowSlider(10);
  setLinkActive(10);
  scrollToTop();
  $('#slider').anythingSlider(10);
});

$("#newToThis").click(function(){
  arrowSlider(1);
  setLinkActive(1);
  scrollToTop();
  $('#slider').anythingSlider(1);
});

$("#knowAbout").click(function(){
  arrowSlider(8);
  setLinkActive(8);
  scrollToTop();
  $('#slider').anythingSlider(8);
});

$('.jFlowNext').click(function(){
  var current = $('#slider').data('AnythingSlider').currentPage;
  arrowSlider(current+1);
  setLinkActive(current+1);
  scrollToTop();
  $('#slider').anythingSlider(current+1);
});

$("#newToThisBreadcrumb").click(function(){
  arrowSlider(7);
  setLinkActive(7);
  scrollToTop();
  $('#slider').anythingSlider(7);
});

$("#serviceDesignerBreadcrumb").click(function(){
  arrowSlider(7);
  setLinkActive(7);
  scrollToTop();
  $('#slider').anythingSlider(7);
});

$("#imprintHeader").click(function(){
	$("#imprint").slideDown();
	var x = $(this).offset().top - 100; // 100 provides buffer in viewport
   $('html,body').animate({scrollTop: x}, 500);
	
});

$("#errataHeader").click(function(){
	$("#errata").slideDown();
	var x = $(this).offset().top - 100; // 100 provides buffer in viewport
   $('html,body').animate({scrollTop: x}, 500);
	
});

$("#lineOfInteraction").click(function(){
	var x = $(this).offset().top - 50; // 100 provides buffer in viewport
   $('html,body').animate({scrollTop: x}, 500);
	
});

});

// Everything related to the Contact Form
$(function() {
  emailVal = $('#email').val();
  $('.error').hide();
  $('.message').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('#email').focus(function(){
    if ($('#email').val() == emailVal) {
    $('#email').val('');
    }
  });
  $('#email').blur(function(){
    if ($('#email').val() == '') {
    	$('#email').val(emailVal);
    };
  });
  
  $(".button").click(function() {
		// validate and process form
		// first hide any error messages
    $('.error').hide();
    
		var email = $("input#email").val();
		if (email == emailVal) {
      $(".error").show();
      $("input#email").focus();
      return false;
    }
    function checkEmail(inputvalue){	
    var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
    if(pattern.test(inputvalue)){         
		return true;   
    }else{   
		return false; 
    }
}
	if (checkEmail(email) == false){
		$(".error").show();
      $("input#email").focus();
      return false;
	}

		var dataString = 'email=' + email;
		//alert (dataString);return false;
		
		$.ajax({
      type: "POST",
      url: "../bin/email.php",
      data: dataString,
      success: function() {
        $('.message').html("Thank you! We will get in touch as soon as the app is available.").show();
        },
        error: function() {
        $('.message').html("Something didn't work out as meant to. Please try again.").show();
        }
     });
    return false;
	});
});