var photos = [
{
				"url":"/banner1",
				"image":"wp-content/themes/cysa2/images/banner1.jpg",
				"title":"Fjölskylduvænt",
				"line1":"samfélag",
				"buttext":"Húsnæði á Ásbrú",
				"line3":'Ballerínur við æfingar',
				"line4":""
			},	

			{
				"url":"/0",
				"image":"wp-content/themes/cysa2/images/banner2.jpg",
				"title":"Heilsuþorpið",
				"line1":"Ásbrú",
				"buttext":"Heilsuþorpið Ásbrú",
				"line3":'Nemendur Keilis í einkaþjálfun',
				"line4":"class='image1'"
			},

			{
				"url":"/0",
				"image":"wp-content/themes/cysa2/images/banner3.jpg",
				"title":"Spennandi",
				"line1":"menntun",
				"buttext":"Menntun á Ásbrú",
				"line3":'Kennsluflugvél Keilis á flugi yfir Reykjanesi',
				"line4":""
			},


	
		{}
	];


	
	$(photos).each(function(i)
	{
		var photo = this;
		setTimeout(function()
		{
			var img = document.createElement('images');
			img.src = photo.image;
		}, i*2000);
	});
	
	// toggle used to alternate between showing headerimages
	var toggle = 0;
	var i = 0;
	// n for next image. Starts at 1 since we load first 2 images to start
	var n = 1;
	// - 2 because we cant use backspace in this instance to fix last comma in array, so we add a blank to make all browsers the same length
	var t = photos.length-2;
	var l = 0;
	// for auto rotation
	var ssInterval;
	
	function ssPlay(){
		ssInterval = setInterval("nextImage()", 6000);
		
	}
	
	function ssStop(){clearInterval(ssInterval);}
	
	function nextImage(){
		changeImage(l,n);
	}
	
	function changeImage(i,n){
		if(i == 0){
			h = t;
		}else{
			h = i-1;
		}
		$('.home-headg').html('<h1>'+photos[h].title+'<span>'+photos[h].line1+'</span></h1><h2><a href="'+photos[h].url+'">'+photos[h].buttext+'</a></h2>');
		$('.header-caption').html(''+photos[h].line3);
		if(toggle == 0){
			$('div#header-image3').fadeIn(400);
			$('div#header-image2').fadeOut(400, function () {
				$('div#header-image2').css('background-image','url('+photos[i].image+')');		
			});	
			
			l++;
			toggle = 1;
		} else {
			$('div#header-image2').fadeIn(400);
			$('div#header-image3').fadeOut(400, function () {								
				$('div#header-image3').css('background-image','url('+photos[i].image+')');
			});
			l++;
			toggle = 0;
		}
		
		
		if(l > t){l = 0}
		if(i == 0){
			$('.controller ul li:last').addClass('active');
			$('.controller ul li').eq(parseInt(t)-1).removeClass('active');
		}else if(i > 0){
			$('.controller ul li').eq(parseInt(i)-1).addClass('active');
			if(i == 1){
				$('.controller ul li:last').removeClass('active');
			}else{
				$('.controller ul li').eq(parseInt(i)-2).removeClass('active');
			}
		}
	}
	
		
	$(document).ready(function()
	{
		$('.controller').append('<ul></ul>');
		for(m=0;m<=t;m++){
			$('.controller ul').append('<li><a href="#'+(parseInt(m)+1)+'">'+(parseInt(m)+1)+'</a></li>');
		}
		$('.header-caption').append(photos[0].line3);
		$('.home-headg').append('<h1>'+photos[0].title+'<span>'+photos[0].line1+'</span></h1><h2><a href="'+photos[0].url+'">'+photos[0].buttext+'</a></h2>');
		$('.controller ul li').eq(0).addClass('active');
		$('div#header-image2').css('background-image','url('+photos[0].image+')');
		$('div#header-image3').css('background-image','url('+photos[1].image+')');
		l = 2;
		$('.controller ul li a').click(function () {
												ssStop();
												$('.controller ul li').removeClass('active');
												l = (parseInt(this.hash.replace("#", ""))-1);
												if(toggle == 0){
														$('div#header-image3').fadeOut(400);
														$('div#header-image2').fadeIn(400, function () {
															$('div#header-image2').css('background-image','url('+photos[l].image+')');		
														});	
														toggle = 1;
													} else {
														$('div#header-image2').fadeOut(400);
														$('div#header-image3').fadeIn(400, function () {								
				$('div#header-image3').css('background-image','url('+photos[l].image+')');
														});
														toggle = 0;
													}
													$('.header-caption').html(''+photos[l].line3);
													$('.home-headg').html('<h1>'+photos[l].title+'<span>'+photos[l].line1+'</span></h1><h2><a href="'+photos[l].url+'">'+photos[l].buttext+'</a></h2>');
													
													$('.controller ul li').eq(l).addClass('active');
													if(	l == t){
														l = 0;
													}else{
														l = parseInt(this.hash.replace("#", ""));
													}
													ssPlay();
												return false;
												
					});
		ssPlay();
	
	});