var gallery =  {
	build: function (cnt, questId) {
		$.ajax({
			type: 'GET',
			url: '/ws/answer/list/',
			data: {
				count: cnt,
				questionId: questId
			},
			success: function(data) { build_people_box(data); }
		})
	}
};

var people_box = [];

function build_people_box(data) {
  var index = 0;
  var answers = $(data).children('answers').eq(0).find('answer');

  // construct the initially selected person
  var first = answers.eq(0);
  $('#people-box-content').find('img').attr('src', first.attr('img'));
  $('#people-box-content').find('img').attr('alt', first.attr('name'));
  $('#people-box-content > span > a').attr('href', first.attr('link'));
  $('#people-box-content > span > a').text(first.attr('name'));
  importExpandWrapText($('#people-box-content > p'), first.attr('text'), $('#people-box-content > p').attr('rel'));

	answers.each(function () {
		people_box.push({
			name: $(this).attr('name'),
			img: $(this).attr('img'),
			link: $(this).attr('link'),
			text: $(this).attr('text')
		});

    // construct the people box thumbnail gallery
    $('#people-box-list').children('dl').eq(index).find('dt').attr('rel', $(this).attr('name'));

    $('#people-box-list').children('dl').eq(index).find('img').attr('src', $(this).attr('thumb'));
    $('#people-box-list').children('dl').eq(index).find('img').attr('alt', $(this).attr('name'));
    $('#people-box-list').children('dl').eq(index).find('img').attr('rel', index);
    index++;
	});
}

var idx = 0;
$('#people-box-list dl').live('click', function(){
	// get the index of the content in the people_box array
	if (idx == $('dd img', this).attr('rel')) return;
	idx = $('dd img', this).attr('rel');

	if ($.browser.msie){ // in IE, using jQuery animate breaks a P tags wrapping around a float.  So in IE we just swap.
		// swap picture and text
		$('#people-box-content > img').attr('alt', people_box[idx].name).attr('src', people_box[idx].img);
		$('#people-box-content > span > a').attr('href', people_box[idx].link).text(people_box[idx].name);
		importExpandWrapText($('#people-box-content > p'), people_box[idx].text, $('#people-box-content > p').attr('rel'));
	} else {
		// animate picture change
		$('#people-box-content > img').stop(true, true).animate({ 'opacity': 0 }, 250, function(){
			$('#people-box-content > img').attr('alt', people_box[idx].name).attr('src', people_box[idx].img).load(function () {
				$('#people-box-content > img').animate({ 'opacity': 1 }, 250);
			});
		});

		// animate text change
		$('#people-box-content').stop(true, true).animate({ 'opacity': 0 }, 250, function(){
			$('#people-box-content > span > a').attr('href', people_box[idx].link).text(people_box[idx].name);
			importExpandWrapText($('#people-box-content > p'), people_box[idx].text, $('#people-box-content > p').attr('rel'));
      $('#people-box-content').animate({ 'opacity': 1 }, 250);
		});
	}

	// change selected thumbnail while animations are happening
	$('#people-box-list dt.selected').stop(false, false).removeClass('selected').addClass('none');
	$('dt', this).stop(false, false).removeClass('none').addClass('selected');
	if ($.browser.msie) { // IE doesnt doesnt complete hover transitions while using !important, so we need to explicitly do that here
		$(this).parent().children('dl').children('dt.none').css('opacity', 0);
		$(this).parent().children('dl').children('dt.selected').css('opacity', 1);
	}

});