﻿function InitEditor(textAreaID, editorStylesheetPath, emoticonPath, afterRender)
{
  var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event;
  
  var myConfig = {
      height: '200px',
      width: '100%',
      dompath: false,
      autoHeight: true
  };

  var editor = new YAHOO.widget.Editor(textAreaID, myConfig);
  
  if (afterRender != null) // is function)
  {
    editor.on("afterRender", afterRender);
  }
  
  editor.on('editorContentLoaded', function() {
      var head = this._getDoc().getElementsByTagName('head')[0];
      var link = this._getDoc().createElement('link');
      link.setAttribute('rel', 'stylesheet');
      link.setAttribute('type', 'text/css');
      link.setAttribute('href', editorStylesheetPath);
      head.appendChild(link);
  }, editor, true);
  
  //InitYouTube(editor);  
  InitEmoticons(editor, emoticonPath);
  
  editor._defaultToolbar.titlebar = false;
  editor.render();
  return editor;
}

function InitEmoticons(myEditor, emoticonPath)
{
    YAHOO.util.Event.onAvailable('iconMenu', function() {
        YAHOO.log('onAvailable: (#iconMenu)', 'info', 'example');
        YAHOO.util.Event.on('iconMenu', 'click', function(ev) {
            var tar = YAHOO.util.Event.getTarget(ev);
            if (tar.tagName.toLowerCase() == 'img') {
                var img = tar.getAttribute('src', 2);
                YAHOO.log('Found an icon, fire inserticonClick Event', 'info', 'example');
                var _button = this.toolbar.getButtonByValue('inserticon');
                _button._menu.hide();
                this.toolbar.fireEvent('inserticonClick', { type: 'inserticonClick', icon: img });
            }
            YAHOO.util.Event.stopEvent(ev);
        }, myEditor, true);
    });

  myEditor.on('toolbarLoaded', function() {
        //Setup the config for the new "Insert Icon" button
        var imgConfig = {
            type: 'push', //Using a standard push button
            label: 'Insert Icon', //The name/title of the button
            value: 'inserticon', //The "Command" for the button            
            menu: function() {
                //Create the Overlay instance we are going to use for the menu            
                var menu = new YAHOO.widget.Overlay('inserticon', {
                    width: '165px',
                    height: '210px',
                    visible: false
                });
                var str = '';
                for (var row = 0; row <= 2; row++) {
                    for (var col = 0; col <= 9; col++) {
                        str += '<img src="' + emoticonPath + 'emoticon' + row + col + '.gif">';
                    }
                }
                //Setting the body of the container to our list of images.
                menu.setBody('<div id="iconMenu">' + str + '</div>');
                menu.beforeShowEvent.subscribe(function() {
                    //Set the context to the bottom left corner of the Insert Icon button  
                    menu.cfg.setProperty('context', [
                        myEditor.toolbar.getButtonByValue('inserticon').get('element'),
                        'tl',
                        'bl'
                    ]);
                });            
                menu.render(document.body);
                menu.element.style.visibility = 'hidden';
                //return the Overlay instance here                
                return menu;
            }() //This fires the function right now to return the Overlay Instance to the menu property..            
        };
        //Add the new button to the Toolbar Group called insertitem.        
        myEditor.toolbar.addButtonToGroup(imgConfig, 'insertitem');

        myEditor.toolbar.on('inserticonClick', function(ev) {
            var icon = '';
            this._focusWindow();
            if (ev.icon) {
                icon = ev.icon;
            }
            this.execCommand('inserthtml', '<img src="' + icon + '" border="0">');
        }, myEditor, true);

  });
}

function InitYouTube(myEditor)
{
  myEditor.on('toolbarLoaded', function() {        
      var youTubeMovie = {
       showDlg : false,         
       dlg : null,         
       dialog_config : { width: '400px', height: 'auto', fixedcenter: true, constraintoviewport: true, visible: false, draggable: false, modal: true },         
       handleCancel : function() {      
        this.cancel();
        youTubeMovie.showDlg = false;
       },         
       handleSubmit : function() {      
        if (!this.getData().ymovie) return false;
        youTubeMovie.showDlg = false;
        var fl_url = this.getData().ymovie.match(/(youtube).*(v=)([^&]*)/);
        fl_url = fl_url[3];
        fl_url = "http://www.youtube.com/v/" + fl_url;      
        var html = '<br><br><div style="margin: auto; text-align: center; background: #eee; width: 425px; height: 350px;"><object width="425" height="350"><param name="movie" value="' + fl_url + '"></param><param name="wmode" value="transparent"></param><embed src="' + fl_url + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object></div><br><br>';
        myEditor.execCommand('inserthtml', html);      
        this.cancel();
       },         
       createDialog: function() {      
        var youtubeEle = document.createElement('div');          
        youtubeEle.setAttribute('id', 'youTubeDlg');
        youtubeEle.innerHTML = '<div class="hd">Insert YouTube Movie</div><div class="bd"><form name="youTubeForm" class="text"><br/>YouTube Movie URL: <input type="text" name="ymovie" size="30"/><br /></form></div>';
        YAHOO.util.Dom.setStyle(youtubeEle, 'visibility', 'hidden');
        document.body.appendChild(youtubeEle);      
        youTubeMovie.dlg = new YAHOO.widget.Dialog(youtubeEle, youTubeMovie.dialog_config);
        youTubeMovie.dlg.cfg.queueProperty("buttons", [ { text:"Submit", handler:youTubeMovie.handleSubmit, isDefault:true }, { text:"Cancel", handler:youTubeMovie.handleCancel } ]);
        youTubeMovie.dlg.render(document.body);
       },         
       toggle : function() {      
        youTubeMovie.showDlg = !youTubeMovie.showDlg;
        if (youTubeMovie.showDlg) {           
         youTubeMovie.dlg.show();
        } else {           
         youTubeMovie.dlg.hide();
        }
       }
      };    
      
      myEditor.toolbar.addButtonToGroup({ type: 'push', label: 'Insert YouTube movie', value: 'youTube' }, 'insertitem');        
          
      myEditor.toolbar.on('youTubeClick', function() {            
          youTubeMovie.toggle();
      });    
      
      youTubeMovie.createDialog();  

  });
}
