function getInfo(id){
	var infoLead = new Array();
	infoLead['fio']	 		=  $('#item-'+ id +' span.card-fio').html();
	infoLead['pos'] 		=  $('#item-'+ id +' span.card-pos').html();
	infoLead['bio'] 		=  $('#item-'+ id +' span.card-bio').html();
	infoLead['img_small'] 	=  $('#item-'+ id +' img.card-image-small').attr('src');
	infoLead['img_big'] 	=  $('#item-'+ id +' img.card-image-big').attr('src');
	return infoLead;
}
	
function renderCard(id){	
	infoLead = getInfo(id);																														
	var fio_arr = infoLead['fio'].split(" ");
	var templateString = $('#lead-card-template').html();
	templateString = templateString.replace("ID", 		id);
	templateString = templateString.replace("%LAST NAME%", 	infoLead['fio']);
	templateString = templateString.replace("%POSITION%", 	infoLead['pos']);
	templateString = templateString.replace("%IMAGE%", infoLead['img_small']);
	return templateString;													
}

function renderAllCards(){
	
	var cardBlocks = '';
	for (i = 1; i <= cardsNum; i++){
			cardBlocks+=renderCard(i)
		}
	$('#lead-card-holder').html(cardBlocks);
	//$('.lead-card').css('display','block');
	$('.lead-card').fadeIn('slow');
	$('.lead-card-image').animate({"background-position": "1px 4px"}, "slow");
}
	
function displayInfo(infoLead){
	$('#lead-info-fio').html(infoLead['fio']);
	$('#lead-info-pos').html(infoLead['pos']);
	$('#lead-info-bio').html(infoLead['bio']);
}

	
function showLead(id){
	infoLead = getInfo(id);
	duration = 300;
	$('#lead-photo-big').animate({
		opacity: 0
		}, duration, function() {
			$('#lead-photo-img').attr('src',infoLead['img_big']);
		});
	unselectAllLifts();
	selectLift(id);	  
	$('#lead-info-box').animate({
		opacity: 0,
		right: '+=15px'
		}, duration, function() {
			displayInfo(infoLead);
		});
	  
	$('#lead-photo-big').animate({
		opacity: 1
	}, duration);
	$('#lead-info-box').animate({
		opacity: 1,
		right: '-=15px'
	}, duration);														  	
		  											
}

	
function showLeadStart(id){
	infoLead = getInfo(id);
	displayInfo(infoLead);
	$('#lead-photo-img').attr('src',infoLead['img_big']);
	$('#lead-photo-img').fadeIn('fast');
	$('#lead-info-box')	.slideDown('middle');
}

function scrollCardsUp(){
	var tt = cardsNum-4;
	if (currentTopCard > tt ) return;
	$('#lead-card-holder').animate({
		top: '-=' + cardHeight + 'px'
	}, 500);	
	currentTopCard = currentTopCard + 1;
}


function scrollCardsDown(){
	if (currentTopCard==1) return;
	$('#lead-card-holder').animate({
		top: '+=' + cardHeight + 'px'
	}, 500);	
	currentTopCard = currentTopCard-1;
}




function createLift(){
	
	var liftStr = '';
	oneStage = '<img src="'+imgUnselectLift+'" id="stage-ID">';
	for (i = 1; i <= cardsNum; i++){
		liftStr+=oneStage.replace('ID',i);
	}
	$('#lead-lift').html(liftStr);
}

function selectLift(id){
	$('#stage-'+id).attr('src',imgSelectLift);
}

function unselectAllLifts(){
	for (i = 1; i <= cardsNum; i++){
		$('#stage-'+i).attr('src',imgUnselectLift );
	}	
}


function init(){
	cardsNum = $('#lead-data-source li').get().length;
	renderAllCards();
	
	imgUnselectLift = host + '/img/unselectLift.png';
	imgSelectLift 	= host + '/img/selectLift.png';		
	createLift();
	showLeadStart(defaultLead);	
	selectLift(defaultLead);	
	$('#lead-arrow-bot').bind('click',function() {
		scrollCardsUp();
	});
	$('#lead-arrow-top').bind('click',function() {
			scrollCardsDown();
	});
	

	
	//We wrap all the code in an object so that it doesn't interfere with any other code
	var scroller = {
	 init: function() {
	
	 //collect the variables
	 scroller.docH = document.getElementById("lead-bio-content").offsetHeight;
	 scroller.contH = document.getElementById("lead-bio-container").offsetHeight;
	 scroller.scrollAreaH = document.getElementById("scrollArea").offsetHeight;
	
	 //calculate height of scroller and resize the scroller div
	 //(however, we make sure that it isn't to small for long pages)
	 scroller.scrollH = (scroller.contH * scroller.scrollAreaH) / scroller.docH;
	 //if(scroller.scrollH < 15) scroller.scrollH = 15;
	 document.getElementById("scroller").style.height = Math.round(scroller.scrollH) + "px";
	
	 //what is the effective scroll distance once the scoller's height has been taken into account
	 scroller.scrollDist = Math.round(scroller.scrollAreaH-scroller.scrollH);
	
	 //make the scroller div draggable
	 Drag.init(document.getElementById("scroller"),null,0,0,-1,scroller.scrollDist);
	
	 //add ondrag function
	 document.getElementById("scroller").onDrag = function (x,y) {
	 var scrollY = parseInt(document.getElementById("scroller").style.top);
	 var docY = 0 - (scrollY * (scroller.docH - scroller.contH) / scroller.scrollDist);
	 document.getElementById("lead-bio-content").style.top = docY + "px";
	 }
	 }
	}
	
	onload = scroller.init; 
	
	if (pageTitle.length>0) $('#lead-page-title').text(pageTitle);
	
	
	
}
var pageTitle;
var cardsNum;
var defaultLead = 1;
var currentTopCard = 1;
var cardHeight = 112;	
var imgUnselectLift;
var imgSelectLift;	


var host;