/*

TODO:
- make click behavior also work on hover

*/

function revealCurrentDetail(currentItem) {
	var curDetailId = currentItem.attr('href').replace(/#/g,'');
	var curDetail = $('#details li[id=' + curDetailId + ']');
	curDetail.css({'background-image':'url(i/passions/' + curDetailId + '.png)'}).addClass('current').show();
	
	return;	
}


$(window).ready(function(){
	// adjust styling for js enabled browsers
	$('#passions').css({'height': '354px'});
	$('#details  li.top-level').css({'width':'198px','height':'345px','padding-right':'404px'});
	$('#interface').css({'background':'#fff url(i/passions/background_gradient.jpg) no-repeat'});
	$('.current').removeClass('current');
	
	// LIST OF PASSIONS //
	$('#passions ul').find('li:first a:visible').addClass('current');
	
	// Activate the scrollable tool
    $(".scrollable").scrollable({ vertical: true, mousewheel: true });
	//var api = $(".scrollable").data("scrollable");
	//var pn = api.getSize();
	// How many groups of passions are there?
	var passionsn = $(".scrollable").scrollable().getSize();
	
	// if the URL has an anchor specified, save it, else pick a passion at random
	var myanchor = window.location.hash;
	
	// How many passions are there?  Get a random number from 0 to one less.
	// jQuery index functions are zero based.
	var num_passions = $("#passions ul li").length;
	var rand_passion = Math.round(Math.random() * (num_passions - 1));
	
	// create thumbnails
	var link;
	var src = '';
	var passionNum = 0;
	var i = 0;
	$('#passions ul li').each(function() {
		link = $(this).find('a');
		src = link.attr('href').replace(/#/g,'');
		
		// If there is an anchor, choose it, else choose rand_passion
		if (myanchor) {
            if (link.attr('href') == myanchor ) {
                $('.current').removeClass('current');
                link.addClass('current');
                link.addClass('selectedPassion');
                passionNum = i;
            };
        }
        else {
            if (i == rand_passion) {
                $('.current').removeClass('current');
                link.addClass('current');
                link.addClass('selectedPassion');
                passionNum = rand_passion;
            };
        };
		link.css({'background-image':'url(i/passions/' + src + '_th.jpg)'});
		i++;
	});
	// Scroll so the right section is displayed
	$(".scrollable").scrollable().seekTo(Math.floor(passionNum / 6));

	// create on-click behavior
	$('#passions ul li a').click(function(e){
		e.preventDefault();
		
		// highlight correct item in passion list
		$('.current').removeClass('current');
		$('.selectedPassion').removeClass('selectedPassion');
		$('#details li.top-level:visible').hide();
		$(this).addClass('current');
		$(this).addClass('selectedPassion');
		
		// reveal requested passion detail
		revealCurrentDetail($(this));
	});
	
	// mouse-over behavior
	$('#passions ul li a').hover(
	    function () {
    		$('.current').removeClass('current');
    		$('#details li.top-level:visible').hide();
    		$(this).addClass('current');
	        revealCurrentDetail($(this));
        },
	    function () {
    		$('.current').removeClass('current');
    		$('#details li.top-level:visible').hide();
    		$('.selectedPassion').addClass('current');
	        revealCurrentDetail($('.selectedPassion'));
	    }
	);
		
	// REVEAL SELECTED PASSION DETAIL //
	$('#details li.top-level:not(.current)').hide();
	revealCurrentDetail($('#passions ul li .current'));	
});