Sanoma.Site.ipad = function(args) {

    var self =  this;
//    this.clickedButton = null;
    
    _init = function(args) {

        //look for deeplink      
        var deepLink = window.location.hash.match(/#!\/#(.*)/);
        
        //reset slider view
        jQ('.js-slider-container').scrollTo( 0 );
        //reset viewport
        jQ.scrollTo( 0 );
        
        //bind click handler
        jQ('#thumbs-container a').click(self.clickHandler);
        jQ('.ipad-arrow').click(self.clickHandler);
        
        
        //click if deeplink and matching content is found
        if(deepLink && jQ(deepLink).length) 
            jQ('#thumbs-container a[href$="'+deepLink[1]+'"]').click();
        
        //if no deeplink, open first    
        if(!deepLink)
            jQ('#thumbs-container a:first').click();       
        //remove loader layer
        jQ('#ipad-container .loader').remove();
        
    }

    this.clickHandler = function() {
        var contentId = this.href.match(/#.*/).shift();

        //check for id
        if (! contentId ) 
        return false;
//          alert('no content id')

        //check for matching content 
        if( !jQ(contentId).length )
        return false;
//        alert('no content')
        //disable active link
        var thumb = jQ('#thumbs-container a[href*='+contentId+']');
        if( thumb.hasClass('active') )  
        return false;
//         alert('already active')
        //animate arrow
        jQ('.active-arrow').animate({left:thumb.position().left},500,'easeInOutSine');

        //hide prev bubble, slide down & fade out,  reset to top after anim
        jQ('.content-bubble.active').removeClass('active')
                                    .animate(
                                        {left:'-320px',opacity:0,top:'+=180px'}
                                        ,300
                                        ,function() {
                                        jQ(this).css({top:0});                                 
                                        }
                                    );

        thumb.addClass('active').siblings('a').removeClass('active');

        //get next or first href and prev or last href
        var nextId = jQ('#thumbs-container .active').next('a').length > 0  ? 
                    jQ('#thumbs-container .active').next('a').attr('href') :
                    jQ('#thumbs-container a:first').attr('href') ;
                    
        var prevId = jQ('#thumbs-container .active').prev('a').length > 0 ? 
                    jQ('#thumbs-container .active').prev('a').attr('href') :
                    jQ('#thumbs-container a:last').attr('href') ;


        //update arrow hrefs
        jQ('#prev-app').attr('href',prevId);
        jQ('#next-app').attr('href',nextId);

        //slide image
        var scrollTime = 500;
        jQ('.js-slider-container').stop().scrollTo(contentId, scrollTime, { margin:true ,easing:'easeInOutQuart' });
        //move new bubble: left & fade in
        jQ(contentId+'-bubble').addClass('active').animate({left:'10px',opacity:1 },600);        
        //update address bar in an unobtrusive way (no scrolling)
        top.location.hash = '!/'+contentId;
        return false;

    }
    
    //autoinit
    _init();

}