/**
 * Klasa odpowiedzialna za okienko dialogowe, spuszczane z góry ekranu
 */
var Api_dialogbox = Class.create({
	div: null,
  
	default_options: {
    	duration: 0.4,
    	timeout: 3
  	},

  	initialize: function(title, options)
  	{
  		this.options = Object.extend(Object.extend({ }, this.default_options), options || { });
  		this.create_html();
  		this.set_title(title);
  		this.install_actions();
  		this.positione();
  	},
  	
  	set_title: function(title)
  	{
  		this.div.down('.title').update(title);
  	},
  
  	set_content: function(content)
  	{
  		this.div.down('.content').update(content);
  	},
  
  	/**
  	 * Metoda tworzy dynamicznie kod html
  	 */
  	
  	/*
	<div class="api_dialogbox_wraper">
		<div class="border">
			<div class="title_wraper">
				<a title="zamknij" class="action_close" href="#">
					<img alt="zamknij" src="/style/image/design/icon_close.png" />
				</a>
				<h1>Tytuł okienka</h1>
			</div>
			<div class="content">
				To jakiś standartowy tekst!
			</div>
		</div>
	</div>
  	*/
  	create_html: function()
  	{
  		// overlay
  	    overlay = Builder.node('div', {className: 'api_overlay' });
  	    $$('body')[0].insert(overlay);
  	    this.overlay = $(overlay);  
  	    this.overlay.setOpacity(0.5);
  		
  	    dialogbox = Builder.node('div', { className: 'api_dialogbox_wraper', style: 'display: none;' }, [
            Builder.node('div', { className: 'border' }, [
                Builder.node('div', { className: 'title_wraper' }, [
                    Builder.node('a', { className: 'action_close', href: '#', title: 'zamknij' }, [
                        Builder.node('img', { src: '/style/image/design/icon_close.png', alt: 'zamknij' })
                    ]),
                    Builder.node('h1', { className: 'title' })
                ]),
                Builder.node('div', { className: 'content' })
            ])
  	    ]);
  	    
  		$$('body')[0].insert(dialogbox);
  		this.div = $(dialogbox);

  		// dodajemy rzeczy z options
  		if(this.options.addClasses) {
  			this.div.down('.api_msg').addClassName(this.options.addClasses);
  		}
  	},  

  	/**
  	 * Instaluje akcje na okienku, w tej chwili tylko zamykanie
  	 */
  	install_actions: function()
  	{
  		dialogbox = this;
  		dialogbox.div.select('.action_close').each(function(action) {
			action.observe('click', dialogbox.action_close.bindAsEventListener(dialogbox));
  		});
  		
  	    dialogbox.overlay.observe('click', dialogbox.action_close.bindAsEventListener(dialogbox));
  	},
  	
  	/**
  	 * Metoda ładuje kontent za pomocą ajaxa, z preloaderem itp
  	 */
  	load_content: function(url)
  	{
  		dialgobox = this;

  		dialogbox.show_content_preloader();
  		
  		new Ajax.Request(url,
		{
			method:     'get',
			onSuccess:  function(transport)
			{
  				dialogbox.set_content(transport.responseText);
  				dialogbox.install_content_actions();
  				if(typeof(dialogbox.options.afterContentLoad) == 'function') {
  					dialogbox.options.afterContentLoad(dialogbox, transport);
  				}
			}
		});		
  	},
  	
  	show_content_preloader: function()
  	{
  		this.set_content('Ładuję...');
  	},
  	
  	/**
  	 * Instaluje wszelkie akcje do kontentu, w standardzie anuluj na form submit
  	 */
  	install_content_actions: function()
  	{
  		dialogbox = this;
  		this.div.down('.content').select('form').each(function(form) {
  			form.observe('reset', dialogbox.action_close.bindAsEventListener(dialogbox));
  			form.observe('submit', dialogbox.action_submit_form.bindAsEventListener(dialogbox));
  		});
  	},
  
  	/**
  	 * Ustawiamy na środku ekranu, na samej górze
  	 */
  	positione: function()
  	{
  	    arrayPageSize = getPageSize();
  	    this.overlay.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
  		
  		desktop = $$('body')[0];
  		desktopWidth = desktop.getWidth();
  		desktopOffset = desktop.cumulativeOffset();
  		elementWidth = this.div.getWidth();
    
  		this.div.setStyle({
  			left: ((desktopWidth - elementWidth) / 2 + desktopOffset.left) + "px"
  		});
  	},
  
  	/**
  	 * Pokazuje okienko. Nie robi tego efektownie, tylko kontent pokazujemy efektownie
  	 */
  	show: function()
  	{
  		this.div.slideDown({ duration: this.options.duration });
  	},

  	/**
  	 * Efektowanie chowa okienko
  	 */
  	hide: function()
  	{
  		dialogbox = this;
  		if(!this.div.hasClassName('toggling')) {
  			this.div.addClassName('toggling')
	  		this.div.slideUp({
	  			duration: this.options.duration,
	  			afterFinish: function()
	  			{
	  				dialogbox.div.remove();
	  				dialogbox.overlay.remove();
	  			}
	  		});
  		}
  	},

  	/**
  	 * Metoda wysyła formularz, jeśli zostanie zwrócone succes = true w headerJSON to 
  	 * przechodzimy do zamykania okiena i zgłaszane jest onSuccess
  	 * w innym wypadku poprostu pokazujemy zawartość jeszcze raz w okienku
  	 */
  	action_submit_form: function(event)
  	{
  		dialogbox = this;
  		event.stop();
  		event.element().request(
  		{
  			onSuccess: function(transport)
  			{
  				if(transport.headerJSON && transport.headerJSON.success) success = transport.headerJSON.success; else success = false;
  				if(transport.headerJSON && transport.headerJSON.message) message = transport.headerJSON.message; else message = false;
  				
				if(success) {
					dialogbox.action_success(event, transport);
				} 
				else {
					dialogbox.set_content(message);
					//dialogbox.install_content_actions();
	  				if(typeof(dialogbox.options.onContentLoad) == 'function') {
	  					dialogbox.options.onContentLoad(dialogbox, tranpsort);
	  				}
				}
  			}
  		});
  	},

  	/**
  	 * Obsługa zamknięcia okienko po sukcesie
  	 */
  	action_success: function(event, transport)
  	{
  		this.hide();
  		if(typeof(this.options.onSuccess) == 'function') {
  			this.options.onSuccess(dialogbox, transport);
  		}
  	},

  	/**
  	 * Obsługa akcji zamykającej okienko
  	 */
  	action_close: function(event)
  	{ 		
  		event.stop();
  		this.hide();
  		if(typeof(this.options.onClose) == 'function') {
  			this.options.onClose(dialogbox);
  		}  		
  	},

  	
  	// 
  	// odliczanie zamknięcia okienka
  	//
  	
  	/**
  	 * Ustawia timeout po którym okienko samo się schowa
  	 */
  	set_timeout: function(timeout)
  	{
        this.remaind = timeout;
        this.set_timeout_message(this.remaind);
        this.interval = setInterval(this.counting.bind(this), 1000);     
  	},
  	
  	/**
  	 * Robi update licznika
  	 */
  	set_timeout_message: function(remaind)
  	{
  		tc = this.div.down('.counter');
  		if(tc) {
  			tc.update(remaind);
  		}
  	},  	

  	/**
     * Metoda wywoływana przez timer w celu aktualizacji licznika
     */
    counting: function()
    {
  		this.remaind = this.remaind - 1;
  		this.set_timeout_message(this.remaind);
  		if(this.remaind <= 0) { 
  			clearInterval(this.interval);
  			this.hide();
  		}
    }    	
  
});


