Ext.onReady(function() {



  Ext.select('.naviPoint').on('click', function(a,b) {
      Ext.select('.active').addClass('inactive');
      Ext.select('.active').removeClass('active');
      Ext.get('mainText' + b.id.slice(-1)).addClass('active');
      Ext.get('mainText' + b.id.slice(-1)).removeClass('inactive');
      Ext.select('.naviPoint').addClass('navInactive');
      Ext.get(b).radioClass('navActive');
      Ext.get(b).removeClass('navInactive');
  });

  var html = '<b><img src="homepage/images/small_comment.png" style="margin-right: 7px;"/><div class="divCommentUser"><a href="mailto:{inputText}">{username}</a></div></b><br />{message}<br /><br /><div class="divCommentDate">{comment_date}</div><br /><div class="space"></div><br>';
  var tpl = new Ext.Template(html);
    tpl.compile();
    
  var inputTextBook = '<a href="{inputTextBook}"><img src="homepage/images/email.png" class="emailIcon" alt="Du willst das wir für dich spielen ? Schreib uns!"></a>';
  var tpl2 = new Ext.Template(inputTextBook);
    tpl2.compile();
    
    tpl2.append('inputTextBook', {
      inputTextBook: 'mailto:booking@flashover.info'
    });
    
    tpl2.append('inputTextBook2', {
      inputTextBook: 'mailto:booking@flashover.info'
    });

  var comments;
  var offset_param = 5;
  var limit_param = 0;
  var count_entries = 0;
  var win;

  Ext.select('.pagingBarMinus').hide();

  commentCall(5, 0, tpl);

  Ext.select('.pagingBarMinus').on('click', function() {
      limit_param-=5;
      if(limit_param <= 0) {
        limit_param = 0;
      } 
      commentCall(offset_param, limit_param, tpl);
  });

  Ext.select('.pagingBarPlus').on('click', function() {
      limit_param+=5;
      commentCall(offset_param, limit_param, tpl);
  });

  
  Ext.select('.rockComment').on('click', function(a,b) {
      if(!win){
            win = new Ext.Window({
                renderTo: Ext.getBody(),
                layout:'fit',
                width:400,
                height:250,
                closeAction:'hide',
                plain: true,
                items: new Ext.FormPanel({
                  id: 'commentForm',
                  frame: true,
                  url: 'homepage/php/comments.php',
                  defaults: {width: 230},
                  defaultType: 'textfield',
                  items: [
                    {
                      fieldLabel: 'eMail - hier bitte NICHTS eintragen',
                      name: 'email',
                      hidden: true
                    },
                    {
                      fieldLabel: 'Name',
                      id: 'userName',
                      name: 'userName'
                    },
                    {
                      fieldLabel: 'E-Mail Adresse',
                      name: 'userEmail'
                    },
                    {
                      fieldLabel: 'Nachricht',
                      xtype: 'textarea',
                      name: 'message'
                    },
                    {
                      fieldLabel: 'Hinweis',
                      id: 'errorMessage',
                      xtype: 'displayfield',
                      hidden: true
                    }
                  ],
                  onSubmit: function(){
                      Ext.getCmp('commentForm').form.submit({
                          success: function(a,b){
                                limit_param = 0;
                                commentCall(offset_param, limit_param, tpl);
                                win.hide();
                          },
                          failure: function() {
                            Ext.getCmp('commentForm').getComponent('errorMessage').setValue("Nur ein Kommentar pro Minute ist erlaubt, sonst besteht der Verdacht auf Spam."); 
                            Ext.getCmp('commentForm').getComponent('errorMessage').show();
                          }
                      });
                    }
                }),

                buttons: [{
                    text:'Submit',
                    type: 'submit',
                    handler: Ext.getCmp('commentForm').onSubmit
                },{
                    text: 'Close',
                    handler: function(){
                        win.hide();
                    }
                }]
            });
        } else {
          Ext.getCmp('commentForm').form.reset();
          Ext.getCmp('commentForm').getComponent('errorMessage').hide();
        }
        win.show(this);

  });


});

function commentCall(offset_param, limit_param, template) {

        Ext.Ajax.request({
            url : 'homepage/php/comments_load.php',
            params : { action : 'getAll', offset: offset_param, limit: limit_param},
            method: 'GET',
            success: function ( result, request) {
              comments = Ext.decode(result.responseText).comments;
              

            Ext.select('.rockComments').replaceWith({
              cls: 'rockComments',
              id: 'rockComments',
              tag: 'div'
            });
              
            
            
             Ext.each(comments, function(comment){
             var commentMessage = "";
             if(comment.message.length >= 300) {
                commentMessage = comment.message.substr(0,300) + '... <span id="showMore' + comment.id +'" class="showMore">alles anzeigen</span>';
             } else {
                commentMessage = comment.message;
             }
             
             var commentUsername = "";
             if(comment.username.length >= 50) {
                commentUsername = comment.username.substr(0,50) + '...';
             } else {
                commentUsername = comment.username;
             }
            
             
             template.append('rockComments', {
                comment_date: comment.comment_date,
                inputText: comment.inputText,
                username: commentUsername,
                message: commentMessage
             });
                
                
              if(comment.message.length >= 300) { 
                Ext.get('showMore'+comment.id).on('click', function() { 
                    Ext.MessageBox.alert('Kommentar von ' + comment.username + ' | ' + comment.comment_date, comment.message);
                });
              }
                
                
            });
              
               
              
              count_entries = Ext.decode(result.responseText).count;
              count_all_entries = Ext.decode(result.responseText).countAll.total;
              
              if(count_all_entries <= 5) {
                Ext.select('.pagingBarPlus').hide();
                Ext.select('.pagingBarMinus').hide();
              } else if(count_all_entries >=5 && request.params.limit == 0) {
                Ext.select('.pagingBarPlus').show();
                Ext.select('.pagingBarMinus').hide();
              } else if(count_entries < 5 && count_all_entries >=5 && request.params.limit != 0) {
                Ext.select('.pagingBarPlus').hide();
                Ext.select('.pagingBarMinus').show();
              } else {
                Ext.select('.pagingBarPlus').show();
                Ext.select('.pagingBarMinus').show();
              }
              
              

            },
            failure: function ( result, request) {
                Ext.MessageBox.alert('Failed', result.responseText);
            }



});









 }