/*
* Moving Boxes script by Chris Coyier
* http://css-tricks.com/moving-boxes/
*/

(function ($) {
    $.movingBoxes = function (el, options) {
        var base = this; base.$el = $(el); base.el = el; base.$el.data('movingBoxes', base); base.init = function () {
            base.options = $.extend({}, $.movingBoxes.defaultOptions, options);
            base.$el.addClass('left-shadow').css({ position: 'relative', left: 0, top: 0, width: base.options.width }).wrapInner('<div class="scrollContainer" />')
            .wrapInner('<div class="scroll right-shadow" />').prepend('<img class="scrollButtons left" src="' + base.options.leftArrow + '" />')
            .append('<img class="scrollButtons right" src="' + base.options.rightArrow + '" />').find('.panel').wrapInner('<div class="inside" />')
            .end().find('.scroll, .scrollContainer').css({ overflow: 'hidden', width: '100%' });
            base.panels = base.$el.find('.panel');
            base.panels.css({ width: base.options.width * base.options.panelWidth, float: 'left' });
            base.totalPanels = base.panels.length;
            base.curWidth = base.panels.outerWidth();
            base.curImgWidth = parseInt(base.panels.find('img').css('width'), 10);
            base.curImgHeight = base.curImgWidth / base.options.imageRatio;
            base.curTitleSize = parseInt(base.panels.find('h2').css('font-size'), 10);
            base.curParSize = parseInt(base.panels.find('p').css('font-size'), 10);
            base.regWidth = base.curWidth * base.options.reducedSize;
            base.regImgWidth = base.curImgWidth * base.options.reducedSize; base.regImgHeight = base.curImgHeight * base.options.reducedSize;
            base.regTitleSize = base.curTitleSize * base.options.reducedSize;
            base.regParSize = base.curParSize * base.options.reducedSize; base.panels.find('img').css({ height: base.curImgHeight + 'px' });
            base.container = base.$el.find('.scrollContainer').css({ position: 'relative', width: (base.curWidth + 50) * base.totalPanels, height: base.panels.outerHeight(true) });
            base.initialized = false; base.currentlyMoving = false;
            base.curPanel = 1; base.change(1); setTimeout(function () { base.change(base.options.startPanel) }, base.options.speed * 2);
            base.initialized = true;
            $(window).load(function () { base.$el.find('.scrollButtons').css({ top: (base.$el.innerHeight() - base.$el.find('.scrollButtons').height()) / 2 + 'px' }) });
            base.$el.find('.right').click(function () { base.change(base.curPanel + 1) }).end().find('.left').click(function () { base.change(base.curPanel - 1) });
            base.panels.click(function () { base.change(base.panels.index($(this)) + 1) }); base.$el.click(
            function () {
                base.active($(this))
            }).find('a').focus(function () {
                base.active($(this).closest('.slider'));
                var index = $(this).closest('.slider').find('.panel').index($(this).closest('.panel')) + 1; base.change(index)
            }); $(window).keyup(
            function (e) {
                switch (e.which) {
                    case 39: case 32: if (base.$el.is('.active-slider')) { base.change(base.curPanel + 1) } 
            break; case 37: if (base.$el.is('.active-slider')) { base.change(base.curPanel - 1) } break } })
        }; base.returnToNormal = function (num) {
            base.panels.not(':eq(' + (num - 1) + ')').animate({ width: base.regWidth + 'px' }, base.options.speed).find('img').animate({
                width: base.regImgWidth + 'px', height: base.regImgHeight + 'px'
            }, base.options.speed).end().find('h2').animate({ fontSize: base.regTitleSize + 'px' }, 
            base.options.speed).end().find('p').animate({ fontSize: base.regParSize + 'px' }, base.options.speed)
        }; base.growBigger = function (num) {
            base.panels.eq(num - 1).animate({ width: base.curWidth + 'px' }, base.options.speed).find('img').animate({
                width: base.curImgWidth + 'px', height: base.curImgHeight + 'px'
            }, base.options.speed).end().find('h2').animate({ fontSize: base.curTitleSize + 'px' }, 
            base.options.speed).end().find('p').animate({ fontSize: base.curParSize + 'px' }, base.options.speed,
        function () { base.panels.eq(num - 1).find('a').focus() })
        }; base.change = function (curPanel) {
            if (base.initialized && (curPanel < 1 || base.curPanel == curPanel || curPanel > base.panels.length)) { return false }
            if (!base.currentlyMoving) {
                base.currentlyMoving = true;
                var leftValue = (base.options.width - base.curWidth) / 2 - base.panels.eq(curPanel - 1).position().left;
                if (curPanel > base.curPanel) { leftValue += (base.curWidth - base.regWidth) } base.curPanel = curPanel; 
                base.$el.find('.scroll').scrollLeft(0); base.container.stop().animate({ left: leftValue }, base.options.speed,
        function () { base.currentlyMoving = false }); base.returnToNormal(curPanel); base.growBigger(curPanel)
            } 
        }; base.active = function (el) {
            $('.active-slider').removeClass('active-slider'); el.addClass('active-slider')
        }; base.currentPanel = function (panel) { 
        if (typeof (panel) !== 'undefined') { base.change(parseInt(panel, 10)) } return base.curPanel }; base.init()
};
$.movingBoxes.defaultOptions = {
    startPanel: 1, width: 800, panelWidth: 0.5, reducedSize: 0.8, imageRatio: 4 / 3, speed: 500, leftArrow: 'images/leftarrow.png', 
    rightArrow: 'images/rightarrow.png' }; $.fn.movingBoxes = function (options) { 
return this.each(function () { (new $.movingBoxes(this, options)) }) }; $.fn.getmovingBoxes = function () { this.data('movingBoxes') } })(jQuery);