(function($) {
    $.fn.thumbnailSlider = function(options) {
        var opts = $.extend({}, $.fn.thumbnailSlider.defaults, options);
        return this.each(function() {
            var $this 				= $(this),
            o 					= $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;

            var $ts_container		= $this.children("."+opts.ts_container_class),
            $ts_thumbnails		= $ts_container.children("."+opts.ts_thumbnails_class),
            $nav_elems			= $ts_container.children(opts.nav_element_selector).not($ts_thumbnails),
            total_elems			= $nav_elems.length,
            $ts_preview_wrapper         = $ts_thumbnails.children("."+opts.ts_preview_wrapper_class),
            $arrow				= $ts_thumbnails.children('span'),
            $ts_preview			= $ts_preview_wrapper.children("."+opts.ts_preview_class);

            /*
                                            calculate sizes for $ts_thumbnails:
                                            width 	-> width thumbnail + border (2*5)
                                            height 	-> height thumbnail + border + triangle height(6)
                                            top		-> -(height plus margin of 5)
                                            left	-> leftDot - 0.5*width + 0.5*widthNavDot 
                                                    this will be set when hovering the nav,
                                                    and the default value will correspond to the first nav dot	
             */
            var w_ts_thumbnails	= o.thumb_width + 2*5,
            h_ts_thumbnails	= o.thumb_height + 2*5 + 6,
            t_ts_thumbnails	= -(h_ts_thumbnails + 5),
            $first_nav		= $nav_elems.eq(0),
            l_ts_thumbnails	= $first_nav.position().left - 0.5*w_ts_thumbnails + 0.5*$first_nav.width();

            $ts_thumbnails.css({
                width	: w_ts_thumbnails + 'px',
                height	: h_ts_thumbnails + 'px',
                top		: t_ts_thumbnails + 'px',
                left	: l_ts_thumbnails + 'px'
            });

            /*
                                            calculate the top and left for the arrow of the tooltip
                                            top		-> thumb height + border(2*5)
                                            left	-> (thumb width + border)/2 -width/2
             */
            var t_arrow	= o.thumb_height + 2*5,
            l_arrow	= (o.thumb_width + 2*5) / 2 - $arrow.width() / 2;
            $arrow.css({
                left	: l_arrow + 'px',
                top		: t_arrow + 'px'
            });

            /*
                                            calculate the $ts_preview width -> thumb width times number of thumbs
             */
            $ts_preview.css('width' , total_elems*o.thumb_width + 'px');

            /*
                                            set the $ts_preview_wrapper width and height -> thumb width / thumb height
             */
            $ts_preview_wrapper.css({
                width	: o.thumb_width + 'px',
                height	: o.thumb_height + 'px'
            });

            //hover the nav elems
            $nav_elems.bind('mouseenter',function(){
                var $nav_elem	= $(this),
                idx			= $nav_elem.index();

                /*
                                                    calculate the new left
                                                    for $ts_thumbnails
                 */
                var new_left	= $nav_elem.position().left - 0.5*w_ts_thumbnails + 0.5*$nav_elem.width();

                $ts_thumbnails.stop(true)
                .show()	
                .animate({
                    left	: new_left + 'px'
                },o.speed,o.easing);				  

                /*
                                                    animate the left of the $ts_preview to show the right thumb 
                 */
                $ts_preview.stop(true)
                .animate({
                    left	: -idx*o.thumb_width + 'px'
                },o.speed,o.easing);

                //zoom in the thumb image if zoom is true
                if(o.zoom && o.zoomratio > 1){
                    var new_width	= o.zoomratio * o.thumb_width,
                    new_height	= o.zoomratio * o.thumb_height;

                    //increase the $ts_preview width in order to fit the zoomed image
                    var ts_preview_w	= $ts_preview.width();
                    $ts_preview.css('width' , (ts_preview_w - o.thumb_width + new_width)  + 'px');

                    $ts_preview.children().eq(idx).find('img').stop().animate({
                        width		: new_width + 'px',
                        height		: new_height + 'px'
                    },o.zoomspeed);
                }		

            }).bind('mouseleave',function(){
                //if zoom set the width and height to defaults
                if(o.zoom && o.zoomratio > 1){
                    var $nav_elem	= $(this),
                    idx			= $nav_elem.index();
                    $ts_preview.children().eq(idx).find('img').stop().css({
                        width	: o.thumb_width + 'px',
                        height	: o.thumb_height + 'px'	
                    });	
                }

                $ts_thumbnails.stop(true)
                .hide();

            }).bind('click',function(){
                var $nav_elem	= $(this),
                idx			= $nav_elem.index();

                o.onClick(idx);
            });

        });
    };
    $.fn.thumbnailSlider.defaults = {
        speed		: 100,//speed of each slide animation
        easing		: 'jswing',//easing effect for the slide animation
        thumb_width	: 75,//your photos width
        thumb_height: 75,//your photos height
        zoom		: false,//zoom animation for the thumbs
        zoomratio	: 1.3,//multiplicator for zoom (must be > 1)
        zoomspeed	: 15000,//speed of zoom animation
        onClick		: function(){return false;},//click callback,
        ts_container_class  : 'ts_container',
        ts_thumbnails_class : 'ts_thumbnails',
        nav_element_selector:'li',
        ts_preview_wrapper_class : 'ts_preview_wrapper',
        ts_preview_class    :'ts_preview'
    };
})(jQuery);