/**
 * @include "/right_click_statistics/webapp/js/capinfo/ts/ebeijing/right_click_statistics/SliderWindow.js"
 */

Ext.namespace('capinfo.ts.ebeijing.right_click_statistics');

capinfo.ts.ebeijing.right_click_statistics.applicationUrlPrefix = '';

/** @return {capinfo.ts.ebeijing.right_click_statistics.MainWindow} */
capinfo.ts.ebeijing.right_click_statistics.mainWindowInstance = null;

capinfo.ts.ebeijing.right_click_statistics.buttonHeight = 24;

/** @return {Array} */
capinfo.ts.ebeijing.right_click_statistics.buttonsConfiguration = [//
{
  index : '0',
  text : '<div style="font-family:Verdana">Meaning</div>'
}//
, {
  index : '1',
  text : '<div style="font-family:Verdana">Text</div>'
}//
, {
  index : '2',
  text : '<div style="font-family:Verdana">Design</div>'
}//
, {
  index : '3',
  text : '<div style="font-family:Verdana">Picture</div>'
}//
, {
  index : '4',
  text : '<div style="font-family:Verdana">Other</div>'
}//
];

capinfo.ts.ebeijing.right_click_statistics.MainWindow = function() {
  // initialize slider window
  var sliderWindow = this.sliderWindow;
  if (sliderWindow == null) {
    sliderWindow = new capinfo.ts.ebeijing.right_click_statistics.SliderWindow();
    sliderWindow.setMainWindowInstance(this);
    this.sliderWindow = sliderWindow;
    // cache silder window instance
    capinfo.ts.ebeijing.right_click_statistics.sliderWindowInstance = sliderWindow;
  }
  
  var menuButtons = [];
  var buttonHeight = capinfo.ts.ebeijing.right_click_statistics.buttonHeight;
  var buttonsConfigration = capinfo.ts.ebeijing.right_click_statistics.buttonsConfiguration;
  for (var i = 0; i < buttonsConfigration.length; i++) {
    var buttonConfiguration = buttonsConfigration[i];
    var button = new Ext.Button({
          id : '' + buttonConfiguration.index,
          width : 188,
          height : buttonHeight,
          text : buttonConfiguration.text
        });
    
    menuButtons.push(button);
  };
  this.menuButtons = menuButtons;
  this.addAllMenuButtonsListener();
  
  // 主窗口去除所有button后的高度修正值
  var mainWindowButtonsOffset = 68;
  capinfo.ts.ebeijing.right_click_statistics.MainWindow.superclass.constructor.call(//
      this//
      , {
        width : 200,
        height : buttonHeight * buttonsConfigration.length + mainWindowButtonsOffset,
        title : '<div align="center" style="font-family:Verdana">Feedback</div>',
        border : false,
        closable : false,
        resizable : false,
        frame : true,
        items : menuButtons,
        buttonAlign : 'center',
        buttons : [//
            new Ext.Button({
                  text : '<div align="center" style="font-family:Verdana">submit</div>',
                  handler : this.submitButtonHandler,
                  scope : this
                })//
            , new Ext.Button({
                  text : '<div align="center" style="font-family:Verdana">cancel</div>',
                  handler : this.cancelButtonHandler,
                  scope : this
                })//
        ],
        tools : [{
              id : 'help',
              qtip : 'Get Help',
              handler : function(event, toolEl, panel) {
                window.open('http://www.ebeijing.gov.cn/Elementals/Feedback/t1077215.htm');
              }
            }]
      }//
  );
  
  this.addListener('move', this.moveListener, this);
};

