// Used with permission
// http://www2.britxbox.co.uk/


Ext.BLANK_IMAGE_URL = "/lib/ext-2.2/resources/images/default/s.gif";

Ext.namespace('Xant');

Xant.us = function(){
    var obj = {
        ignoreNext: false,
        w: 450,
        h: 250,

        init: function() {
            Ext.History.init();
            this.tabs = new Ext.TabPanel({
//                renderTo: 'tabs',
                width: 750,
                height: 290,
                activeTab: 0,
                frame: false,
//                defaults:{ autoHeight: true },
                items:[
                    {contentEl:'about1', title: 'About', card: 'about' },
                    {contentEl:'projects1', title: 'Projects', card: 'projects' },
                    {contentEl:'contact1', title: 'Contact', card: 'contact' },
                    {contentEl:'links1', title: 'Links', card: 'links' }
                ]
            });
            this.panel = new Ext.Panel({
                renderTo: 'tabs',
                width: 750,
                type: 'fit',
                frame: true,
                items: this.tabs
            });
            this.tabs.on('tabChange', this.tabChange, this );
  
            this.box = Ext.get('cards');
            this.els = this.box.select('div.card', true);
            this.boxTL = this.box.getXY();
                
            this.box.on('click', this.handleBoxClick, this);
            this.box.on('DOMMouseScroll', this.handleScroll, this);
           
            /*
            this.controls = this.box.down('div.controls').fadeIn({ duration: 2 });
            this.controls.setXY([this.boxTL[0]+660, this.boxTLcards220], false);
            this.controls.on('click', this.handleControlClick, this);
            */

            this.els.each(function(el, ar, idx){
                el.addClassOnOver('over');
                el.show();
                /*
                var info = el.dom.getAttribute('xtitle');
                if ( info )
                new Ext.ToolTip({
                    target: el.dom,
                    title: 'Image Info',
                    width: 200,
                    html: info.replace( /\\n/, '<br>' )
                });
                */
            }, this);

            Ext.History.on('change', function(token) {
                if ( !token )
                    token = 'about';
                
                var idx = this.els.indexOf(document.getElementById('card-'+token));
                if ( idx != -1 ) {
                    this.focusOn(idx);
                    this.track( '/tab/'+token );
                }
            }, this);
            
            if ( window.location.hash && window.location.hash.match( /^#(.+)/ ) ) {
                var idx = this.els.indexOf(document.getElementById('card-'+RegExp.$1));
                if ( idx != -1 ) {
                    this.focusOn(idx);
                    this.track( '/tab/'+RegExp.$1 );
                }
            } else
                this.doDisplay(false);
        },

        track: function(id) {
            if ( window.pageTracker )
                window.pageTracker._trackPageview(id);
        },

        tabChange: function( tab ) {
            Ext.History.add(tab.activeTab.card);
//            var idx = this.els.indexOf(document.getElementById('card-'+tab.activeTab.card));
//            this.focusOn(idx);
//            this.track( '/tab/'+tab.activeTab.card );
        },

        handleScroll: function(event) {
            var ev = event.browserEvent;
            var delta;
            if (ev.wheelDelta) {
                // ie
                delta = ev.wheelDelta/120;
                // opera
                if ( Ext.isOpera )
                    delta = -delta;
            } else if (ev.detail) {
                // moz
                delta = -ev.detail/3;
            } 
            if (delta) {
                if ( delta < 0 )
                    this.next();
                else
                    this.previous();      
            }
            event.stopEvent();
        },

        calcPos: function(idx){
            this.boxTL = this.box.getXY();
            var w = 24, h = 24;
            return { width: this.w-((w*2)*idx),     height: this.h-((h*2)*idx),  x: this.boxTL[0]+(((w*7)*idx)-(w*idx)), y: this.boxTL[1]+(h*idx) };
            //old
            // 270,. 475, 620
            this.sizes = {
                '0' : { width: this.w,            height: this.h,         x: this.boxTL[0],     y: this.boxTL[1]    },
                '1' : { width: this.w-(60*1),     height: this.h-(48*1),  x: this.boxTL[0]+(200*1), y: this.boxTL[1]+(15*1) },
                '2' : { width: this.w-(60*2),     height: this.h-(48*2),  x: this.boxTL[0]+(200*2), y: this.boxTL[1]+(15*2) },
                '3' : { width: this.w-(60*3),     height: this.h-(48*3),  x: this.boxTL[0]+(200*3), y: this.boxTL[1]+(15*3) }
            };
            return this.sizes[idx];
        },

        handleControlClick: function(ev,el){
            if (el.alt)
                this[el.alt]();
        },

        handleBoxClick: function(ev, el){
            if (this.ignoreNext)
                return false;
            
            var p = Ext.get(el).up('div.card');
            if (!p)
                return;

            // get the idx of the clicked item, first one (main) is 0.
            var idx = this.els.indexOf(p);
            if(idx > 0) 
                this.focusOn(idx);
            else
                p.frame();
        },

        focusOn: function(idx) {
            for ( f=idx; f>0; f-- ) {
                var first = this.els.first();
                this.els.removeElement(first, false);
                this.els.add(first);
            }
            this.doDisplay(true);
        },

        animOver: function(el, idx) {
//            if ( idx == 0 )
//                el.frame();
            el.child('div').show();
            if (idx == 0)
                el.child('div.subheadline').show();
            this.ignoreNext = false;
        },

        next: function() {
            // pop off the first el in the array and put it on the end.
            // animate the first one off the screen, then unanimate to the end of the list.
            if (this.ignoreNext)
                return false;
            this.ignoreNext = true;
            // animate the first one off the page to the left
            var first = this.els.first();
            this.els.removeElement(first, false);
            this.doDisplay(true);
            this.els.add(first);
            this.setPos(first, 3, true);
        },

        previous: function() {
            if (this.ignoreNext)
                return false;
            this.ignoreNext = true;
            var last = this.els.last();
            this.els.removeElement(last, false);
            this.els.elements.splice(0,0,last);
            this.doDisplay(true);
        },
        
        doDisplay: function(anim) {
            var first = this.els.first();
            this.els.each(function(el, ar, idx){
                this.setPos(el, idx, anim);
            }, this);
            var tab = this.tabs.find('card', first.id.replace( /^card-/, '' ) );
            if ( tab[0] ) {
                this.tabs.setActiveTab( tab[0] );
            }
        },

        setPos: function(el, idx, anim) {
            anim = (anim) ? {
                easing: 'easeOut',
                duration: .4
            } : false;
            var animL = (anim) ? {
                easing: 'easeOut',
                duration: .4,
                callback: function(el){
                    this.animOver(el,idx)
                },
                scope: this
            } : {
                duration:0,
                callback: function(el){
                    this.animOver(el,idx);
                },
                scope: this
            };

            // hide text while it resizes. it looks much neater.
            el.child('div').hide();
            el.child('div.subheadline').hide();
            el.syncFx().scale(this.calcPos(idx).width, this.calcPos(idx).height, anim).moveTo(this.calcPos(idx).x, this.calcPos(idx).y, animL).removeClass(['p1','p2','p3','p4']).addClass('p'+(idx+1));
            el.first().scale(this.calcPos(idx).width, this.calcPos(idx).height, anim);
        }
    };
    obj.init();
    return obj;
};

Ext.onReady(function(){
//    Ext.QuickTips.init();
    window.Xant.app = new Xant.us();
});