/* 
    jQuery Macarousel 1.0 
    @author: Jacob Overgaard | jo <at> smart-web <dot> dk
    @copyright: 2011 SmartWeb ApS
    @file jQuery.macarousel.js
*/
(function($) {
    $.fn.macarousel = function(options) {
        //Init
        var defaults = {
            activeClass:        'active',
            viewClass:          'Viewer',
            slideClass:         'Slider',
            leftClass:          'ButtonLeft',
            rightClass:         'ButtonRight',
            wrapperClass:       'SliderWrapper',
            inViewClass:        'InView',
            itemClass:          'item',
            advance:            3,
            visible:            3,
            itemMargin:         5,
            itemWidth:          75,
            itemHeight:         100,
            viewWidth:          760,
            viewHeight:         460,
            viewContentWidth:   760,
            viewContentHeight:  460,
            easingRight:        'swing',
            easingLeft:         'swing',
            duration:           500
        };
        options = $.extend(options, defaults);
        
        //Main iteration
        return this.each(function() {
            var el          = $(this);
            var viewer      = $("." + options.viewClass, el);
            var slider      = $("." + options.slideClass, el);
            var wrapper     = $("." + options.wrapperClass, el);
            var btnLeft     = $("<div class='" + options.leftClass + "'></div>");
            var btnRight    = $("<div class='" + options.rightClass + "'></div>");
            var pics        = $("." + options.itemClass, el);
            var visibleArea = (options.itemWidth * options.visible) + (options.itemMargin * options.visible);
            var sliderArea  = (pics.length * options.itemWidth) + (options.itemMargin * pics.length);
            var realItemWidth = (options.itemWidth + options.itemMargin);
            
            //Functions
            var advanceLeft = function() {
                slider.animate({
                    left: '+=' + (realItemWidth * options.advance)
                }, options.duration, options.easingLeft, showButtons);
            }
            
            var advanceRight = function() {
                slider.animate({
                    left: '-=' + (realItemWidth * options.advance)
                }, options.duration, options.easingRight, showButtons);
            }
            
            var showPic = function(e) {
                pics.removeClass(options.activeClass);
                e.addClass(options.activeClass);
                var holder = $('.ViewContent', viewer);
                holder.hide().html('<img style="margin: 0 auto;" class="activeItem" src="'+e.attr('href')+'" />').css({width: options.viewContentWidth, height: options.viewContentHeight}).fadeIn(1000);
                return false;
            }
            
            var showButtons = function() {
                btnLeft.hide();
                btnRight.hide();
                var items = pics.length;
                
                //No reason to run this if there is not enough items
                if (options.visible < items) {
                    var left = parseInt(slider.css('left'));
                    var maxLeft = 0-((items-options.visible)*realItemWidth);
                    if (left < 0) btnLeft.show();
                    if (left == 0) btnRight.show();
                    if (left > maxLeft) btnRight.show();
                }
            }
            
            //Assign style
            el.css({
                position: 'relative',
                float: 'left',
                zIndex: '1'
            });
            viewer.css({
                width: options.viewWidth,
                minHeight: options.viewHeight + options.itemMargin,
                background: '#000',
                padding: '5px 0',
                marginBottom: options.itemMargin*2
            }).append('<div class="ViewContent" style="margin: 0 auto;"></div>');
            wrapper.append('<div class="' + options.inViewClass + '"></div>');
            slider.css({
                float: 'left',
                width: sliderArea,
                position: 'absolute',
                zIndex: '4',
                left: '0',
                top: '0'
            }).remove().appendTo($('.' + options.inViewClass, el));
            $("." + options.inViewClass, el).css({
                position: 'relative',
                width: visibleArea,
                height: options.itemHeight,
                overflow: 'hidden',
                zIndex: '5',
                margin: '0 auto'
            });
            wrapper.css({
                margin: '0 auto',
                padding: '0 20px',
                width: visibleArea-options.itemMargin,
                height: options.itemHeight,
                position: 'relative'
            });
            $('.'+options.itemClass, el).css({
                float: 'left',
                width: options.itemWidth,
                height: options.itemHeight,
                margin: '0 ' + options.itemMargin + 'px 0 0'
            });
            btnLeft.css({
                position: 'absolute',
                left: -50,
                bottom: (options.itemHeight/2)-12,
                zIndex: '6',
                cursor: 'pointer',
                background: 'url(/upload_dir/design/unique/arrow-left.png) no-repeat',
                width: 56,
                height: 56
            }).prependTo(wrapper);
            btnRight.css({
                position: 'absolute',
                right: -40,
                bottom: (options.itemHeight/2)-12,
                zIndex: '6',
                cursor: 'pointer',
                background: 'url(/upload_dir/design/unique/arrow-right.png) no-repeat',
                width: 56,
                height: 56
            }).appendTo(wrapper);
            
            //Assign listeners
            btnLeft.click(advanceLeft);
            btnRight.click(advanceRight);
            pics.click(function() {
                return showPic($(this));
            });
            
            //Init code
            showButtons();
            showPic($(pics[0]));
        });
    };
})(jQuery);