var ParticipantsCarousel = {
	participantList: [],
	container: null,
	htmlContent: null,
	domListContainer: null,
	
	topCornersHtml: '<div class="png sp-tr"><div class="png sp-tl"></div></div>',
	bottomCornersHtml: '<div class="png sp-br"><div class="png sp-bl"></div></div>',
	participantListHtml: '<ul class="participant-list cfx png"/>',
	
	defaults: {
		hoverPause: false,
		switchDelayTime: 3000,
		switchAnimationTime: 800,
		itemsDataSourceURL: 'js-data',
		shuffle: false
	},
	settings: {},
	
	init: function(elem, options){
	
		options = options || {};
		ParticipantsCarousel.settings = $.extend(ParticipantsCarousel.defaults, options);
	
		ParticipantsCarousel.container = $(elem);
		ParticipantsCarousel.domListContainer = $('<ul class="participant-list"/>');
		
		$.getJSON(ParticipantsCarousel.settings.itemsDataSourceURL, function(data) {
			ParticipantsCarousel.participantList = data;
			ParticipantsCarousel.buildCarouselHTML(data);
			ParticipantsCarousel.start();
		});
	},
	buildCarouselHTML: function(data){
		var htmlResult = $('<div/>');
		if(ParticipantsCarousel.settings.shuffle){
			ParticipantsCarousel.shuffleList(data);
		}
		ParticipantsCarousel.domListContainer = $(ParticipantsCarousel.participantListHtml);
		ParticipantsCarousel.domListContainer.html(ParticipantsCarousel.getParticipantslistHTML(data));
		
		htmlResult.append(ParticipantsCarousel.topCornersHtml)
				  .append(ParticipantsCarousel.domListContainer)
				  .append(ParticipantsCarousel.bottomCornersHtml);
									  
	    ParticipantsCarousel.container.append(htmlResult.html())
	},
	start: function(){
		$(ParticipantsCarousel.container).jCarouselLite({ // .b-speakers
			vertical: true,
			hoverPause:true,
			visible: 2,
			auto: ParticipantsCarousel.settings.switchDelayTime,
			speed: ParticipantsCarousel.settings.switchAnimationTime
		});
	},
	buildItemHTML: function(itemObj){
		var linkSrart ='',
			linkEnd ='';
		if(itemObj.url){
			linkSrart = '<a href="'+itemObj.url+'">';
			linkEnd = '</a>';
		}
		return '<li class="participant vcard cfx">'
				+ linkSrart
				+'<img class="photo" src="'+ itemObj.photoUrl +'" width="70" height="70" alt="">'
				+ linkEnd
					+'<div class="pers-info">'
						+ linkSrart
						+'<strong class="fn p-name">'+ itemObj.name +'</strong>'
						+ linkEnd
						+'<p class="role">'+ itemObj.info +'</p>'
					+'</div>'
				+'</li>';
	},
	getParticipantslistHTML: function(dataList){
		var rezHTML = '';
		for(var i=0; i < dataList.length; i++){
			rezHTML+= ParticipantsCarousel.buildItemHTML(dataList[i]);
		}
		return rezHTML;
	},
	shuffleList: function(arr){
		for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
		return arr;
	}
};

// initialization:

	$(function() {
		ParticipantsCarousel.init(".b-speakers",
								{hoverPause: true,	   			//stop scrolling on element hover. default:false
								switchDelayTime: 2000, 			//default: 3000ms
								switchAnimationTime: 500, 		//default: 800ms
								itemsDataSourceURL: '/js_data.txt', //path to data file
								shuffle:true // shuffle participant list
								});	
	});