var borderWidth = 3
var borderWidthZoom = 3
var zoomSpeed = 200
var scrollIncrement = 9
var scrollSpeed = 300
var shadowOpacity = 0.5;

function setupScroller(scrollerWidth, scrollerHeight) {
    var head_s = $('#head_s img')
    var head_h = $('#head_h img')

    /* Set up zoomed and unzoomed sizes for foreground images */
    head_h.each(function(i, e) {
        e.xw = e.width
        e.xh = e.height
    })
    head_s.each(function(i, e) {
        var partner = head_h.slice(i, i+1)
        var p = partner.parent()
        if (!p.is('li'))
            p = p.parent()
        partner.attr('width', e.width)
        partner.attr('height', e.height)
        p.css('width', e.width+borderWidth*2)
        p.css('height', e.height+borderWidth*2)
    })
    head_h.each(function(i, e) {
        e.ow = e.width
        e.oh = e.height
        e.difw = (e.xw - e.width)/2.0
        e.difh = (e.xh - e.height)/2.0
        e.id = 'hh_' + i
    })
    /* IE opacity fix */
    $('#head_h ul li, #head_shadow').css('opacity', 0)

    var curHoverItem = ''
    var isAnimatingHoverItem = 0
    var animateMeOut = ''

    var curPos = 0
    var scwr = $('#scrollWrapper')
    var isHovering = 0
    var isHalted = 0

    function checkIsCurrent() { /* {{{ */
        isAnimatingHoverItem = 0;
        if (this.id != curHoverItem) {
            animateItemOut($(this))
            if (curHoverItem)
                animateItemIn($('#'+curHoverItem))
        } else {
            animateMeOut = this.id
        }
    } /* }}} */

    function animateItemIn(ele) { /* {{{ */
        isAnimatingHoverItem = 1;
        var p = ele.parent()
        if (!p.is('li'))
            p = p.parent()

        p.animate({
            opacity: 1.0,
            marginTop: -ele.attr('difh')-borderWidthZoom+borderWidth,
            marginRight: -ele.attr('difw')-borderWidthZoom,
            marginBottom: -ele.attr('difh')-borderWidthZoom,
            marginLeft: -ele.attr('difw')-borderWidthZoom,
            width: ele.attr('xw')+borderWidthZoom*2,
            height: ele.attr('xh')+borderWidthZoom*2
        }, zoomSpeed)

        ele.animate({
            width: ele.attr('xw'),
            height: ele.attr('xh')
        }, zoomSpeed, 'linear', checkIsCurrent)
    } /* }}} */

    function animateItemOut(ele) { /* {{{ */
        var p = ele.parent()
        if (!p.is('li'))
            p = p.parent()

        p.animate({
            opacity: 0.0,
            marginTop: 0,
            marginRight: -borderWidth,
            marginBottom: -borderWidth,
            marginLeft: -borderWidth,
            width: ele.attr('ow')+borderWidth*2,
            height: ele.attr('oh')+borderWidth*2
        }, zoomSpeed)

        ele.animate({
            width: ele.attr('ow'),
            height: ele.attr('oh')
        }, zoomSpeed)
    } /* }}} */

    function hoverItemEnter() { /* {{{ */
        if (this.offsetParent.offsetLeft-curPos > 850 || this.offsetParent.offsetLeft+this.width-curPos < 50)
            return
        isHovering = 1;
        $('#head_shadow').animate({ opacity: shadowOpacity }, zoomSpeed)
        curHoverItem = this.id
        if (isAnimatingHoverItem)
            return
        if (animateMeOut)
            animateItemOut($('#'+animateMeOut))
        animateItemIn($(this));
    } /* }}} */

    function hoverItemLeave() { /* {{{ */
        return;
    } /* }}} */

    /* Set up zooming animations */
    head_h.hover(hoverItemEnter, hoverItemLeave);

    function scrollScroller() { /* {{{ */
        if (isHovering) {
            isHalted = 1
            return
        }
        isHalted = 0

        lastPos = scwr.css('margin-left')
        lastPos = lastPos.substr(0, lastPos.length-2) * 1
        curPos = curPos + scrollIncrement

        if (curPos >= scrollerWidth)
            curPos = curPos % scrollerWidth
        if (lastPos < -curPos)
            scwr.css('margin-left', -curPos + scrollIncrement + 'px')

        scwr.animate({marginLeft: -curPos}, scrollSpeed, 'linear', scrollScroller);
    } /* }}} */

    $('#head_h').hover(function () {
        /*
        $('#head_shadow').animate({ opacity: shadowOpacity }, zoomSpeed)
        isHovering = 1;
        */
    }, function () {
        $('#head_shadow').animate({ opacity: 0 }, zoomSpeed)
        isHovering = 0
        if (isHalted)
            scrollScroller()
        if (!isAnimatingHoverItem)
            animateItemOut($('#'+curHoverItem))
        curHoverItem = ''
    })

    $(document).ready(function () {
        /* Load flutter prevented */
        $('#headScroller, #head_shadow, #scrollOverlay').css('visibility', 'visible');
        scrollScroller()
    })
}