var sBox_class = new Class({
	initialize:function(div){
		this.div = div;
		this.emptyElement = new Element('div',{'id':'sBoxEmpty','text':' '});

		// Tipovi fotografija
		this.imageType = new Array('jpg','png','gif');

		// Kreiramo sBox
		this.sBox = new Element('div',{
		'id':'sBox',
		'class':'sBox',
		'html':'<div class="head">\n\r<div class="senkaLevo" id="senkaLevoGore" >&nbsp;</div>\n\r<!-- senka levo--><div class="naslov" id="sBoxPozadinaNaslov" >\n\r\n\r<div class="naziv" id="sBoxNaziv">Информације</div><!-- naziv -->\n\r<div class="zatvori"><a class="zatvori" id="sBoxZatvori">X</a></div><!-- zatvori -->\n\r</div><!-- naslov -->\n\r<div class="senkaDesno" id="senkaDesnoGore" >&nbsp;</div>\n\r<!-- senkaDesno -->\n\r</div><!-- head -->\n\r<div class="body" id="sBoxBody" >\n\r<div class="senkaLevo" id="sBoxSenkaLevo" >\n\r<div class="senkaDesno" id="sBoxSenkaDesno" ><div class="sadrzaj"  id="sBoxSadrzaj">\n\r<div class="caption">Bla bla bla</div><!-- caption -->\n\r<div class="content"><img src="http://www.ds.org.rs/test/images/novosti/2008/12/28besede1.jpg" /></div><!-- foto -->\n\r<div class="ikone"><a>Facebook</a><a>Delicious</a></div><!-- ikone -->\n\r</div><!-- sadrzaj -->\n\r</div>\n\r<!-- senkaLevo --></div>\n\r<!-- senkaDesno -->\n\r</div><!-- body -->\n\r<div class="footer" >\n\r<div class="senkaLevo" >&nbsp;</div>\n\r<!-- senkaLevo -->\n\r<div class="senka" id="sBoxSenkaFooter" >&nbsp;</div>\n\r<!-- senka -->\n\r<div class="senkaDesno" >&nbsp;</div>\n\r<!-- senkaDesno -->\n\r</div><!-- footer -->\n\r',
		'styles':{
		'display':'none',
		'visibility':'hidden',
		'opacity':0
		}
		});

		// Insertujemo sBox
		this.sBox.inject(document.body);

		// Events
		this.event();

	},
	// Pripremamo prikaz sBoxa
	pripremaPrikaza:function(){

		$('sBox').setStyle('display','');
		$('sBox').fade(1);

		// Promena velicine
		$('sBoxNaziv').set( 'text','Учитавање...' );
		$('sBoxSadrzaj').empty(); // Praznimo element sadrzaja
		$('sBoxBody').setStyle('height',0);

		// Ubacujemo empty element u sadrzaj
		this.emptyElement.inject('sBoxSadrzaj');

		// Podesavamo sirinu sadrzaja

		$('sBoxEmpty').setStyle('width',this.sirina);

		$('sBox').setStyles({
		'left':this.left - (this.sirina/2),
		'top':this.top
		});
		$('sBoxZatvori').setStyle('left',this.sirina-20);

		// Podesavamo ostale sirine na osnovu visine i sirine elementa
		//$('sBoxPozadina').setStyle('width',$('sBoxSadrzaj').getSize().x);
		$('sBoxPozadinaNaslov').setStyle('width',this.sirina+14);
		$('sBoxSenkaFooter').setStyle('width',this.sirina+14);

		/*this.realnaSirina = $('senkaLevoGore').getSize().x+$('sBoxPozadinaNaslov').getSize().x+$('senkaDesnoGore').getSize().x+40*/
		//this.fixPng('sBoxPozadinaNaslov');
		/*$('sBox').setStyles({
		'width':this.realnaSirina
		});*/


		// proveravamo o kom tipu podatka se radi
		switch(this.tip){
			// Prikaz fotografije
			case "foto":
			var imgUcitaj = new Image();
			imgUcitaj.onload=(function(){
				//this.loading(false);
				this.imgInsert = new Element('img',{'src':this.href,'styles':{'display':'block'}});
				this.altInsert = new Element('div',{'text':this.alt,'styles':{'width':this.sirina,'padding-bottom':7}});
				$('sBoxBody').setStyle('width',$('senkaLevoGore').getSize().x+$('sBoxPozadinaNaslov').getSize().x+$('senkaDesnoGore').getSize().x);
				this.altInsert.inject('sBoxSadrzaj');
				this.imgInsert.inject('sBoxSadrzaj');
				$('sBoxNaziv').set( 'html','<img src="templates/ds_clanak/images/miniLogo.png" id="miniLogo" />' );
				this.fixPng('sBoxNaziv');
				(function(){this.animacija()}.bind(this)).delay(300);
			}).bind(this);
			imgUcitaj.src = this.href;
			break;

			// Prikaz ostalog sadrzaja
			default:
			// Vrsimo AJAX Request


			this.Ajax = new Request({
				url: this.href,
				method: 'get',
				onRequest: function() {

				},
				onComplete: function(response) {
					$('sBoxSadrzaj').set('html',response);
					$('sBoxSadrzaj').setStyle('width',this.sirina);
					$('sBoxNaziv').set( 'html','<img src="templates/ds_clanak/images/miniLogo.png" />' );
					this.animacija();
				}.bind(this),
				onFailure:function(){
					$('sBoxSadrzaj').set('text','Нешто је кренуло по злу!');
					$('sBoxNaziv').set( 'text','' );
					this.animacija();
				}.bind(this)
			})

			this.Ajax.send('');
			break;
		}
	},
	animacija:function(){
		this.visina = $('sBoxSadrzaj').getSize().y;
		this.ani = new Fx.Morph('sBoxBody', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
		this.ani.start({
		'height': [0,this.visina]
		});
	},
	event:function(){
		// Event click
		$(this.div).addEvent('click', function(event){
			// Definisemo element
			this.element = $(event.target);

			if ($(this.element).get('id') == 'sBoxZatvori'){
				this.zatvori = new Fx.Morph('sBox', {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
				this.zatvori.start({
				'opacity': 0
				}).chain(
				function(){ this.start({'display':'none'}); }
				);
				return false;
			}

			// Proveravamo o kom elementu je rec
			switch ($(this.element).tagName){
				case "IMG":
				this.element = $(this.element).getParent();
				if ( $(this.element).get('rel').match(/popup[[a-z 0-9 A-Z]*]/) ){
					this.prolaz = true;
				}
				else {
					this.prolaz = false;
				}
				break;
				case "A":				
				if ( $(this.element).get('rel') !== null && $(this.element).get('rel') !== '' && $(this.element).get('rel') !== 'null' ){
					try{
						if ( $(this.element).get('rel').match(/popup[[a-z 0-9 A-Z]*]/) ){
							this.prolaz = true;
						}
						else {
							this.prolaz = false;
						}
					}catch(error){

					}
				}else {
					this.prolaz = false;
				}

				break;
				default:
				this.prolaz = false;
				break;
			}
			if (this.prolaz==true){
				event.stop();

				// Stopiramo EVENT
				// Uzimamo atribute iz elementa
				//this.href   = $(this.element).getParent().get('href').replace(/.*\/test\//g, "");
				this.href   = $(this.element).get('href');
				//
				//$('popupLayout').setStyles({'display':'','height':0});

				// Odredjujemo visinu i sirinu
				var result = $(this.element).get('rel').replace(/popup/g, "");
				var myregexp = /[][]/;
				var resultNov  = result.replace(myregexp, "");

				var visina_sirina = result.split(/x/);
				this.sirina = visina_sirina[0].replace(/\[/g, "").toInt();
				this.visina = visina_sirina[1].toInt();

				// Src
				this.src    = $(this.element).get('src');

				// Razdvajamo string u Array
				this.srcArray = this.href.split('.');

				// Proveravamo da li se radi o fotografiji ili nekom drugom linku

				if (this.imageType.contains(this.srcArray.getLast())){
					this.tip = 'foto';
				}
				else {
					this.tip = '';
				}

				// Alt
				this.alt    = $(this.element).get('alt');
				if (this.alt == null && $(this.element).getChildren('img').length > 0){
					this.alt = $(this.element).getChildren('img')[0].get('alt');
				}

				// Velicina celokupnog dokumenta
				var velicina = this.getPageSize();

				// levo gore podesavanje
				//var Top = velicina[1] + (document.viewport.getHeight() / 10);
				this.left = (velicina[0]/2);
				this.top  = $(window).getScroll().y + 50;

				this.pripremaPrikaza();
			} else {

			}


		}.bind(this));
	},
	getPageSize: function() { // Pozicioniranje na stranici
		var xScroll, yScroll;

		if (window.innerHeight && window.scrollMaxY) {
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}

		var windowWidth, windowHeight;

		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth;
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}

		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else {
			pageHeight = yScroll;
		}

		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){
			pageWidth = xScroll;
		} else {
			pageWidth = windowWidth;
		}

		return [pageWidth,pageHeight];
	},
	fixPng:function(myImage){
		var arVersion = navigator.appVersion.split("MSIE")
		var version = parseFloat(arVersion[1])
		if ((version >= 5.5) && (version < 7) && (document.body.filters))
		{
			var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
			var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
			var imgTitle = (myImage.title) ?
			"title='" + myImage.title  + "' " : "title='" + myImage.alt + "' "
			var imgStyle = "display:inline-block;" //+ myImage.style.cssText
			var strNewHTML = "<span " + imgID + imgClass + imgTitle
			+ " style=\"" + "width:" + myImage.width
			+ "px; height:" + myImage.height
			+ "px;" + imgStyle + ";"
			+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
			+ "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
			myImage.outerHTML = strNewHTML
		}
	}
});