/// <reference path="../js/jquery-1.6.2.js" />

/* ------------------------------------------------------------------------
    Class: vGallery
    Author: Wei
    Version: 1.2
------------------------------------------------------------------------- */

jQuery.fn.vGallery = function (settings) {
    settings = jQuery.extend({
        itemsPerPage: 5,
        slideCount: 1,
        animationSpeed: 'normal',
        item_popup: true,
        popup_position: { 'left': null, 'top': null },
        popup_fade_speed: 'normal'
    }, settings);

    return this.each(function () {
        var $gallery = $(this),
            itemHeight = 0,
            itemVerticalSpacing = 0,
            galleryHeight = 0,
            itemWidth = 0,
			itemHorizontalSpacing = 0,
			galleryWidth = 0,
			isAnimating = false;

        var currentItem = 0,
            $currentItem = null,
            itemCount = 0;

        var init = function () {
            formatGallery();
            applyNav();
            updateCurrentInfo('init');

            if (settings.item_popup) {
                initPopup();
            }
        }

        var formatGallery = function () {
            itemVerticalSpacing += ($gallery.find('li:first').css('margin-top') == 'auto') ? 0 : parseFloat($gallery.find('li:first').css('margin-top'));
            itemVerticalSpacing += ($gallery.find('li:first').css('margin-bottom') == 'auto') ? 0 : parseFloat($gallery.find('li:first').css('margin-bottom'));
            itemVerticalSpacing += ($gallery.find('li:first').css('padding-top') == 'auto') ? 0 : parseFloat($gallery.find('li:first').css('padding-top'));
            itemVerticalSpacing += ($gallery.find('li:first').css('padding-bottom') == 'auto') ? 0 : parseFloat($gallery.find('li:first').css('padding-bottom'));

            if (itemVerticalSpacing == 0) itemVerticalSpacing = 8;

            itemHeight = $gallery.find('li:first img').height();
            var itemBottomSpacing = (($gallery.find('li:first').css('margin-bottom') == 'auto') ? 0 : parseFloat($gallery.find('li:first').css('margin-bottom'))) + (($gallery.find('li:first').css('padding-bottom') == 'auto') ? 0 : parseFloat($gallery.find('li:first').css('padding-bottom')));
            galleryHeight = (itemHeight + itemVerticalSpacing) * settings.itemsPerPage - itemBottomSpacing; 

            itemWidth = $gallery.find('li:first').css('position', 'absolute').width();

            $gallery.css({
                'height': galleryHeight - itemVerticalSpacing,
                'width': itemWidth,
                'overflow': 'hidden',
                'position': 'relative',
                'clear': 'left'
            });

            $gallery.wrap('<div class="vGalleryContainer"></div>');
            $('.vGalleryContainer').width(itemWidth);

            var $items = $gallery.find('li');

            $items.find('img').css({ 'width': itemWidth, 'height': itemHeight });
            $items.each(function (i) {
                var top = i * (itemHeight + itemVerticalSpacing);

                $(this).css({
                    'position': 'absolute',
                    'top': top,
                    'left': 0
                });

                if ($(this).hasClass('selected')) {
                    currentItem = i;
                    $currentItem = $(this);
                }
            }).click(function () {  
                if (settings.item_popup) {
                    var imageUrl = $(this).find('a').attr('href');
                    showPopup(imageUrl);
                }

                return false;   
            });

            // set current info
            itemCount = $items.size();
            if (currentItem == 0) {
                $currentItem = $items.eq(0);
            }
        };


        var applyNav = function () {
            $gallery.after('<div class="nav_down"></div>');
            $gallery.before('<div class="nav_up"></div>');
            $gallery.next().width(itemWidth).end().prev().width(itemWidth);

            $gallery.next('.nav_down').click(function () {
                vMenuDown($(this));
            });
            $gallery.prev('.nav_up').click(function () {
                vMenuUp($(this));
            });
        }

        var vMenuUp = function ($caller) {
            if (isAnimating || $caller.hasClass('disabled') || (currentItem + settings.itemsPerPage) > itemCount - 1) return;
            isAnimating = true;
            $caller.addClass('disabled');

            var con = currentItem + settings.itemsPerPage;
            if (con > itemCount - 1) con = itemCount - 1;
            $gallery.find('li').each(function (i) {
                $(this).animate({ 'top': parseFloat($(this).css('top')) - settings.slideCount * (itemHeight + itemVerticalSpacing) }, settings.animationSpeed, function () {
                    if (i == con) { 
                        isAnimating = false;
                    }
                })
            });

            updateCurrentInfo('up', $caller);
        }

        var vMenuDown = function ($caller) {
            if (isAnimating || $caller.hasClass('disabled') || currentItem <= 0) return;
            isAnimating = true;
            $caller.addClass('disabled');

            var con = currentItem + settings.itemsPerPage;
            if (con > itemCount - 1) con = itemCount - 1;
            $gallery.find('li').each(function (i) {
                $(this).animate({ 'top': parseFloat($(this).css('top')) + settings.slideCount * (itemHeight + itemVerticalSpacing) }, settings.animationSpeed, function () {
                    if (i == con) {
                        isAnimating = false;
                    }
                })
            });

            updateCurrentInfo('down', $caller);
        }


        var updateCurrentInfo = function (direction, $caller) {
            if (direction == 'up') {
                currentItem += settings.slideCount;
            } else if (direction == 'down') {
                currentItem -= settings.slideCount;
            } else {    

            }

            $('.vGalleryContainer .nav_up, .vGalleryContainer .nav_down').css('visibility', 'visible');

            if (currentItem <= 0) {
                currentItem = 0;
                $('.vGalleryContainer .nav_down').css('visibility', 'hidden');

            }
            if ((currentItem + settings.itemsPerPage) > itemCount - 1) {
                $('.vGalleryContainer .nav_up').css('visibility', 'hidden');
            }

            if ($caller) $caller.removeClass('disabled');
        }


        var initPopup = function () {
            var template = '';
            template += '<div class="vgallery_popup">';
            template += '<div class="content_wrapper"><img src=""/></div>';
            template += '<div class="pop_close"><div class="pop_close_icon"></div><div class="pop_close_text"><em>CLOSE</em></div></div>';
            template += '</div>';

            if ($('body').find('.vgallery_popup').size() <= 0) {
                $('body').append(template);
            }

            $('.vgallery_popup').find('.content_wrapper img').load(function () {
                imageLoadedHandler();
            });

            $('.vgallery_popup .pop_close_text, .vgallery_popup .pop_close_icon').click(function () {
                closePopup();
            });
        }

        var imageLoadedHandler = function ($img) {
            var $popup = $('.vgallery_popup');

            var top = (settings.popup_position.top == null) ? ($(window).height() / 2 - $popup.height() / 2) : settings.popup_position.top;
            var left = (settings.popup_position.left == null) ? ($(window).width() / 2 - $popup.width() / 2) : settings.popup_position.left;
            $popup.css({ top: top + 'px', left: left + 'px' }).fadeIn(settings.popup_fade_speed);
        }

        var showPopup = function (imageUrl) {
            var $popup = $('.vgallery_popup');

            if (!$popup.is(':hidden')) {    
                $popup.fadeOut(settings.popup_fade_speed, function () {
                    $popup.find('.content_wrapper img').attr('src', imageUrl); 
                });
            } else {
                $popup.find('.content_wrapper img').attr('src', imageUrl); 
            }
        }

        var closePopup = function () {
            $('.vgallery_popup').fadeOut(settings.popup_fade_speed);
        }


        if ($(this).find('li').size() <= 0) {
            return;
        } else {
            init();
        }

    });
};