Ext.extend(//
    capinfo.ts.ebeijing.right_click_statistics.MainWindow//
    , Ext.Window//
    , {
      // 当前点击位置X坐标
      thumbtackX : 0,
      setThumbtackX : function(x) {
        this.thumbtackX = x;
      },
      
      // 当前点击位置Y坐标
      thumbtackY : 0,
      setThumbtackY : function(y) {
        this.thumbtackY = y;
      },
      
      // 当前各个选项下的投票值
      /** @return {Array} */
      percentages : new Array(capinfo.ts.ebeijing.right_click_statistics.buttonsConfiguration.length),
      comments : new Array(capinfo.ts.ebeijing.right_click_statistics.buttonsConfiguration.length),
      
      // 当前mouseover的button的index
      currentButtonIndex : 0,
      getCurrentButtonPercentage : function() {
        return this.percentages[this.currentButtonIndex];
      },
      setCurrentButtonPercentage : function(percentage) {
        this.percentages[this.currentButtonIndex] = percentage;
      },
      getCurrentButtonComment : function() {
        return this.comments[this.currentButtonIndex];
      },
      setCurrentButtonComment : function(comment) {
        this.comments[this.currentButtonIndex] = comment;
      },
      
      /** @return {Ext.Button[]} */
      menuButtons : null,
      addAllMenuButtonsListener : function() {
        var buttons = this.menuButtons;
        if (buttons != null) {
          for (var i = 0; i < buttons.length; i++) {
            /** @return {Ext.Button} */
            var button = buttons[i];
            button.addListener(//
                'mouseover'//
                , this.mouseOverListener//
                , this//
                );
            
            var sliderWindow = this.sliderWindow;
            button.addListener(//
                'click'//
                , this.buttonClickListener//
                , this//
                );
          }
        }
      },
      removeAllMenuButtonsListener : function() {
        var buttons = this.menuButtons;
        if (buttons != null) {
          for (var i = 0; i < buttons.length; i++) {
            /** @return {Ext.Button} */
            var button = buttons[i];
            button.removeListener(//
                'mouseover'//
                , this.mouseOverListener//
                , this//
                );
          }
        }
      },
      
      /** @return {capinfo.ts.ebeijing.right_click_statistics.SliderWindow} */
      sliderWindow : null,
      setSliderWindow : function(sliderWindow) {
        this.sliderWindow = sliderWindow;
      },
      
      /**
       * @param {Ext.Button}
       * @param {Ext.EventObject}
       */
      buttonClickListener : function(button, e) {
        var sliderWindow = this.sliderWindow;
        sliderWindow.saveButtonHandler(button, e);
        this.mouseOverListener(button, e);
      },
      
      /**
       * @param {Ext.Button}
       * @param {Ext.EventObject}
       */
      mouseOverListener : function(button, e) {
        var sliderWindow = this.sliderWindow;
        
        // hide slider window for reset slider value
        sliderWindow.hide();
        
        // button index
        var buttonIndex = parseInt(button.getId());
        
        // save current button index
        this.currentButtonIndex = buttonIndex;
        
        // adjust slider window position
        this.adjustSliderWindowPosition(this);
        sliderWindow.show();
        
        // toggle button style
        this.toggleSelectedButton(buttonIndex);
      },
      
      adjustSliderWindowPosition : function(mainWindow) {
        var mainWindowX = mainWindow.x;
        var mainWindowY = mainWindow.y;
        var sliderWindow = this.sliderWindow;
        var buttonHeight = capinfo.ts.ebeijing.right_click_statistics.buttonHeight;
        if (sliderWindow != null) {
          var sliderWindowX = mainWindowX + mainWindow.width;
          var sliderWindowY = mainWindowY + 24 + this.currentButtonIndex * buttonHeight;
          if (sliderWindowX + sliderWindow.width > availWidth) {
            sliderWindowX = mainWindowX - sliderWindow.width;
          }
          // do not offset height
          // if (sliderWindowY + sliderWindow.height > availHeight) {
          // sliderWindowY = availHeight - sliderWindow.height;
          // }
          sliderWindow.setPosition(sliderWindowX, sliderWindowY);
        }
      },
      
      toggleSelectedButton : function(index) {
        var buttons = this.menuButtons;
        if (buttons != null) {
          for (var i = 0; i < buttons.length; i++) {
            var button = buttons[i];
            if (i == index) {
              button.toggle(true);
            } else {
              button.toggle(false);
            }
          }
        }
      },
      
      clearToggleSelectedButton : function() {
        this.toggleSelectedButton(-1);
      },
      
      submitButtonHandler : function() {
        var href = encodeURI(window.location.href);
        var screenWidth = window.screen.width;
        var screenHeihgt = window.screen.height;
        var windowInnerWidth = window.innerWidth;
        var windowInnerHeight = window.innerHeight;
        var documentWidth = Ext.getBody().getWidth();
        var documentHeight = Ext.getBody().getHeight();
        
        var url = String
            .format( //
                '{0}/business/submission/rmSubmissionPublicAction$addPublicSubmission.action?url={1}&screenWidth={2}&screenHeight={3}&windowInnerWidth={4}&windowInnerHeight={5}&documentWidth={6}&documentHeight={7}&x={8}&y={9}'//
                , capinfo.ts.ebeijing.right_click_statistics.applicationUrlPrefix//
                , href, screenWidth, screenHeihgt//
                , windowInnerWidth, windowInnerHeight//
                , documentWidth, documentHeight//
                , this.thumbtackX, this.thumbtackY//
            );
        
        // process percentages
        var percentages = this.percentages;
        for (var i = 0; i < percentages.length; i++) {
          var percentage = percentages[i];
          url += '&scores=' + percentage;
        }
        // process comments
        var comments = this.comments;
        for (var i = 0; i < comments.length; i++) {
          var comment = comments[i];
          url += '&comments=' + comment;
        }
        // add callback
        url += '&callback=?';
        // submit datas
        jQuery.getJSON(url);
        
        // show thanks infomations
        Ext.MessageBox.show({
              closable : false,
              modal : false,
              msg : '<div style="font-size: 15px; font-family:Verdana; font-weight: bold; text-align: center;">Thank You</div>',
              width : 192,
              fn : this.closeAllWindow,
              scope : this
            });
        
        // hide after 1 seconds
        var timeoutId = setTimeout('Ext.MessageBox.hide()', 1000);
        
        // clear toggle selected button
        this.clearToggleSelectedButton();
        
        // close all window
        this.closeAllWindow();
      },
      
      cancelButtonHandler : function() {
        // close all window
        this.closeAllWindow();
        // clear toggle selected button
        this.clearToggleSelectedButton();
        
      },
      
      // clear all opened windows
      closeAllWindow : function() {
        var mainWindow = capinfo.ts.ebeijing.right_click_statistics.mainWindowInstance;
        var sliderWindow = this.sliderWindow;
        // hide all window
        mainWindow.hide();
        if (sliderWindow != null) {
          sliderWindow.hide();
        }
        // clear variables
        mainWindow.resetAllVariables();
        
        // clear thumbtack
        capinfo.ts.ebeijing.right_click_statistics.clearThumbtack();
        
        // show document body title
        showDocumentBodyTitle();
      },
      
      // reset all variable
      resetAllVariables : function() {
        this.setThumbtackX(0);
        this.setThumbtackY(0);
        // reset all percentages
        var percentages = this.percentages;
        for (var i = 0; i < percentages.length; i++) {
          percentages[i] = 50;
        }
        // reset all comments
        var comments = this.comments;
        for (var i = 0; i < comments.length; i++) {
          comments[i] = '';
        }
      },
      
      moveListener : function(/* Ext.Component */component, x, y) {
        this.adjustSliderWindowPosition(this);
      }
    }//
);