/**
 * Metoda przeciąża okienko do okienka potwierdzającego operacje
 */
var Api_simple_confirmationbox = Class.create(Api_dialogbox, {

	default_options: {
		show_success_message: false,
		timeout: 3,
		duration: 0.3
	},	
	
  	initialize: function(title, message, action, options)
  	{
		this.action = action;
  		this.options = Object.extend(Object.extend({ }, this.default_options), options || { });
  		this.create_html();
  		this.set_title(title);
  		this.set_content(message);
  		this.install_actions();
  		this.positione();
  	},
  	
  	set_content: function(message)
  	{
  		this.div.down('.message').update(message);
  	},
  	
  	create_html: function()
  	{
  		// overlay
  	    overlay = Builder.node('div', {className: 'api_overlay' });
  	    $$('body')[0].insert(overlay);
  	    this.overlay = $(overlay);  
  	    this.overlay.setOpacity(0.5);
  		
  	    // okienko
  	    dialogbox = Builder.node('div', { className: 'api_dialogbox_wraper', style: 'display: none;' }, [
            Builder.node('div', { className: 'border' }, [
                Builder.node('div', { className: 'title_wraper' }, [
                    Builder.node('a', { className: 'action_close', href: '#', title: 'zamknij' }, [
                        Builder.node('img', { src: '/style/image/design/icon_close.png', alt: 'zamknij' })
                    ]),
                    Builder.node('h1', { className: 'title' })
                ]),
                Builder.node('div', { className: 'content' }, [
                    Builder.node('div', { className: 'message'} ),                                                               	
                    Builder.node('div', { className: 'block submit' }, [
                        Builder.node('input', { className: 'action_cancel', value: 'Nie', type: 'reset' }),                                                    
                        Builder.node('input', { className: 'action_ok', value: 'Tak', type: 'submit' })                                                    
	                ]),
                    Builder.node('div', { className: 'block submit success_message', style: 'display: none' }, [
	                    'Automatyczne zamknięcie za: ',
                        Builder.node('span', { className: 'counter' }),
                        's  ',
                        Builder.node('input', { className: 'action_cancel', value: 'Zamknij', type: 'reset' }),
                    ])                                        
	                
	            ])
            ])
  	    ]);
  	    
  		$$('body')[0].insert(dialogbox);
  		this.div = $(dialogbox);  		
  	},
  	
  	/**
  	 * Instaluje akcje na okienku
  	 */
  	install_actions: function()
  	{
  		t = this;
  		t.overlay.observe('click', t.action_close.bindAsEventListener(t));
  		
  		t.div.select('.action_cancel').each(function(action) {
  			action.observe('click', t.action_close.bindAsEventListener(t));
  		});

  		t.div.select('.action_close').each(function(action) {
  			action.observe('click', t.action_close.bindAsEventListener(t));
  		});
  		
  		t.div.select('.action_ok').each(function(action) {
  			action.observe('click', t.action_ok.bindAsEventListener(t));
  		});
  	},
 
  	/**
  	 * Po naciśnięciu przyciszku ok, następuje wysłanie zapytania ajaxem.
  	 * W zaleznosci od otrzymanych danych podejmowana jest decyzja czy zamknąć okienko czy nie
  	 */
  	action_ok: function(event)
  	{
  		event.stop();
  		
  		dialogbox = this;
  		dialogbox.show_content_preloader();
  		dialogbox.div.down('.submit').hide();
  		
  		new Ajax.Request(dialogbox.action + '&confirmed=1',
  		{
  			onSuccess: function(transport)
  			{
  				// doczyt parametrów z jsona
  				if(transport.headerJSON && transport.headerJSON.success) success = transport.headerJSON.success; else success = false;
  				if(transport.headerJSON && transport.headerJSON.message) message = transport.headerJSON.message; else message = false; 
  				
  				if(success) {
  					if(dialogbox.options.show_success_message) {
  						dialogbox.set_content(message);
  						dialogbox.div.down('.success_message').show();
  						dialogbox.set_timeout(dialogbox.options.timeout);
  					}
  					else {
  						dialogbox.hide();
  						if(typeof(dialogbox.options.onSuccess) == 'function') {
  							dialogbox.options.onSuccess(this);
  						}
  					}
  				}
  				else {
  					dialogbox.set_content(message);
  				}
  				
  			}
  		
  		});  		
  		
  	}

});