var SingletonClass =
{
      create:
          function singletonclass__create()
          {
              var ProtoClass = Class.create.apply( Class, arguments );

         //   instance hidden inside our closure:
              var instance;

         /*   extend the Class created above to make a new class that
              can only be instantiated once: */
              ProtoClass =
                  Class.create(ProtoClass,
                                {
                                    initialize:
                                        function( $super )
                                        {
                                            if( instance )
                                                throw( "cannot create another - this is a singleton" );

                                            $super();
                                        }
                                });

              instance = new ProtoClass();

       //     Allow access to instance via a Class function:
              ProtoClass.get = function (){ return instance; };

              return ProtoClass;
          }
 };

var myModal = SingletonClass.create({
	initialize: function() {
		this.url ='';
		this.button = null;
		this.closeButton = null;
		this.clickX = 0;
		this.clickY = 0;
		this.windowWidth = 600;
		this.windowHeight = 400;
		this.windowWidthStart = 10;
		this.windowHeightStart = 10;
		this.posX = 0;
		this.posY = 0;
		this.overlay = new Element('div', { 'class': 'overlay', 'id': 'myModal_overlay'});
		this.window = new Element('div',{'class': 'window2', 'id' : 'myModal_window'});
		this.contents = new Element('div',{'id' : 'myModal_contents'});
		this.buildCloseButton();
		this.contents.hide();
		this.window.appendChild(this.contents);
		this.overlay.observe('click', this.close.bindAsEventListener(this));
		this.overlay.hide();
	},
	
	buildCloseButton: function(){
			
		this.closeButton = Builder.node('div',{className: 'm-options'}, [
							Builder.node('a', {className: 'rounded close', href: 'javascript:void(0);'}, [
			                  Builder.node('span',{className: 'right'}, [
			                      Builder.node('span', {className: 'icon close'})
			                  ])
			                ])
			              ]);
		this.closeButton.observe('click', this.close.bindAsEventListener(this, this.closeButton));
		this.window.insert(this.closeButton);
	},
	
	open: function(button){
		this.button = button;
		showLoadingButton(this.button);
	
		this.url = $(this.button).readAttribute('href');
		
		this.clickX = Position.cumulativeOffset(button)[0];
		this.clickY = Position.cumulativeOffset(button)[1];
		this.windowWidthStart = button.getWidth();
		this.windowHeightStart = button.getHeight();
		this.getAjaxContent();
	},
	
	update: function(text){
		$('w-cont').replace(text);
		var newH = this.contents.getDimensions().height;
		new Effect.Morph(this.window, {
				  style: 'height:' + newH + 'px;',
				  duration: 0.2
				});
	},
	
	openNormal: function(button){
		this.button = button;
		showLoadingButton(this.button);
	
		this.url = $(this.button).readAttribute('href');
		
		_gaq.push(['_trackPageview', this.url]);
		
		new Ajax.Updater(this.contents, this.url, {
			method :'get',
			parameters : {
				format : 'html'
			},
			onComplete: this.showNormal.bind(this)
		});
	},
	
	showNormal: function(){
		hideLoadingButton(this.button);
		
		this.overlay.setStyle({opacity: 0.6});
		this.overlay.show();
		
		$(document.body).appendChild(this.overlay);
		$(document.body).appendChild(this.window);
		this.windowWidth = this.contents.getDimensions().width;
		this.windowHeight = this.contents.getDimensions().height;

		var viewport = document.viewport.getDimensions();
		this.posX = Math.round(((viewport.width - this.windowWidth)/2) + document.viewport.getScrollOffsets().left);
		this.posY =  Math.round(((viewport.height - this.windowHeight)/2) + document.viewport.getScrollOffsets().top);
		
		if (this.posY<0){
			this.posY = 10;
		}
		
		this.window.setStyle({
		  left: this.posX + 'px',
		  top: this.posY + 'px',
		  width: this.windowWidth + 'px',
		  height: this.windowHeight + 'px',
		  opacity: 1
		});
		this.contents.show();
	},
	
	show: function(){
		hideLoadingButton(this.button);
		
		this.overlay.setStyle({opacity: 0.6});
		this.overlay.show();
		
		$(document.body).appendChild(this.overlay);
		$(document.body).appendChild(this.window);
		this.windowWidth = this.contents.getDimensions().width;
		this.windowHeight = this.contents.getDimensions().height;

		var viewport = document.viewport.getDimensions();
		this.posX = Math.round(((viewport.width - this.windowWidth)/2) + document.viewport.getScrollOffsets().left);
		this.posY =  Math.round(((viewport.height - this.windowHeight)/2) + document.viewport.getScrollOffsets().top);
		
		if (this.posY<0){
			this.posY = 10;
		}
		
		this.window.setStyle({
			  left: this.clickX + 'px',
			  top: this.clickY + 'px',
			  width: this.windowWidthStart + 'px',
			  height: this.windowHeightStart + 'px',
			  opacity: 0
			});
		
		
		new Effect.Parallel([
							new Effect.Morph(this.window, {
								  sync: true,
								  style: 'top:'+ this.posY + 'px; left:'+ this.posX + 'px; width:' + this.windowWidth + 'px; height:' + this.windowHeight + 'px;'
								}),
							new Effect.Appear(this.window, {sync: true, from: 0, to: 1})
		                  //  new Effect.Appear(this.overlay, {sync: true, from: 0, to: 0.75}) 
		                   ], { 
		                     duration: 0.5,
		                     queue: { scope: 'myModal'},
		                     afterFinish: this.afterOpen.bind(this)
		                   });
		//new Effect.Appear(this.contents, {from: 0, to: 1, duration: 0.5, queue: { position: 'end', scope: 'myModal'}});
		
	},
	
	grow: function(message){
		message = $(message);
		this.windowHeightStart = this.window.getDimensions().height;
		this.windowHeight = this.windowHeightStart + message.getDimensions().height;
		/*
		this.window.setStyle({
			  height: this.windowHeight + 'px',
		});
		*/
	  	if(!message.visible()){
	  		new Effect.Parallel([
	  		                     new Effect.BlindDown(message, {sync: true}),
	  		                     new Effect.Morph(this.window, {
									style: 'height:' + this.windowHeight + 'px;',
									sync: true
								})
	  		                    ], {
	  		                    	duration: 0.5,
	  			                    queue: { scope: 'myModal'}
	  		                     });
    		
    	}
	},
	
	close: function(){
		if(this.window === undefined || !this.window.visible()){
			return true;
		}else{
			this.overlay.remove();
			this.window.remove();
			this.overlay.hide();
			this.contents.hide();
			this.window.setStyle({
				  opacity: 0.5,
				  width: 10 + 'px',
				  height: 10 + 'px'
				});
			return false;	
		}		
	},
	
	getAjaxContent: function(){
		_gaq.push(['_trackPageview', this.url]);
		new Ajax.Updater(this.contents, this.url, {
			method :'get',
			parameters : {
				format : 'html'
			},
			onComplete: this.show.bind(this)
		});
		
	},
	
	afterOpen: function(){
		//dependentSelects.get().update();
		//uploadStart();
		//new ButtonAjaxify('#modal .btn');
		validationVerify(this.button.id);
		this.contents.show();
	}
});