Ext.onReady(function(){

    Ext.QuickTips.init();
    
    
    // get the current URL
    var url = window.location.toString();
    //get the parameters
    url.match(/\?(.+)$/);
    var params = RegExp.$1;
    // split up the query string and store in an
    // associative array
    var params = params.split("&");
    var queryStringList = {};

    for(var i=0;i<params.length;i++)
    {
        var tmp = params[i].split("=");
        queryStringList[tmp[0]] = unescape(tmp[1]);
    }

    
    var catchPhrases = ['Indexing celebrity photos every minute','Advertise Here'];
    var currentCatchPhrase = 0; 
    
    var catchPhraseChanger = function() {
        document.getElementById('slogan').innerHTML = catchPhrases[currentCatchPhrase];
        currentCatchPhrase += 1;
        if(currentCatchPhrase == catchPhrases.length)
            currentCatchPhrase = 0;
        catchPhraseChanger.defer(10000,this)
    }
    
    catchPhraseChanger();
    
    
    
    var fromDate = '';
    var toDate = '';
    var order = queryStringList['order'];
   
    var celebrityNameStore = new Ext.data.JsonStore({
        url: '/getCelebrities',
        root: 'rows',
        id:'id',
        fields:['name','image_count']
    });
        
    
    var celebrityNameComboBox = new Ext.form.ComboBox({
        id: 'search-results',
        store: celebrityNameStore,
        header: false,
        minChars: 3,
        queryDelay: 200,
        displayField:'name',
        fieldLabel: 'Celebrity Name',
        //name: 'celebrityName',
        typeAhead: false,
        loadingText: 'Searching Celebrities...',
        //forceSelection: true,
        width: 200,
        //pageSize:10,
        //hideTrigger:true,
        queryParam: 'name',
        emptyText: 'Type a celebrity name...',
        //anchor:'90%',
        selectOnFocus: true,
        itemSelector: 'div.search-item',
        tpl: new Ext.XTemplate(
            '<tpl for="."><div class="search-item">',
            '{name} <font color="#AAAAAA">({image_count})</font>',
            '</div></tpl>'
            ),
        listeners: [{'blur' : function() {
                        fromDate = '';
                        toDate = '';
                        order = '';
                    }
              }]
        }
        
    );
    celebrityNameComboBox.setValue(queryStringList['celebrity']);

    
    var storeload = function() {
        imageStore.load({ 
            params: {"celebrity": celebrityNameComboBox.getValue(), "tag": searchTag, "fromdate": fromDate, "todate": toDate, "order": order}
        })
    };
    
    var defaultSortField = queryStringList['localsortfield'];
    if(defaultSortField == null || defaultSortField =='')
        defaultSortField = 'dt';
    var imageStore = new Ext.data.GroupingStore({
                    autoLoad: false,
                    groupOnSort: true,
                    url: '/getImages',
                    reader: new Ext.data.JsonReader({
                        root: 'rows',
                        id:'id'
                        }, Ext.data.Record.create([
                            'thumb', 'cel', 'tag', {name: 'dt', type: 'date'}, 'target'])
                    ),
                    sortInfo: {field: defaultSortField, direction: 'DESC'},
                    //groupField: 'cel',
                    listeners: { 'load': function() {
                        //if(celebrityNameComboBox.getValue() != '')
                        //    imageStore.sort('dt','DESC');
                        if(imageStore.getCount() == 0) {
                            celebrityNameComboBox.setValue('');
                            resetSearchTag();
                            fromDate = '';
                            toDate = '';
                            storeload();
                        }
                    }}
            });
    
    
    var searchTag = queryStringList['tag'];
    function changeSearchTag(item, checked) {
        if (checked && item.text != 'None') {
            searchTag = item.text;
        } else {
            searchTag = '';
        }
        fromDate = '';
        toDate = '';
        order = '';
    }
    
    

    storeload();
    
    var gridTemplate = new Ext.Template(
            '<div class="thumb-wrap" id="{name}">',
            '<div class="thumb">',
            '<a href="/recordViewAndRedirect?target={target}&thumb={thumb}&celeb_name={cel}" target="_blank"><img src="{thumb}" onError="this.style.display=\'none\'; window.open(\'/deleteDeadImageLink?thumb_url={thumb}\',\'deadLink\')" class="thumb-img" ext:qtip="<B>{cel}</B>"></a>',
            '</div>',
            '</div>'
    );
    
    gridTemplate.encodeURI = function(value) {
	return encodeURI(value);
    }
    
    gridTemplate.encodeURIComponent = function(value) {
    	return encodeURIComponent(value);
    }
    
    
    
    var newestAction = new Ext.Action({
                            tooltip: "Newest",
                            iconCls: "x-tbar-page-first",
                            //disabled: false,
                            handler: function() {
                                order = '';
                                fromDate = '';
                                toDate = '';    
                                storeload();
                            }
                        });
    
    var newerAction = new Ext.Action({
                        tooltip: "Newer",
                        iconCls: "x-tbar-page-prev",
                        //disabled: false,
                        handler: function() {
                            var range = imageStore.getRange();
                            var newestDate = range[0].get('dt');
                            for(i=0; i<range.length; i++) {
                                var curDate = range[i].get('dt');
                                if(curDate > newestDate)
                                    newestDate = curDate;
                            }
                            fromDate = Ext.util.Format.date(newestDate,"c");
                            toDate = '';
                            storeload();
                        }
                    });

    var olderAction = new Ext.Action({
                        tooltip: "Older",
                        iconCls: "x-tbar-page-next",
                        //disabled: false,
                        handler: function() {
                            var range = imageStore.getRange();
                            var oldestDate = range[0].get('dt');
                            for(i=0; i<range.length; i++) {
                                var curDate = range[i].get('dt');
                                if(curDate < oldestDate)
                                    oldestDate = curDate;
                            }
                            fromDate = '';
                            toDate = Ext.util.Format.date(oldestDate,"c");
                            storeload();
                        }
                });
              
             
                
    var breastsSearchTag = new Ext.menu.CheckItem({
        group: 'tag',
        checkHandler: changeSearchTag,
        checked: false,
        text: 'Breasts'
    });
    if(searchTag == 'Breasts')
        breastsSearchTag.setChecked(true);
        
    
    var buttSearchTag = new Ext.menu.CheckItem({
        group: 'tag',
        checkHandler: changeSearchTag,
        checked: false,
        text: 'Butt'
    });
    if(searchTag == 'Butt')
        buttSearchTag.setChecked(true);
    
    
    var eyesSearchTag = new Ext.menu.CheckItem({
        group: 'tag',
        checkHandler: changeSearchTag,
        checked: false,
        text: 'Eyes'
    });
    if(searchTag == 'Eyes')
        eyesSearchTag.setChecked(true);
    
    
    var legsSearchTag = new Ext.menu.CheckItem({
        group: 'tag',
        checkHandler: changeSearchTag,
        checked: false,
        text: 'Legs'
    });    
    if(searchTag == 'Legs')
        legsSearchTag.setChecked(true);
    
    
    var noneSearchTag = new Ext.menu.CheckItem({
        group: 'tag',
        checkHandler: changeSearchTag,
        checked: true,
        text: 'None',
        disabled: false
    });
    
    
    function resetSearchTag() {
        searchTag = '';
        noneSearchTag.setChecked(true);
        breastsSearchTag.setChecked(false);
        buttSearchTag.setChecked(false);
        eyesSearchTag.setChecked(false);
        legsSearchTag.setChecked(false);
    } 
    
    
    var toolBar = new Ext.Toolbar({
                items: ['Celebrity: ',
                    celebrityNameComboBox, ' ',
                    { 
                        text: 'Tags',
                        hidden: false,
                        tooltip: {text:'Frequently occuring attributes', title:'Tags'},
                        menu: [
                            breastsSearchTag,
                            buttSearchTag,
                            //eyesSearchTag,
                            //legsSearchTag,
                            '-', noneSearchTag, 
                            //'-', {
                            //   text: 'More to come...',
                            //   disabled: true
                            //}
                        ] 
                    },' ', {
                        text: 'Search', 
                        handler: function() {
                            order = '';
                            fromDate = '';
                            toDate = '';
                            newestAction.enable();
                            newerAction.enable();
                            olderAction.enable();
                            imageStore.setDefaultSort(defaultSortField, 'DESC');
                            imageStore.groupBy(defaultSortField);
                            storeload();
                        }
                    },'-',
                    
                    
                    new Ext.Toolbar.MenuButton({
                                text: 'Most Popular',
                                handler: function() {
                                        order = '-view_count';
                                        celebrityNameComboBox.setValue('');
                                        resetSearchTag();
                                        fromDate = '';
                                        toDate = '';
                                        newestAction.disable();
                                        newerAction.disable();
                                        olderAction.disable();
                                        imageStore.clearGrouping();
                                        storeload();
                                    },
                                //tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'},
                                menu : {items: [
                                            {
                                                text: 'of all time', handler: function() {
                                                        order = '-view_count';
                                                        celebrityNameComboBox.setValue('');
                                                        resetSearchTag();
                                                        fromDate = '';
                                                        toDate = '';
                                                        newestAction.disable();
                                                        newerAction.disable();
                                                        olderAction.disable();
                                                        imageStore.clearGrouping();
                                                        storeload();
                                                    }
                                            },
                                            {
                                                text: 'of this week', handler: function() {
                                                        order = '-rolling_view_count';
                                                        celebrityNameComboBox.setValue('');
                                                        resetSearchTag();
                                                        fromDate = '';
                                                        toDate = '';
                                                        newestAction.disable();
                                                        newerAction.disable();
                                                        olderAction.disable();
                                                        imageStore.clearGrouping();
                                                        storeload();
                                                    }
                                            }
                                    ]}
                    }),' ' ,  {
                        text: 'Contact Us', 
                        tooltip: 'Comments / Ideas: Send them in!',
                        handler: function() {
                            window.open("mailto:comments@slapticklepics.com");
                        }
                    },
                    "->", newestAction, newerAction, olderAction
                ]
            });
    
    var gridPanel = new Ext.grid.GridPanel({
            id:'images',
            region:'center',
            title: 'SlapStream - Browsing is for losers',
            //iconCls: 'icon-grid',
            //renderTo: document.body
            margins:'1 0 1 0',
            store: imageStore,
            loadMask: {msg: "Loading Pictures..."},
            header: false,
            columns: [
                {header: 'Celebrity', sortable: true, dataIndex: 'cel'},
                {header: 'Tag', sortable: true, dataIndex: 'tag'},
                {header: 'Date', sortable: true, dataIndex: 'dt', renderer: Ext.util.Format.dateRenderer('F j, Y, g:i a') }
            ],
    
            view: new Ext.ux.grid.GroupingExplorerView({
                rowTemplate: gridTemplate,
                forceFit:true,
                groupTextTpl: '{text} ({[values.rs.length]})'
            }),
            tbar: toolBar,
            bbar: new Ext.Toolbar({
                            items: ["->", newestAction, newerAction, olderAction]
            })
        });
        
        
    
    
   
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[
            new Ext.BoxComponent({ // raw
                region:'north',
                el: 'north',
                height:27 // 27
            }), {
                region:'west',
                contentEl:'west-ad',
                id:'west-ad-panel',
                frame: true,
                //title:'Ad',
                split:false,
                width: 75,
                collapsible: false,
                margins:'1 1 1 1',
                hidden: true
                //layout:'accordion',
                //layoutConfig:{
                //    animate:true
                //},
         
            }, {
                region:'east',
                contentEl:'east-ad',
                id:'east-ad-panel',
                border: false,
                bodyBorder: false,
                hideBorders: true,
                frame: true,
                //title:'Ad',
                split:false,
                width: 115,
                collapsible: false,
                margins:'1 1 1 1',
                hidden: true
                //layout:'accordion',
                //layoutConfig:{
                //    animate:true
                //},
         
            }, {
                region:'south',
                contentEl:'chat',
                //frame: true,
                border: false,
                bodyBorder: false,
                hideBorders: true,
                title:'Chat',
                hidden: true,
                split:true,
                //width: 100,
                collapsible: true,
                collapsed: true
                //margins:'1 1 1 1',
                //layout:'accordion',
                //layoutConfig:{
                //    animate:true
                //}
            },
            gridPanel
        ]
    });
});

function shortName(name){
   if(name.length > 15){
      return name.substr(0, 12) + '...';
   }
   return name;
};