ThumbSlider = function(settings){
    //PRIVATE VARIABLES
    var _this = this;
    
    var $ThumbSlider, $TargetCarouselWrapper, $TargetCarousel, $TempSlide, $SlideBg, $SlidePointImg, $SlideBorder;
    var $SlideContainerWrapper, $SlideContainer, $FinalSlides;
    var $NextDiv, $PrevDiv;
    var nThumbHeight, nSelectedIndex, nTotalSlides;
    var oTimeOutHandler, oMainSlider;
    
    //PRIVATE FUNCTIONS
    var init, setStyle;
    
    init = function(){
        settings = $.extend({}, ThumbSlider.defSettings, settings);
        nSelectedIndex = settings.defSelectedIndex;
        nThumbHeight = settings.thumbHeight;
        
        $ThumbSlider = $('.' + settings.container);
        $SlideContainer = $ThumbSlider.children();
        
        nTotalSlides = $SlideContainer.length;

        if(nSelectedIndex > nTotalSlides || nSelectedIndex < 0){
            nSelectedIndex = 1;
        }
        
        $SlideContainer.detach();
        
        $ThumbSlider.css({
            height: nThumbHeight * 2.5,
            overflow: 'hidden',
            position: 'relative'
        });
        
        $TargetCarouselWrapper = $('<div class="targetCarouselWrapper" />');
        $TargetCarouselWrapper.css({
            position: 'relative',
            top: '-' + nThumbHeight/3 + 'px',
            overflow: 'hidden'
        });
        $TargetCarouselWrapper.appendTo($ThumbSlider);
    
        $TargetCarousel = $('<div class="targetCarousel" />');
        $TargetCarousel.appendTo($TargetCarouselWrapper);
    
        $TempSlide = $('<div class="slide" />');
        $TempSlide.css({
            position: 'relative'
        });
    
        $SlidePointImg = $('<img class="pointer" src='+ settings.pointImgSrc +' alt="pointer"/> ');
        
        $SlidePointImg.css({
            top: '50%',
            position: 'absolute',
            zIndex: '15'
        });
        
        $SlideBg = $('<div class="slideBg" />');
        $SlideBg.css({
            position: 'absolute',
            width: '100%',
            height: '100%',
            top: 0,
            left: 0
        });
    
        $SlideBorder = $('<div class="slideBorder" />');
        $SlideBorder.css({
            height: '100%'
        });
        
        $SlideContainerWrapper = $('<div class="slideContainerWrapper" />');
        $SlideContainerWrapper.css({
            position: 'relative' ,
            overflow: 'hidden',
            zIndex: 5
        });
        
        $NextDiv = $('<div class="next" />');
        $NextDiv.css({
            position: 'absolute',
            height: nThumbHeight/2 + 25,
            width: '100%',
            zIndex: 10,
            bottom: 0,
            left: 0 
        });
        
        $PrevDiv = $('<div class="prev" />');
        $PrevDiv.css({
            position: 'absolute',
            height: nThumbHeight/2 + 30,
            width: '100%',
            zIndex: 10,
            top: 0,
            left: 0
        });
        
        $ThumbSlider.append($PrevDiv, $NextDiv);
        $SlideBg.append($SlidePointImg, $SlideBorder);
        $TempSlide.append($SlideBg, $SlideContainerWrapper);
        
        var i;
        for(i=0; i < nTotalSlides; i++){
            var $Slide = $TempSlide.clone();
            $Slide.find('.slideContainerWrapper').append($SlideContainer.eq(i));
            $Slide.appendTo($TargetCarousel);
        }
        
        $FinalSlides = $TargetCarousel.children();
        $FinalSlides.eq(nSelectedIndex - 1).addClass('selected');
        $FinalSlides.not('.selected').find('.slideBg').css('display', 'none');
        
        setStyle = function(){
            var $this = $(this);
            var nHeight = $('.selected .slideBorder', $ThumbSlider).height();
            var nOHeight = $('.selected .slideBorder', $ThumbSlider).outerHeight();
            var nBorder = nOHeight - nHeight;
            
            $('.slideBorder', $ThumbSlider).css({
                marginLeft: $this.width(),
                height: '100%'
            });
            
            $FinalSlides.css({
                padding: nBorder,
                height: nThumbHeight - nBorder
            });
            
            $('.slideContainerWrapper', $ThumbSlider).css({
                marginLeft: $this.width()
            });
            
            $('.pointer', $ThumbSlider).css({
                marginTop: -($this.height()/2)
            });
        }
        
        // set default direction of carousel to 'up' if we have not received "up" or "down" in settings
        if(settings.direction != 'up' && settings.direction != 'down'){
            settings.direction = "up"; 
        } 
        
        $FinalSlides.filter('.selected').find('img.pointer').load(setStyle);

        $TargetCarousel.carouFredSel({
            items: 3,
            auto: false,
            direction: settings.direction,
            scroll: {
                items: 1
            }
        });
        
        //Create Slidedetails Object
        oMainSlider = new FadeInOut({
            target: $('.' + settings.slideDetails),
            transitionTime: settings.transitionTime
        });
        
        oMainSlider.goToSlide(nSelectedIndex-1); // default slide on view port
        
        $TargetCarousel.trigger('slideTo', nSelectedIndex-2); // default slide selection
        
        // previous button
        $PrevDiv.click(function(){
            _this.prev();
        });
        
        //next button
        $NextDiv.click(function(){
            _this.next();
        });

        //start slideshow if we have autostart
        if(settings.autostart){
            _this.autoStart();
        }
    }

    //PUBLIC FUNCTIONS
    //
    // autostart function
    this.autoStart = function(){
        settings.autostart = true;
        oTimeOutHandler = window.setTimeout(function(){
            if(settings.direction == 'down'){
                _this.prev();
            }else{
            _this.next();
            }
        }, settings.interval * 1000);
    }

    //will stop auto timer
    this.autoStop = function(){
        settings.autostart = false;
        window.clearTimeout(oTimeOutHandler);
    }
    
    // restart Auto slideshow
    this.autoRestart = function(){
        _this.autoStop();
        _this.autoStart();
    }
    
    // go to next slide
    this.next = function(){
        if(settings.autostart){
            _this.autoRestart();
        }

        if(nSelectedIndex == nTotalSlides){
            nSelectedIndex = 0;
        }

        $TargetCarousel.trigger("next",{onAfter: function(){
            oMainSlider.goToSlide(nSelectedIndex);
            $FinalSlides.find('.slideBg').fadeOut(settings.transitionTime * 200);
            $FinalSlides.eq(nSelectedIndex++).find('.slideBg').fadeIn(settings.transitionTime * 200);
        },duration:500});


    }

    // go to previous slide
    this.prev = function(){
        if(settings.autostart){
            _this.autoRestart();
        }

        $TargetCarousel.trigger("prev",{onAfter: function(){
            nSelectedIndex--;

            if(nSelectedIndex == 0){
                nSelectedIndex = nTotalSlides;
            }
            
            oMainSlider.goToSlide(nSelectedIndex-1);
            $FinalSlides.find('.slideBg').fadeOut(settings.transitionTime * 200);
            $FinalSlides.eq(nSelectedIndex-1).find('.slideBg').fadeIn(settings.transitionTime * 200);
        },duration: 500});

    }

    init();
}

//default settings of slideshow..
ThumbSlider.defSettings = {
    container: "thumbSlider",
    slideDetails: 'slideDetails',
    thumbHeight: 130,
    defSelectedIndex: 3,
    autostart: true,
    interval: 5,
    transitionTime: 2,
    pointImgSrc: '',
    direction: 'down'
}

//Slide Details class
FadeInOut = function(settings){
    settings=$.extend({},settings);
    
    //PRIVATE VARIABLES
    var transitionTime = settings.transitionTime * 200;
    var $target = settings.target, $slides;
    var activeClass = "active";
    
    //PRIVATE FUNCITON
    var init;
    init = function(){
        $slides = $target.children();

        $slides.first().addClass(activeClass).css({
            "z-index":"105",
            "display":"block"
        });
    }

    //call to select given number of slide.
    this.goToSlide = function(ind){
        $slides.filter("."+activeClass).removeClass(activeClass).css("z-index","100").fadeOut(transitionTime);
        var curSlide = $($slides[ind]);
        curSlide.addClass(activeClass).css({
            "display":"none",
            "z-index":"105"
        }).fadeIn(transitionTime);
    }

    init();

};