// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

// Detect browser and version
var b_name = navigator.appName;
var b_version = navigator.appVersion;



var side_bar = [
      {
        name: 'Edit',
        className: 'edit',
        callback: function() {
          alert('Menu 2');
        }
      },{
        name: 'Copy',
        className: 'copy',
        callback: function() {
          alert('Copy function called');
        }
      },{
        name: 'Delete',
        className: 'delete',
        callback: function() {
          alert('Copy function called');
        }       
      },{
        separator: true
      },{
        name: 'Save',
        className: 'save',
        callback: function() {
          alert('Saving...');
        }
      }
    ];
   
   
    var preview_container = [
      {
        name: 'menu1',
        className: 'edit',
        callback: function() {
          alert('Menu 1');
        }
      }
    ];

    var menu3 = [
      {
        name: 'menu3',
        className: 'edit',
        callback: function() {
          alert('Forward function called');
        }
      },{
        name: 'Copy',
        className: 'copy',
        callback: function() {
          alert('Copy function called');
        }
      }    ];


var Menu = Class.create({

  initialize: function(menuClass) {

    this.id = name;
    this.menuClass = menuClass
    this.display = false;
	this.clickedElement ="";
    $(document.body).observe('contextmenu', Event.stop);
   
    //this.respondToClick = this.onClickAction.bindAsEventListener(this);
    //Event.observe($(div), 'click', this.respondToClick);
    //document.observe('click', function(e) {
	Event.observe(document,'mousedown', function(e) {
			
             $('cMenu') ? $('cMenu').remove() :0;
            this.display = false;
			
			 //alert(Event.isLeftClick(e));
            if (Event.isLeftClick(e)== false && this.display== false) {
			
                this.container = new Element('div', {id: 'cMenu', className: this.menuClass});
                var list = new Element('ul');

				//clickedId =e.originalTarget.id;
				x=0;
				
				clickedId = Event.findElement(e).className;
				clickedElement = Event.findElement(e);
				this.clickedElement = clickedElement;  
				while ( window[clickedId] == undefined ) {
				
					clickedElement = clickedElement.parentNode;
					clickedId = clickedElement.className;
					x++;
					if (x>= 10){ break;}
				}

                menuItems = window[clickedId];
				              
                menuItems.each(function(item) {
////////////////////////////////////////////////				

                        list.insert(
                            new Element('li', {className: item.separator ? 'separator' : ''}).insert(
                                item.separator
                                    ? ''
                                    : Object.extend(new Element('a', {
                                        href: '#',
                                        title: item.name,
                                        className: (item.className || '') + (item.disabled ? ' disabled' : ' enabled')
                                    }), { _callback: item.callback })
                                    .observe('mousedown', this.onClick.bind(this))
                                    .observe('contextmenu', Event.stop)
                                    .update(item.name)
                            )
                        )
                    }.bind(this));
  
                $(document.body).insert(this.container.insert(list).observe('contextmenu', Event.stop));
                this.display= true;
                this.show(e);
               
            }
            else
            {
                $('cMenu') ? $('cMenu').remove() :0;
                this.display= false;
            }
        }.bind(this));



  },
  onClickAction: function(e) {
    alert(e.isRightClick());
  },
  onClick: function(e) {
    //Left Click Load menu, evaluate menu choice
        e.stop();

        if (e.target._callback && !e.target.hasClassName('disabled')) {
            //this.options.beforeSelect(e);
            //if (this.ie) this.shim.hide();
            this.container.hide();
            e.target._callback(this.clickedElement);

            this.display= false;
            this.container = null;
        }
       
    },
    show: function(e) {

    var x = Event.pointer(e).x;
    var y = Event.pointer(e).y;

        this.container.setStyle({zindex:200,left:x+'px',top:y+'px',position:'absolute',width:'100px'});
        //this.container.show();
        Effect.Appear(this.container, {duration: 0.5})
        //this.event = e;
    }   

});