jQuery(function($) {
    $.fn.thumbgallery = function(options) {
        return this.each(function() {
            $.thumbgallery(this, options);
        });
    };

    $.thumbgallery = function(container, options)
    {
        $settings = {
            'photoElmID': 'photoList',
            'photoW':     950,
            'photoH':     300,
            'thumbBoxID': 'thumbBox',
            'thumbElmID': 'thumbList',
            'thumbsNum':  6,
            'thumbColW':  154,
            'thumbColH':  48,
            'btnPrevID':  'btnPrev',
            'btnNextID':  'btnNext',
            'zBase':      10
        };
        
        if (options && options.photoElmID && options.hoverElmID) {
            $.extend($settings, options);
        }
        
        $currentIndex = 0;
        $animatingSlide = 0;
        $slideTimer = null;
        
        $container = $(container);
        
        $photoElm = $('#'+$settings.photoElmID);
        $photos = $photoElm.children();
        
        $.thumbgallery.init();
    };

    $.thumbgallery.init = function()
    {
        if ($photos.length < 1) return false;
        
        $photos.each(function (index){
            $.data($(this).get(0), 'photoIndex', index);
            $(this).hide();
        });
        
        $thumBox = $('#'+$settings.thumbBoxID, $container);
        $thumBox.hide();
        
        $thumbBoxInner = $('#'+$settings.thumbBoxID+'Inner', $container);
        
//        $thumbElm = $photoElm.clone(true);
//        $thumbElm.removeAttr('id').attr('id', $settings.thumbElmID);
        $thumbElm = $('#'+$settings.thumbElmID, $thumbBoxInner);
        
        $thumbs = $thumbElm.children();
        
        $thumbElm.css({'width':(($thumbs.length + 1) * $settings.thumbColW)+'px'});
        
        $('li,img', $thumbElm).show();
        $thumbs.each(function(index) {
            $thisElm = $(this);
            $thisA = $('a', $thisElm);
            $thisImg = $('img', $thisElm);
            $thisA.attr('href', $photos.eq(index).attr('href'));
            
            $thisElm.attr({'id': "tgThumb_"+index});
            $.data($thisElm.get(0), 'photoIndex', index);
            
//            $('<div class="thumbLayer"></div>')
//            .hide().prependTo($thisA);
            
            $thumbs.hover(
                function () {
                    if (!$(this).hasClass('currentThumb')) {
                        $.thumbgallery.setThumbStyle_hover($(this));
                    }
                },
                function () {
                    if (!$(this).hasClass('currentThumb')) {
                        $.thumbgallery.setThumbStyle_off($(this));
                    }
                }
            );
        });
        
        $('a', $thumbElm).click(function(){
            var photoIndex = $.data($(this).parents('li').get(0), 'photoIndex');
            $.thumbgallery.showPhoto(photoIndex);
            return false;
        });
        
        $thumbElm.appendTo($thumbBoxInner);
        
        //button
        $btnPrev = $('#btnPrev', $thumBox);
        $btnNext = $('#btnNext', $thumBox);
        $btnPrev.hide();
        $btnNext.hide();
        $btnThumbs = $thumBox.children('p');
        
        //
        $.thumbgallery.setContainer();
    };

    //
    $.thumbgallery.setContainer = function()
    {
        $animatingSlide = 1;
        $thumBox.show();
        
        $thumbs.css({'marginTop':$thumbBoxInner.height()+'px'});
        $.thumbgallery.setThumbsStyle();
        
        setTimeout(function(){
            $('li:first', $photoElm).css({'width':0, 'left':'475px'}).show()
            .animate({'left':'0', 'width':'950px'}, 1200, 'easeOutQuart', function(){
                $(this).css({'zIndex':$settings.zBase+5});
                $('img', $(this)).css({'width':'0'}).show().animate({'width':'950px'}, 500, function(){
                    $container.animate({'height':'350px'}, 800, function(){
                        for (var i = 0; i < $thumbs.length; i++) {
                            (function(arg){
                                window.setTimeout(function() {
                                    $thumbs.eq(arg).animate({'marginTop':0}, 500, 'easeInOutCubic');
                                }, i * 200);
                            })(i);
                            
                            if (i == $thumbs.length - 1) {
                                if ($thumbs.length >= $settings.thumbsNum) {
                                    window.setTimeout(function() {
                                        $btnThumbs.fadeIn(500);
                                        $animatingSlide = 0;
                                        $.thumbgallery.setThumbCarousel();
                                    }, (i+1) * 200);
                                } else {
                                    window.setTimeout(function() {
                                        $animatingSlide = 0;
                                    }, (i+1) * 200);
                                }
                                $.thumbgallery.setSlide();
                            }
                        }
                    });
                });
            });
        }, 500);
    }

    //setThumbSlide
    $.thumbgallery.setThumbCarousel = function()
    {
        $btnNext.click(function(){
            $btnPrev.hide();
            $btnNext.hide();
            
            if ($thumbElm.children().length > $settings.thumbsNum) {
                $thumbElm.animate({'left':'-'+$settings.thumbColW+'px'}, 500, 'easeInOutCubic', function(){
                    $('li:first', $thumbElm).appendTo($thumbElm);
                    $thumbElm.css({'left':0});
                    $btnPrev.show();
                    $btnNext.show();
                });
            } else {
                $('li:first', $thumbElm).clone(true).appendTo($thumbElm);
                $thumbElm.animate({'left':'-'+$settings.thumbColW+'px'}, 500, 'easeInOutCubic', function(){
                    $('li:first', $thumbElm).remove();
                    $thumbElm.css({'left':0});
                    $btnPrev.show();
                    $btnNext.show();
                });
            }
        });
        $btnPrev.click(function(){
            $btnPrev.hide();
            $btnNext.hide();
            
            if ($thumbElm.children().length > $settings.thumbsNum) {
                $('li:last', $thumbElm).prependTo($thumbElm);
                $thumbElm.css({'left':'-'+$settings.thumbColW+'px'});
                $thumbElm.animate({'left':0}, 500, 'easeInOutCubic', function(){
                    $btnPrev.show();
                    $btnNext.show();
                });
            } else {
                $('li:last', $thumbElm).clone(true).prependTo($thumbElm);
                $thumbElm.css({'left':'-'+$settings.thumbColW+'px'});
                $thumbElm.animate({'left':0}, 500, 'easeInOutCubic', function(){
                    $('li:last', $thumbElm).remove();
                    $btnPrev.show();
                    $btnNext.show();
                });
            }
        });
    }

    //setSlide
    $.thumbgallery.setSlide = function()
    {
        clearTimeout($slideTimer);
        $slideTimer = setTimeout(function(){
            $.thumbgallery.showPhoto($.thumbgallery.getShowIndex(true));
            $.thumbgallery.setSlide();
        }, 5000);
    }

    //getShowIndex
    $.thumbgallery.getShowIndex = function(is_next)
    {
        var currentIndex = $currentIndex;
        if (is_next) {
            var showIndex = currentIndex + 1;
        } else {
            var showIndex = currentIndex - 1;
        }
        if (showIndex >= $photos.length) {
            showIndex = showIndex - $photos.length;
        } else if (showIndex < 0) {
            showIndex = $photos.length + showIndex;
        }
        return showIndex;
    }

    //showPhoto
    $.thumbgallery.showPhoto = function(index)
    {
        if ($animatingSlide === 0 && $currentIndex != index) {
            $animatingSlide = 1;
            $currentIndex = index;
            
            $.thumbgallery.setThumbsStyle();
            
            var anims = ['curX', 'curY'];
            var method = anims[Math.floor(Math.random() * 2)];
            $.thumbgallery.anims[method](index);
            
        }
    }

    $.thumbgallery.anims = new Array();
    //curX
    $.thumbgallery.anims['curX'] = function(index)
    {
        var oldPhoto = $photos.not('li:hidden');
        if (oldPhoto.length) {
            $(oldPhoto).animate({'left':'475px', 'width':0}, 1200, 'easeOutQuart', function(){
                $(oldPhoto).hide().css({'zIndex':$settings.zBase,'left':'0','width':'950px'});
                $('img', $(oldPhoto)).hide();
            });
        }
        $photos.eq(index).css({'width':0, 'left':'475px'}).show()
        .animate({'left':'0', 'width':'950px'}, 1200, 'easeOutQuart', function(){
            $(this).css({'zIndex':$settings.zBase+5});
//            $('img', $(this)).fadeIn(1200, function(){
//                $animatingSlide = 0;
//                $.thumbgallery.setSlide();
//            });
            $('img', $(this)).css({'width':'0'}).show().animate({'width':'950px'}, 500, function(){
                $animatingSlide = 0;
                $.thumbgallery.setSlide();
            });
        });
    }

    //curY
    $.thumbgallery.anims['curY'] = function(index)
    {
        var oldPhoto = $photos.not('li:hidden');
        if (oldPhoto.length) {
            $(oldPhoto).show()
            .animate({'top':'150px', 'height':0}, 1200, 'easeOutQuart', function(){
                $(oldPhoto).hide().css({'zIndex':$settings.zBase,'top':'0','height':'300px'});
                $('img', $(oldPhoto)).hide();
            });
        }
        $photos.eq(index).css({'height':0, 'top':'150px'}).show()
        .animate({'top':'0', 'height':'300px'}, 1200, 'easeOutQuart', function(){
            $(this).css({'zIndex':$settings.zBase+5});
//            $('img', $(this)).fadeIn(1200, function(){
//                $animatingSlide = 0;
//                $.thumbgallery.setSlide();
//            });
            $('img', $(this)).slideDown(500, function(){
                $animatingSlide = 0;
                $.thumbgallery.setSlide();
            });
        });
    }




    //setThumbsStyle
    $.thumbgallery.setThumbsStyle = function()
    {
        $thumbs = $thumbElm.children();
        $thumbs.removeClass('currentThumb');
        $('#tgThumb_'+$currentIndex).addClass('currentThumb');
        $('#tgThumb_'+$currentIndex, $thumbElm).addClass('currentThumb');
        $.thumbgallery.setThumbStyle_off($thumbs);
        $.thumbgallery.setThumbStyle_on($('#'+$settings.thumbBoxID+' .currentThumb'));
        
        if ($thumbs.length > $settings.thumbsNum) {
            if ($thumbs.index($('.currentThumb')) >= $settings.thumbsNum && $btnNext.is(':visible')) {
                $btnNext.click();
            }
        }
    }

    //setThumbStyle_off
    $.thumbgallery.setThumbStyle_off = function($elm)
    {
//        $('.thumbLayer', $elm).hide();
        $elm.css({'opacity':'0.5'});
    }

    //setThumbStyle_on
    $.thumbgallery.setThumbStyle_on = function($elm)
    {
//        $('.thumbLayer', $elm).show();
        $elm.css({'opacity':'1'});
    }

    //setThumbStyle_hover
    $.thumbgallery.setThumbStyle_hover = function($elm)
    {
        $elm.css({'opacity':'1'});
    }

});