drt.teaserband = {
    init : function(){
        this.container = $("#navi-teaser")[0];
        this.navi = $(".wrapper-navi .navi")[0];
        
        if(this.container === undefined){
            return null;
        }
        
        // baking item lists
        var ndx = 0;
        var segNdx = 0;
        var f_items = {};
        var scroll_mark = 0;
        $("#teaserband-all>li").each(function(i,el){
            var TB = drt.teaserband;
            var href = $(el).find('a')[0].href;
            
            // if current is not in featured already.
            if(f_items[href] === undefined){
                
                // create bobble every 4th item
                if(ndx%4 === 0 && $('#teaserband-'+ndx).length === 0){
                    TB.cur_seqence = drt.create({
                        nodeName : 'a',
                        href : '#'+ndx,
                        id : 'tbn'+ndx,
                        parentNode : TB.navi,
                        onclick : function(){
                            var myid = this.id.substr(3);
                            drt.teaserband.api.seekTo(myid);
                            return false;
                        }
                    });
                    segNdx++;
                }
                
                if ($(el).hasClass('featured')){
                    // add to featured if marked accordingly
                    f_items[href] = ndx;
                }
                // make item inside of block
                var cur_li = drt.create({
                    nodeName : 'LI',
                    id : ndx,
                    className : el.className,
                    parentNode : TB.container
                });
                cur_li.innerHTML = el.innerHTML;
                
               // for testing purposes
               //if ( href === location.href || (ndx===0 && location.href.indexOf('index.html') > 0)){
                if ( href.indexOf(location.pathname)>0 || (ndx===0 && location.href.indexOf('index.html') > 0)){
                    
                    // if current link points to currentlocation, remember scroll marks and mark 'current'
                    scroll_mark = ndx;
                    $(cur_li).addClass('current');
                    //console.log(ndx)
                    //$(cur_li).parent().addClass('current');
                }
                ndx++;
            }
        });
        $("#wrapper-teaser .items").width(ndx*200);
        
        // initialise scrolling
        $(".scrollable").scrollable({
            speed:2000,
            onSeek: function(event, i) {
                drt.teaserband.setNavi(i);
            }
        });
        this.api = $(".scrollable").data("scrollable");
        
        // center navi
        var aMargin = 410 - $("#wrapper-teaser .navi").width()/2;
        $("#wrapper-teaser .navi").css('margin-left', aMargin);
        
        // tooltips
        $(".icons-teaser li[title]").tooltip({ position: 'top right', offset: [-3, -15]});
        
        // li acts as clickable
        $('.scrollable li').click(function(){
            // make container act as its link
            if(window.mode !=='edit'){
                location.href = $(this).find('a')[0].href;
            }
        });
        
        // scroll to current
        this.api.seekTo(scroll_mark);
        this.api.getConf().speed = 500;
    },
    setNavi : function(i){
//        console.log(i)
        var blockId = 4*parseInt((i+1)/4,10);
//        console.log($(".wrapper-navi #tbn"+blockId)[0],"#tbn"+blockId)
        $(".wrapper-navi a").removeClass('active');
        $(".wrapper-navi #tbn"+blockId).addClass('active');
    }
};

$.tools.scrollable.conf.touch = 0;

$(function() {
    drt.teaserband.init();
   
    if($(".scrollable").length>0 && $.browser.webkit){
        $(".scrollable")[0].addEventListener("touchstart",function(e){drt.touchStart(e);},false); 
        $(".scrollable")[0].addEventListener("touchmove",function(e){drt.touchMove(e);},false);
        
        $(".scrollable").bind("onSeek", function(){ drt.scrolled();});
        
        var isTouching = false;
        var touchX = 0;        
        
        drt.scrolled = function(){
            isTouching = false;
        };
    
        drt.touchStart = function(event){
            touchX=event.touches[0].clientX;
            isTouching = false;
        };
        
        drt.touchMove = function(event){
            if(event.touches.length === 1 && isTouching === false) {
                var distance = touchX  - event.touches[0].clientX;
                if (Math.abs(distance) > 10) {
                    
                    var scrollable = $(".scrollable").data("scrollable");
                    
                    if (distance > 0) {
                        scrollable.move(4,1000);
                    } else {
                        if (scrollable.getIndex() > 4) {
                            scrollable.move(-4,1000);
                        } else {
                            scrollable.move(-scrollable.getIndex());
                        }
                    }
                    isTouching = true;
                }
            } else {
                if (event.touches.length === 1)  {
                    touchX=event.touches[0].clientX;
                }
            }
            
            event.preventDefault();
            return false;
        };
    }
});