$(document).ready(function () {

    /*
    $('.expando').each(function () {
    var smallwidth = $(this).find('i').width();
    $(this).attr('smallwidth', smallwidth);
    $(this).attr('bigwidth', $(this).width());
    $(this).width(smallwidth);
    });*/

    $('.expando').hover(
    function () {
        if ($(this).hasClass('selected')) return;
        $(this).animate({ paddingLeft: 32 }, { duration: 100, easing: 'easeOutCubic', queue: true }).animate({ backgroundPositionX: '0px' }, { duration: 300, easing: 'easeOutCubic', queue: true });

    },
    function () {
        if ($(this).hasClass('selected')) return;
        $(this).animate({ paddingLeft: 0, backgroundPositionX: '-32px' }, { duration: 50, easing: 'easeOutCubic' });
    });

    $('.miniexpando').hover(
    function () {
        if ($(this).hasClass('selected')) return;
        $(this).animate({ paddingLeft: 24}, { duration: 100, easing: 'easeOutCubic', queue: true }).animate({ backgroundPositionX: '0px' }, { duration: 300, easing: 'easeOutCubic', queue: true });
    },
    function () {
        if ($(this).hasClass('selected')) return;
        $(this).animate({ paddingLeft: 0, backgroundPositionX: '-24px' }, { duration: 50, easing: 'easeOutCubic' });
    });

    $('.imagethumb').click(function () {
        var viewer = $(this).attr('data-viewer');
        var key = $(this).attr('rel');
        //
        $('#' + viewer).children('.container').css('display', 'none');
        $('#' + viewer + '_' + key).css('display', 'block');

    });

   

    $("ul.slider").each(function () {
        //what is the size for the actual ul container?
        var container = $(this).width();
        $(this).attr('data-thiswidth', container + 'px');
        
        //with each slider we set up the values
        var maxsize = 520;
        $(this).attr('data-max', maxsize + 'px');
        //count number of li
        var $allaref = $(this).find('a');
        var padding = parseInt($allaref.last().css('paddingLeft'));
        var elm = $allaref.size();

        var msize = ((container - maxsize - padding - padding) / (elm-1))-padding;


        $(this).attr('data-min', msize + 'px');
        $allaref.width(msize);
        $allaref.last().width(maxsize);
        $(this).data('lastblock', $allaref.last());
    });

    $("ul.slider li a").hover(
    function () {
        var $parent = $(this).closest('ul');
        var $last = $parent.data('lastblock');
        var w = $last.width();
        $last.animate({ width: $parent.attr('data-min') }, { queue: false, duration: 500, easing: 'easeOutSine' });
        $(this).animate({ width: $parent.attr('data-max') }, { queue: false, duration: 500, easing: 'easeOutSine' });
        $parent.data('lastblock', $(this));
    });


});