/**
 * jQuery.ScrollableTab - Scrolling multiple tabs.
 * @copyright (c) 2010 Astun Technology Ltd - http://www.astuntechnology.com
 * Dual licensed under MIT and GPL.
 * Date: 28/04/2010
 * @author Aamir Afridi - aamirafridi(at)gmail(dot)com | http://www.aamirafridi.com
 * @version 1.0
 */
 
;(function($){
    //Global plugin settings
    var settings = {
        'animationSpeed' : 100, //The speed in which the tabs will animate/scroll
        'closable' : false, //Make tabs closable
        'resizable' : false, //Alow resizing the tabs container
        'resizeHandles' : 'e,s,se', //Resizable in North, East and NorthEast directions
        'loadLastTab':false, //When tabs loaded, scroll to the last tab - default is the first tab
        'easing':'swing' //The easing equation
    }
    
    $.fn.scrollabletab = function(options){
        //Check if scrollto plugin is available - (pasted the plugin at the end of this plugin)
        //if(!$.fn.scrollTo) return alert('Error:\nScrollTo plugin not available.');

        return this.each(function(){
            var    o = $.extend({}, settings, options), //Extend the options if any provided
            $tabs = $(this),
            $tabsNav = $tabs.find('.ui-tabs-nav'),
            $nav;//will save the refrence for the wrapper having next and previous buttons
            
            //Adjust the css class
            //$tabsNav.removeClass('ui-corner-all').addClass('ui-corner-top');
            $tabs.css({'position':'relative'});
            //$tabsNav.css('position','inherit');
                        
            //Wrap inner items
            $tabs.wrap('<div id="stTabswrapper" class="stTabsMainWrapper" style="position:relative"/>').find('.ui-tabs-nav').css('overflow','hidden').wrapInner('<div class="stTabsInnerWrapper" style="width:30000px"><span class="stWidthChecker"/></div>');
            
            var $widthChecker = $tabs.find('.stWidthChecker'),
                $itemContainer = $tabs.find('.stTabsInnerWrapper'),
                $tabsWrapper = $tabs.parents('#stTabswrapper').width($tabs.outerWidth(true));
                //Fixing safari bug
                if($.browser.safari)
                {
                    $tabsWrapper.width($tabs.width()+6);
                }
                //alert($tabsWrapper.width());
            if(o.resizable)
            {
                if(!!$.fn.resizable)
                {
                    $tabsWrapper.resizable({
                        minWidth : $tabsWrapper.width(),
                        maxWidth : $tabsWrapper.width()*2,
                        minHeight : $tabsWrapper.height(),
                        maxHeight : $tabsWrapper.height()*2,
                        handles : o.resizeHandles,
                        alsoResize: $tabs,
                        //start : function(){  },
                        resize: function(){
                            $tabs.trigger('resized');
                        }
                        //stop: function(){ $tabs.trigger('scrollToTab',$tabsNav.find('li.ui-tabs-selected')); }
                    });
                }
                else
                {
                    alert('Error:\nCannot be resizable because "jQuery.resizable" plugin is not available.');
                }
            }
            

            //Add navigation icons
                //Total height of nav/2 - total height of arrow/2
            var arrowsTopMargin = (parseInt(parseInt($tabsNav.innerHeight(true)/2)-8)),
                arrowsCommonCss={'cursor':'pointer','z-index':1000,'position':'absolute','top':3,'height':$tabsNav.outerHeight()-($.browser.safari ? 2 : 1)};
            $tabsWrapper.prepend(
              $nav = $('<div/>')
                      .disableSelection()
                    .css({'position':'relative','z-index':3000,'display':'none'})
                    .append(
                        $('<span/>')
                            .disableSelection()
                            .attr('title','Previous tab')
                            .css(arrowsCommonCss)
                            .addClass('ui-state-active ui-corner-tl ui-corner-bl stPrev stNav')
                            .css('left',3)
                            .append($('<span/>').disableSelection().addClass('ui-icon ui-icon-carat-1-w').html('Previous tab').css('margin-top',arrowsTopMargin))
                            .click(function(){
                                //Check if disabled
                                if($(this).hasClass('ui-state-disabled')) return;
                                //Just select the previous tab and trigger scrollToTab event
                                prevIndex = $tabsNav.find('li.ui-tabs-selected').prevAll().length-1
                                //Now select the tab
                                $tabsNav.find('li').eq(prevIndex).find('a').trigger('click');
                                return false;
                            }),
                        $('<span/>')
                            .disableSelection()
                            .attr('title','Next tab')
                            .css(arrowsCommonCss)
                            .addClass('ui-state-active ui-corner-tr ui-corner-br stNext stNav')
                            .css({'right':3})
                            .append($('<span/>').addClass('ui-icon ui-icon-carat-1-e').html('Next tab').css('margin-top',arrowsTopMargin))
                            .click(function(){
                                //Just select the previous tab and trigger scrollToTab event
                                nextIndex = $tabsNav.find('li.ui-tabs-selected').prevAll().length+1
                                //Now select the tab
                                $tabsNav.find('li').eq(nextIndex).find('a').trigger('click');
                                return false;
                            })
                    )
            );
            
            //Bind events to the $tabs
            $tabs
            .bind('tabsremove', function(){ 
                  $tabs.trigger('scrollToTab').trigger('navHandler').trigger('navEnabler');
            })
            .bind('addCloseButton',function(){
                //Add close button if require
                if(!o.closable) return;
                $(this).find('.ui-tabs-nav li').each(function(){
                    if($(this).find('.ui-tabs-close').length>0) return; //Already has close button
                    var closeTopMargin = parseInt(parseInt($tabsNav.find('li:first').innerHeight()/2,10)-8);
                    $(this).disableSelection().append(
                        $('<span style="float:left;cursor:pointer;margin:'+closeTopMargin+'px 2px 0 -11px" class="ui-tabs-close ui-icon ui-icon-close" title="Close this tab"></span>')
                            .click(function()
                            {
                                $tabs.tabs('remove',$(this).parents('li').prevAll().length);
                                //If one tab remaining than hide the close button
                                if($tabs.tabs('length')==1)
                                {
                                    $tabsNav.find('.ui-icon-close').hide();
                                }
                                else
                                {
                                    $tabsNav.find('.ui-icon-close').show();
                                }
                                //Call the method when tab is closed (if any)
                                if($.isFunction(o.onTabClose))
                                {
                                    o.onTabClose();
                                }
                                return false;
                            })
                    );
                    //Show all close buttons if any hidden
                    $tabsNav.find('.ui-icon-close').show();
                });
            })
            .bind('tabsadd',function(event){
                //Select it on Add
                $tabs.tabs('select',$tabs.tabs('length')-1);
                //Now remove the extra span added to the tab (not needed)
                $lastTab = $tabsNav.find('li:last');
                if($lastTab.find('a span').length>0) $lastTab.find('a').html($lastTab.find('a span').html());
                //Move the li to the innerwrapper
                $lastTab.appendTo($widthChecker);
                //Scroll the navigation to the newly added tab and also add close button to it
                $tabs
                    .trigger('addCloseButton')
                    .trigger('bindTabClick')
                    .trigger('navHandler')
                    .trigger('scrollToTab');
            })//End tabsadd
            .bind('addTab',function(event,label,content){
                //Generate a random id
                var tabid = 'stTab-'+(Math.floor(Math.random()*10000));
                //Append the content to the body
                $('body').append($('<div id="'+tabid+'"/>').append(content));
                //Add the tab
                $tabs.tabs('add','#'+tabid,label);
            })//End addTab
            .bind('bindTabClick',function(){
                //Handle scroll when user manually click on a tab
                $tabsNav.find('a').click(function(){
                    var $liClicked = $(this).parents('li');
                    var navWidth = $nav.find('.stPrev').outerWidth(true);
                    //debug('left='+($liClicked.offset().left)+' and tabs width = '+ ($tabs.width()-navWidth));
                    if(($liClicked.position().left-navWidth)<0)
                    {
                        $tabs.trigger('scrollToTab',[$liClicked,'tabClicked','left'])
                    }
                    else if(($liClicked.outerWidth()+$liClicked.position().left)>($tabs.width()-navWidth))
                    {
                        $tabs.trigger('scrollToTab',[$liClicked,'tabClicked','right'])
                    }
                    //Enable or disable next and prev arrows
                    $tabs.trigger('navEnabler');
                    return false;
                });
            })
            //Bind the event to act when tab is added
            .bind('scrollToTab',function(event,$tabToScrollTo,clickedFrom,hiddenOnSide){
                //If tab not provided than scroll to the last tab
                $tabToScrollTo = (typeof $tabToScrollTo!='undefined') ? $($tabToScrollTo) : $tabsNav.find('li.ui-tabs-selected');
                //Scroll the pane to the last tab
                var navWidth = $nav.is(':visible') ? $nav.find('.stPrev').outerWidth(true) : 0;
                //debug($tabToScrollTo.prevAll().length)
                
                offsetLeft = -($tabs.width()-($tabToScrollTo.outerWidth(true)+navWidth+parseInt($tabsNav.find('li:last').css('margin-right'),10)));
                offsetLeft = (clickedFrom=='tabClicked' && hiddenOnSide=='left') ? -navWidth : offsetLeft;
                offsetLeft = (clickedFrom=='tabClicked' && hiddenOnSide=='right') ? offsetLeft : offsetLeft;
                //debug(offsetLeft);
                var scrollSettings = { 'axis':'x', 'margin':true, 'offset': {'left':offsetLeft}, 'easing':o.easing||'' }
                //debug(-($tabs.width()-(116+navWidth)));
                try{
                  $tabsNav.scrollTo($tabToScrollTo,o.animationSpeed,scrollSettings);
                } catch(e) {}
            })
            .bind('navEnabler',function(){
                setTimeout(function(){
                    //Check if last or first tab is selected than disable the navigation arrows
                    var isLast = $tabsNav.find('.ui-tabs-selected').is(':last-child'),
                        isFirst = $tabsNav.find('.ui-tabs-selected').is(':first-child'),
                        $ntNav = $tabsWrapper.find('.stNext'),
                        $pvNav = $tabsWrapper.find('.stPrev');
                    //debug('isLast = '+isLast+' - isFirst = '+isFirst);
                    if(isLast)
                    {
                        $pvNav.removeClass('ui-state-disabled');
                        $ntNav.addClass('ui-state-disabled');
                    }
                    else if(isFirst)
                    {
                        $ntNav.removeClass('ui-state-disabled');
                        $pvNav.addClass('ui-state-disabled');
                    }
                    else
                    {
                        $ntNav.removeClass('ui-state-disabled');
                        $pvNav.removeClass('ui-state-disabled');
                    }
                },o.animationSpeed);
            })
            //Now check if tabs need navigation (many tabs out of sight)
            .bind('navHandler',function(){
                //Check the width of $widthChecker against the $tabsNav. If widthChecker has bigger width than show the $nav else hide it
                if($widthChecker.width()>$tabsNav.width())
                {
                    $nav.show();
                    //Put some margin to the first tab to make it visible if selected
                    $tabsNav.find('li:first').css('margin-left',$nav.find('.stPrev').outerWidth(true));
                }
                else
                {
                    $nav.hide();
                    //Remove the margin from the first element
                    $tabsNav.find('li:first').css('margin-left',0);                    
                }
            })
            .bind('tabsselect', function() {
                //$tabs.trigger('navEnabler');
            })
            .bind('resized', function() {
                $tabs.trigger('navHandler');
                $tabs.trigger('scrollToTab',$tabsNav.find('li.ui-tabs-selected'));
            })
            //To add close buttons to the already existing tabs
            .trigger('addCloseButton')
            .trigger('bindTabClick')
            //For the tabs that already exists
            .trigger('navHandler')
            .trigger('navEnabler');
            
            //Select last tab if option is true
            if(o.loadLastTab)
            {
                setTimeout(function(){$tabsNav.find('li:last a').trigger('click')},o.animationSpeed);
            }
        });
        
        //Just for debuging
        function debug(obj)
        {console.log(obj)}
    }
})(jQuery);



/**
 * jQuery.ScrollTo - Easy element scrolling using jQuery.
 * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
 * Dual licensed under MIT and GPL.
 * Date: 5/25/2009
 * @author Ariel Flesler
 * @version 1.4.2
 *
 * http://flesler.blogspot.com/2007/10/jqueryscrollto.html

;(function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
*/