function PeopleCards(gscope) {
	
	var peopleArr = new Array()
	var currPeopleInd = 0
	var cardArr = new Array()
	var globalScope = gscope
	var imgFolder = "/_site/content/people/img/"
	var $vcardholder = $("#vcardholder")
	
	var peopleList = new Array()
	peopleList.push({id:"anna_n", name:"Anna Nissen"});
	peopleList.push({id:"carl_a", name:"Carl Wikström Ask"});
	peopleList.push({id:"clara_l", name:"Clara Laurent"});
	// peopleList.push({id:"david_a", name:"David Andersson"});
	peopleList.push({id:"david_lj", name:"David Ljunghill"});
	//peopleList.push({id:"jesper_w", name:"Jesper Wahlström"});
	peopleList.push({id:"johan_n", name:"Johan Nordberg"});
	peopleList.push({id:"jorgen_s", name:"Jörgen Söderqvist"});
	peopleList.push({id:"lars_s", name:"Lars Steiner"});
	//peopleList.push({id:"linn_f", name:"Linn Fröjdendahl"});
	peopleList.push({id:"lina_p", name:"Lina Persson"});
	peopleList.push({id:"linnea_l", name:"Linnea Lind"});
	peopleList.push({id:"maria_h", name:"Maria Hjelm"});
	peopleList.push({id:"martin_f", name:"Martin Friman"});
	//peopleList.push({id:"martin_g", name:"Martin Gustafsson"});
	peopleList.push({id:"mattias_j", name:"Mattias Järnemar"});
	//peopleList.push({id:"mia_b", name:"Mia Berg"});
	peopleList.push({id:"michaela_a", name:"Michaela Arnklint"});
	// peopleList.push({id:"mikael_j", name:"Mikael Jansson"});
	peopleList.push({id:"peter_g", name:"Peter Grundström"});
	peopleList.push({id:"sofi_m", name:"Sofi Mork"});
	peopleList.push({id:"staffan_b", name:"Staffan Bane"});
	peopleList.push({id:"william_f", name:"William Ferngard"});

           
	for(var i  = 0; i< peopleList.length; i++) {
		$('#peopleslist').append('<span class="tablecell purple" id="' + peopleList[i].id + '" onClick="peopleCards.showVcard(\'' +peopleList[i].id + '\')">' + peopleList[i].name + '</span> ')
		peopleArr.push(peopleList[i].id)
	}
	
	$(".paragraph.about").html($(".paragraph.about").html().replace(/XX/, peopleList.length))
	
	$("#vcard_prevbtn").click(function() {
		nextVcard("left")
	});
	
	$("#vcard_nextbtn").click(function() {
		nextVcard("right")
	});
	
	$("#cardClose").click(function() {
		closePeopleCard()
	});
	
	//Create array with the card divs on the page
	cardArr[0] = $("#vcard1")
	cardArr[1] = $("#vcard2")
	cardArr[2] = $("#vcard3")
	
	repositionCards()	
	
	//Show the vcardholder layer
	function showVcard(id) {
	
		_gaq.push(['_trackPageview', lang + "/people/" + id]);	
		
		if(globalScope.currentX == 2) {
			$vcardholder[0].style.display = "block";
			
			if(isWebkitComp) {			
				setTimeout(function(){
					$vcardholder[0].style.webkitTransitionProperty = "opacity";
					$vcardholder[0].style.webkitTransitionDuration = ".5s";
					$vcardholder[0].style.webkitTransitionTiming = "ease-out";
					$vcardholder[0].style.opacity = 1;
				}, 10);
				
			} else {
				$vcardholder[0].style.opacity = 1;
				if($.browser.msie != true) {
					$vcardholder.hide()
					$vcardholder.fadeIn()
				}
			}
			$(globalScope).trigger("modeChange", "vcard")
			
			repositionCards()
			
			//Load the three first contacts, left-middle-right
			for(var i=0; i< peopleArr.length; i++) {
				if(id == peopleArr[i]) {					
					currPeopleInd = i
					
					if(i>0) {
						getPeopleData(peopleArr[i-1], cardArr[0])
					} else {
						getPeopleData(peopleArr[peopleArr.length - 1], cardArr[0])
					}
					
					getPeopleData(id, cardArr[1])
					
					if(i==peopleArr.length - 1) {
						getPeopleData(peopleArr[0], cardArr[2])
					} else {
						getPeopleData(peopleArr[i+1], cardArr[2])
					}
					
					break;
				}
			}
		}
	}
	this.showVcard = showVcard;
	
	//Load json data via AJAX to a card div
	function getPeopleData(id, cardid) {
		
		cardid.empty()
		cardid.hide()
		
		$.getJSON('/_site/content/people/' + id + '.js', function(data) {
			
			var p=data[0]
			
			var htmlstr = ""
			
			if( p.person.image != "")
			htmlstr += '<img class="img" src="' + imgFolder + p.person.image + '" width="580" height="340" />'
			
			htmlstr += '<div class="info ' + p.person.align + ' ' + p.person.textColor + '">'
			htmlstr += '<div class="header ' + p.person.hlColor + '">' + p.person.name.toUpperCase() + '</div>'
			htmlstr += '<div class="title">' + p.person.title + '</div>'
			htmlstr += '<div class="desc">' + p.person.desc+ '</div>'
			htmlstr += '<div class="mail"><a href="mailto:' + p.person.email + '" class="' + p.person.textColor + '">' + p.person.email+ '</a></div>'
			htmlstr += '<div class="phone">' + p.person.phone + '</div>'
			htmlstr += '</div>'	
			
			if(p.person.facebook != "" || p.person.twitter != "") {
				
				htmlstr += '<div class="sociallinks ' + p.person.align + ' ' + p.person.textColor + '">'
				
				if(p.person.facebook != "")
				htmlstr += '<span id="linkFacebook" class="socialicon ' + p.person.textColor + '" onclick="window.open(\'' + p.person.facebook + '\')"></span>'
				
				if(p.person.twitter != "")
				htmlstr += '<span id="linkTwitter" class="socialicon ' + p.person.textColor + '" onclick="window.open(\'' + p.person.twitter + '\')"></span>'
				
				htmlstr += '</div>'
			}
			
			cardid.append(htmlstr)
			setTimeout(function(){
				var infoDiv = cardid.find(".info")
				infoDiv.css("top", (170 - (infoDiv.height()*.5) - 10) + "px")
			},10)
	
			cardid.fadeIn()
			
			Cufon.replace('.header');
			
			isSliding = false;
		});	
	}

	//Navigate to the next left/right card
	//Function is public
	function nextVcard(dir) {
	
		if(!isSliding) {
			
			isSliding = true
			
			if(isWebkitComp) {				
				setTimeout(function(){
					
					var matrixCard1 = new WebKitCSSMatrix(window.getComputedStyle(cardArr[0][0]).webkitTransform);
					var matrixCard2 = new WebKitCSSMatrix(window.getComputedStyle(cardArr[1][0]).webkitTransform);
					var matrixCard3 = new WebKitCSSMatrix(window.getComputedStyle(cardArr[2][0]).webkitTransform);

					cardArr[0][0].style.webkitTransitionProperty = "all";
					cardArr[0][0].style.webkitTransitionDuration = ".4s";
					cardArr[0][0].style.webkitTransitionTiming = "ease-out";
					
					cardArr[1][0].style.webkitTransitionProperty = "all";
					cardArr[1][0].style.webkitTransitionDuration = ".4s";
					cardArr[1][0].style.webkitTransitionTiming = "ease-out";
					
					cardArr[2][0].style.webkitTransitionProperty = "all";
					cardArr[2][0].style.webkitTransitionDuration = ".4s";
					cardArr[2][0].style.webkitTransitionTiming = "ease-out";

					if(dir == "left") {
						//cardArr[0][0].style.left = (-290) +   "px";
						//cardArr[1][0].style.left = (-290 + 1024) +   "px";
						
						if(isIpadComp) {			
							cardArr[0][0].style.webkitTransform = matrixCard1.translate(1024)
							cardArr[1][0].style.webkitTransform = matrixCard2.translate(1024)
						} else {
							cardArr[0][0].style.webkitTransform = matrixCard1.translate($("body").innerWidth())
							cardArr[1][0].style.webkitTransform = matrixCard2.translate($("body").innerWidth())
						}
						cardArr[2].empty()
						cardArr[2].append(cardArr[1].html())	
						
						cardArr[1][0].addEventListener( 'webkitTransitionEnd', loadNewCardsLeft , false ); 
						
					} else {
						//cardArr[2][0].style.left = (-290) +   "px";
						//cardArr[1][0].style.left = (-290 - 1024) +  "px";
						
						if(isIpadComp) {			
							cardArr[2][0].style.webkitTransform = matrixCard3.translate(-1024)
							cardArr[1][0].style.webkitTransform = matrixCard2.translate(-1024)
						} else {
							cardArr[2][0].style.webkitTransform = matrixCard3.translate(-$("body").innerWidth())
							cardArr[1][0].style.webkitTransform = matrixCard2.translate(-$("body").innerWidth())
						}
						
						cardArr[0].empty()
						cardArr[0].append(cardArr[1].html())
						
						cardArr[1][0].addEventListener( 'webkitTransitionEnd', loadNewCardsRight , false ); 
					}

				},10)			
			} else {
				if(dir == "left") {							
					cardArr[0].animate({left:"-290px"}, 300, "easeOutQuad", function() {});
					cardArr[1].animate({left:(-290 +  $("body").innerWidth()) + "px"}, 300, "easeOutQuad", loadNewCardsLeft);
					
					cardArr[2].empty()
					cardArr[2].append(cardArr[1].html())	
					
				} else {
		
					cardArr[2].animate({left:"-290px"}, 300, "easeOutQuad", function() {});
					cardArr[1].animate({left:(-290 -  $("body").innerWidth()) + "px"}, 300, "easeOutQuad", loadNewCardsRight);
					
					cardArr[0].empty()
					cardArr[0].append(cardArr[1].html())	
				}
			}
		}
	}
	this.nextVcard = nextVcard;

	//Triggered after slide to the left
	function loadNewCardsLeft() {
		
		if(isWebkitComp) {
			cardArr[1][0].removeEventListener( 'webkitTransitionEnd', loadNewCardsLeft , false ); 
			clearPeopleWebkitanim()
		}
		
		if(currPeopleInd == 0) {
			currPeopleInd = peopleArr.length - 1
		} else {
			currPeopleInd--
		}
	
		var tempcard = cardArr[2]
		cardArr[2] = cardArr[1]
		cardArr[1] = cardArr[0]
		cardArr[0] = tempcard
		
		var nextIndex = currPeopleInd-1
		
		if(nextIndex == -1)
		nextIndex = peopleArr.length - 1
		
		getPeopleData(peopleArr[nextIndex], tempcard)
	
		repositionCards()
	}
	
	//Triggered after slide to the right
	function loadNewCardsRight() {
		
		if(isWebkitComp) {
			cardArr[1][0].removeEventListener( 'webkitTransitionEnd', loadNewCardsRight , false ); 
			clearPeopleWebkitanim()
		}
		
		if(currPeopleInd == peopleArr.length - 1) {
			currPeopleInd = 0
		} else {
			currPeopleInd++
		}
		
		var nextIndex = currPeopleInd+1
		
		if(nextIndex == peopleArr.length)
		nextIndex = 0
		
		var tempcard = cardArr[0]
		cardArr[0] = cardArr[1]
		cardArr[1] = cardArr[2]
		cardArr[2] = tempcard
		
		getPeopleData(peopleArr[nextIndex], tempcard)
		
		repositionCards()
	}
	
	//If webkit animation is used, clear the style settings
	function clearPeopleWebkitanim() {
		cardArr[0][0].style.webkitTransitionProperty = "";
		cardArr[0][0].style.webkitTransitionDuration = "0";
		
		cardArr[1][0].style.webkitTransitionProperty = "";
		cardArr[1][0].style.webkitTransitionDuration = "0";
		
		cardArr[2][0].style.webkitTransitionProperty = "";
		cardArr[2][0].style.webkitTransitionDuration = "0";
	}
	
	//Close the vcardholder
	//function is public
	function closePeopleCard() {
		$vcardholder.css({display:"none"})
		$vcardholder[0].style.opacity = 0;
		mode = ""
	}
	this.closePeopleCard = closePeopleCard;
	
	//Reposition the cards on resize
	function repositionCards() {
		
		if(isWebkitComp) {
			
			if(isIpadComp) {
				cardArr[0].css({left:(-290 - 1024) + "px"})
				cardArr[1].css({left:-290 + "px"})
				cardArr[2].css({left:(-290 + 1024) + "px"})
			} else {
				cardArr[0].css({left:(-290 - $("body").innerWidth()) + "px"})
				cardArr[1].css({left:-290 + "px"})
				cardArr[2].css({left:(-290 + $("body").innerWidth()) + "px"})
			}
		
			if(window.getComputedStyle(cardArr[0][0]).webkitTransform != "none")
				var matrixCard1 = new WebKitCSSMatrix(window.getComputedStyle(cardArr[0][0]).webkitTransform);
			else 
				var matrixCard1 = new WebKitCSSMatrix();
				
			if(window.getComputedStyle(cardArr[1][0]).webkitTransform != "none") 
				var matrixCard2 = new WebKitCSSMatrix(window.getComputedStyle(cardArr[1][0]).webkitTransform);
			else 
				var matrixCard2 = new WebKitCSSMatrix();
				
			if(window.getComputedStyle(cardArr[2][0]).webkitTransform != "none") 
				var matrixCard3 = new WebKitCSSMatrix(window.getComputedStyle(cardArr[2][0]).webkitTransform);
			else 
				var matrixCard3 = new WebKitCSSMatrix();
				
			cardArr[0][0].style.webkitTransform = matrixCard1.translate((- matrixCard1.e))
			cardArr[1][0].style.webkitTransform = matrixCard2.translate((- matrixCard2.e))
			cardArr[2][0].style.webkitTransform = matrixCard3.translate((- matrixCard3.e))
		

		} else {
			cardArr[0].css({left:(-290 - $("body").innerWidth()) + "px"})
			cardArr[1].css({left:-290 + "px"})
			cardArr[2].css({left:(-290 + $("body").innerWidth()) + "px"})
		}
	} 

	return this;
}