// JavaScript Document
/*onclick only*/
/*$(document).ready(function() {
    
    var bibleWidth = $("#bible").width() / 2;
    var selectWidth = $("a[class='selected']").width() / 2;
    var selectBtn = $("a[class='selected']").position();
    var selectPosition = selectBtn.left + selectWidth;

    $("#bible").css({
        "left": -(bibleWidth) + selectPosition + "px"
    });
    $(".selected").parent().addClass("active");
    $(".active").animate({
        backgroundColor:"red"
    },125,'linear');

    $("#menu li a").click(function() {
        $("#menu li a").removeClass("selected");
        $("#menu li").removeClass("active");
        $("#menu li").animate({
            backgroundColor:"#14A"
        },125,'linear');
        $(this).addClass("selected");
        $(this).parent().addClass("active");
        $(".active").animate({
            backgroundColor:"red"
        },125,'linear');
        var liWidth = $(this).parent().width() / 2;
        var btnPositions = $(this).parent().position();
        var btnPosition = btnPositions.left + liWidth;
         var newPos = $("a[class='selected']").position().left;
        var newSelect = newPos + liWidth;
        $("#bible").stop(true, false).animate({
            "left": -(bibleWidth) + newSelect + "px"
        }, 250, 'linear');
    });
});*/



//on mouse over animation
$(document).ready(function() {
    
    function moveTo(a, b, c) {
        $("#bible").stop(true, false).animate({
            "left": -(a) + b + "px"
        }, c, 'linear');
    }
	//define the variables
    var bibleWidth = $("#bible").width() / 2;
    var selectWidth = $("a[class='selected']").width() / 2;
    var selectBtn = $("a[class='selected']").position();
    var selectPosition = selectBtn.left + selectWidth;
	//
	
	//add css and define values
    $("#bible").css({
        "left": -(bibleWidth) + selectPosition + "px"
    });
	
	//select first item on page load
	 $(".selected").parent().addClass("active");
    $(".active").animate({
        backgroundColor:"#dac665"
    },125,'linear');
	//
	
	//fade buttons bg on muse click
    $("#menu li a").click(function() {
        $("#menu li a").removeClass("selected");
        $("#menu li").removeClass("active");
        $("#menu li").animate({
           // backgroundColor:"#F5F5F5"
		   backgroundColor:"#Ffffff"
        },125,'linear');
        $(this).addClass("selected");
        $(this).parent().addClass("active");
        $(".active").animate({
            backgroundColor:"#CBAF50"
        },125,'linear');
    });
	//
	
	//animate bible image on mouse over
    $("#menu li").hover(function() {
        var liWidth = $(this).width() / 2;
        var btnPositions = $(this).position();
        var btnPosition = btnPositions.left + liWidth;
        moveTo(bibleWidth, btnPosition, 250);
    }, function() {
        var liWidth = $(this).width() /2;
        var liDistance = $(this).position().left;
        var newPos = $("a[class='selected']").position().left;
        var newSelect = newPos + liWidth;
        var time = Math.abs(liDistance - newPos) + 250;
        moveTo(bibleWidth, newSelect, time);
    });
	//
});



//ANIMATE ONLY ON CLICK
/*
$(document).ready(function() {
    
    var bibleWidth = $("#bible").width() / 2;
    var selectWidth = $("a[class='selected']").width() / 2;
    var selectBtn = $("a[class='selected']").position();
    var selectPosition = selectBtn.left + selectWidth;

    $("#bible").css({
        "left": -(bibleWidth) + selectPosition + "px"
    });

    $("#menu li a").click(function() {
        $("#menu li a").removeClass("selected");
        $(this).addClass("selected");
        var liWidth = $(this).parent().width() / 2;
        var btnPositions = $(this).parent().position();
        var btnPosition = btnPositions.left + liWidth;
         var newPos = $("a[class='selected']").position().left;
        var newSelect = newPos + liWidth;
        $("#bible").stop(true, false).animate({
            "left": -(bibleWidth) + newSelect + "px"
        }, 250, 'linear');
    });
});


*/