Ext.namespace('PaulKristoff');

var viewport = null;

PaulKristoff.ViewPort = function(config) {
    config = config || {};
    config.layout = 'border';
    config.contentEl = 'viewPort';
    config.items = [
      this.getNorth(),
      this.getSouth(),
      this.getEast(),
      this.getWest(),
      this.getCenter()
    ];
    PaulKristoff.ViewPort.superclass.constructor.call(this, config);
}


Ext.extend(PaulKristoff.ViewPort, Ext.Viewport, {


    getCenter: function(){

        var subtabHeights = 450;

        var photoTabs = {
            xtype: 'tabpanel',
            id: 'PhotosId',
            activeTab: 'homePhotoTab',
            bodyCssClass: 'backgroundBlack',
            headerCssClass: 'backgroundBlack',
            defaults:{
                height: subtabHeights,
                autoScroll: true
            },
            items: [{title: 'Home',
                    layout: 'border',
                    id:'homePhotoTab',
                    items: [{
                            region: 'north',
                            bodyCssClass: 'backgroundBlack',
                            id: 'photoHomeNorthId',
                            height: 50,
                            margins: '5 5 0 5',
                            bodyStyle: 'padding:10px;',
                            autoLoad: 'photography.html'
                        },{
                            xtype: 'panel',
                            bodyCssClass: 'backgroundBlack',
                            region: 'center',
                            id: 'photoHomeCenterId',
                            height: subtabHeights-50,
                            margins: '5 5 0 5',
                            bodyStyle: 'padding:10px;',
                            items: [{
                                    xtype: 'panel',
                                    id: 'imagePanelId',
                                    height: 345,
                                    width: 425,
                                    html: "<div id='photoImageCenterId'></div>"
                                },{
                                    xtype: 'panel',
                                    id: 'imagePaneNamelId',
                                    border: false,
                                    height: 20,
                                    width: 425,
                                    html: "<div id='photoImageNameCenterId'></div>"
                                }]
                        }
                        ]
                }]
            
        };

        var profTabs = {
            xtype: 'tabpanel',
            id: 'PhotosId',
            height: '100%',
            activeTab: 'introProfTabId',
            bodyCssClass: 'backgroundBlack',
            headerCssClass: 'backgroundBlack',
            cls: 'backgroundBlack',
            defaults: {
                height: '100%',
                autoScroll: true,
                cls: 'backgroundBlack'
            },
            items: [
                {title: 'Intro',
                    id: 'introProfTabId',
                    autoLoad: 'introProfessional.html'
                },{title: 'Java 2005-Present',
                    id:'javaTab',
                    autoLoad: 'teradataProfessional.html'
                },{
                    title: 'Smalltalk 1992-2005',
                    id: 'smalltalkId',
                    autoLoad: 'smalltalkProfessional.html'
                },{
                    title: 'Scheme 1983-1992',
                    id: 'schemeId',
                    autoLoad: 'schemeProfessional.html'
                }]

        };

        return {
            xtype: 'tabpanel',
            id: 'CenterId',
            region: 'center',
            width: '70%',
            height: '60%',
            activeTab: 'homeTab',
            bodyCssClass: 'backgroundBlack',
            headerCssClass: 'backgroundBlack',
            defaults: {
                autoScroll: true
            },
            items:[
                {title: 'Home', id:'homeTab', autoLoad: 'home.html'},
                {title: 'Profession',id:'profTab', items:[profTabs]},
                {title: 'Photography', id:'photTab', items:[photoTabs]},
                {title: 'Social Justice', id: 'socialTab', autoLoad:'socialJustice.html'}
            ]
        }
    },
    current: 0,
    updateImage: function () {
        var el = Ext.get('imagePanelId');
        el.fadeOut({ duration: 2});
        (function () {
            var image = this.images[this.current];
            if (Ext.isEmpty(image)){
                this.current = 0;
                image = this.images[this.current];

            }
            var imageTpl = new Ext.Template("<div><img class='imageDisplay' src='{url}' title='{name}' width='400' height='325'></div>");
            var imageName = new Ext.Template("<div class='backgroundBlack'>{shortname}</div>");
            var div = Ext.get("photoImageCenterId");
            var imageHtml = imageTpl.apply({url: image.url, name: image.name, shortname:image.shortname});
            div.dom.innerHTML = imageHtml;
            var divName = Ext.get("photoImageNameCenterId");
            var imageNameHtml = imageName.apply({url: image.url, name: image.name, shortname:image.shortname});
            divName.dom.innerHTML = imageNameHtml;
            this.current += 1;
            el.fadeIn({ duration: 2});
        }).defer(2000, this);
    },
    getNorth: function(){
       return {
            xtype: 'box',
            id: 'NorthId',
            region: 'north',
            height: '20%',
            html:"<div><h1 class='northfont'>Paul Kristoff</h1><img src='images/SunsetOverLakeJordan2.jpg' width='100%' height='100%'></div>"
        }
    },
    getSouth: function(){
        return {
                xtype: 'box',
                id: 'SouthId',
                region: 'south',
                split: true,
                height: '5%',
                margins: '0 0 0 0',
                autoEl: {
                    tag: 'div',
                    html:"<p> This website is powered by Ruby on Rails and Ext JS</p>"
                }
            }
    },
    getEast: function(){
       return {
            xtype: 'box',
            id: 'EastId',
            region: 'east',
                width: '15%',
            height: 'auto',
            html: "<div class='eastWest'>" +
                "<h1 style=''>Interests</h1>" +
                "<ul>" +
//                    "<li><a href='http://www.parkinson.org/'>NPF</a></li>" +
                    "<li><a href='http://www.thecaryingplace.org/'>The Carying Place</a></li>" +
                    "<li><a href='http://www.justfaith.org/'>JustFaith</a></li>" +
                    "<li><a href='http://rubyonrails.org/'>Ruby on Rails</a></li>" +
                    "<li><a href='http://www.extjs.com/'>Ext JS</a></li>" +
                    "<li><a href='http://http://clojure.org'>Clojure</a></li>" +
                "</ul>" +
                "</div>"
        }
    },
    getWest: function(){
       return {
            xtype: 'box',
            id: 'WestId',
            region: 'west',
            width: '15%',
            cls: 'borderstuff',
            height: 'auto',
            autoEl: {
                tag: 'div',
                html:"<ul class='eastWest'>" +
//                    "<li><a href='index.html'>Home</a></li>" +
                    "<li><a href='Resume - 2010.pdf'>Resume</a></li>" +
                    "<li><a href=# onclick='Ext.Msg.alert( \"FYI\", \"Under Repair\")'>Sudoko</a></li>" +
//                    "<li><a href='site.html'>Site Map</a></li>" +
//                    "<li><a href='http://paulkristoff.blogspot.com/'>Blog</a></li>" +
                    "<li><a href='http://prkristoff.zenfolio.com'>Paul Kristoff Photography</a></li>" +
//                    "<li><a href=''>Interesting Links</a></li>" +
                    "</ul>"
            }
        }
    }
})