var AJAXGallery = gallery.extend( {
	initialize : function(element, options) {

		this.setOptions( {			
			showArrows :false,
			showCarousel :false,
			showInfopane :false,

			timed :false,
			defaultTransition :"fade",
			fadeDuration: 100,

			galleryNavId :false,
			externalNavigation :true,
			getDataUrl :false
		}, options);

		var AJAX = new Ajax(this.options.getDataUrl, {
			method: 'get',
			onComplete: (function(content) {
                        
                this.options.manualData = Json.evaluate(content);
        
                this.parent(element, this.options);

                //this.lightbox = Lightbox;
                //this.lightbox.init({resizeSpeed: 100, animate: true, overlayOpacity: 0.8, allowSave: false, slideshowAutoplay: false, slideshowInterval: 5000, slideshowAutoclose: true,lllImage: 'Bild', lllOf: 'von'});
                //console.log(Lightbox);
                        
                if (this.options.externalNavigation && $(this.options.galleryNavId) && (this.maxIter > 1)) {
                    var navigation = $(this.options.galleryNavId);
                    var navPrev = new Element('a').addClass('prev').setProperties( {
                        title :'prev'
                    }).addEvent('click', this.prevItem.bind(this)).injectInside(navigation);
                     // need to do this for Safari!
                    navPrev.setHTML(' ');
                    var navOverview = new Element('a').addClass('overview').setProperties( {
                        title :'overview'
                    }).addEvent('click', this.overviewItem.bind(this)).injectInside(navigation);
                     // need to do this for Safari!
                    navOverview.setHTML(' ');
                    var navNext = new Element('a').addClass('next').setProperties( {
                        title :'next'
                    }).addEvent('click', this.nextItem.bind(this)).injectInside(navigation);
                     // need to do this for Safari!
                    navNext.setHTML(' ');
                    
                    var navCounter = new Element('div').addClass('projektcounter').injectAfter(navigation);
                    navCounter.setHTML('1 / '+this.maxIter);			
                    this.addEvent('onChanged', function(){navCounter.setHTML((this.currentIter + 1) + ' / ' + this.maxIter);});
                }

				if ($(this.options.galleryNavId + 'desc')) {
					var description = $(this.options.galleryNavId + 'desc');
					var imageDesc = new Element('span').injectInside(description);
					imageDesc.setHTML(this.galleryData[0].description);			
					this.addEvent('onChanged', function(){imageDesc.setHTML(this.galleryData[parseInt(this.currentIter)].description);});
				}

			  }.bind(this)),
			 onFailure: (function(xhr) {
					this.log(xhr);
			 }.bind(this))
		});

		AJAX.request();

	},
	startSlideShow: function() {
		this.parent();
		this.minWidth = parseInt(this.galleryElement.getStyle('min-width'));
		this.maxWidth = parseInt(this.galleryElement.getStyle('max-width'));
		this.imageRatio = parseInt(this.galleryElement.getStyle('width')) / parseInt(this.galleryElement.getStyle('height'));

		// this is for IE6  FIXME!!
		if (this.minWidth < 400) this.minWidth = 600;
		
		this.resizeGallery();
		window.addEvent('resize', function() {
			this.resizeGallery();
		}.bind(this));
        this.addEvent('onChanged', function(){this.resizeGallery();});

	},
	goTo: function(num) {
		this.parent(num);
		this.currentDesc = this.galleryData[parseInt(num)].description;
		this.resizeGallery();
	},
	resizeGallery: function() {
		var imageCoordinates = this.galleryElements[parseInt(this.currentIter)].element.getCoordinates();
		var windowSize = window.getSize().size;

		if ((this.galleryData[parseInt(this.currentIter)].description == '') ) {//&& (this.maxIter == 1)) { 
			var marginBottom = 0;
			$(this.options.galleryNavId + 'desc').setStyles({
				'display': 'none'	
			});
		} else {
			var marginBottom = 40;
			$(this.options.galleryNavId + 'desc').setStyles({
				'display': 'block'	
			});
		}
		var marginRight = 230;

		var ratio = imageCoordinates.width / imageCoordinates.height;
		// this.imageRatio = ratio;
		var maxWidth = (windowSize.x - marginRight - imageCoordinates.left);
		var maxHeight = (windowSize.y - marginBottom - imageCoordinates.top);
		
		var widthMaxHeight = parseInt(this.imageRatio * maxHeight);
		
		if (maxWidth > widthMaxHeight) {
			var finalWidth = widthMaxHeight;
			var finalHeight = maxHeight;
		} else {
			var finalWidth = maxWidth;
			var finalHeight = parseInt(maxWidth / this.imageRatio);
		}

		if (finalWidth < this.minWidth) {
			finalWidth = this.minWidth;
			finalHeight = parseInt(this.minWidth / this.imageRatio);
		}



		if (finalWidth > this.maxWidth) {
			finalWidth = this.maxWidth;
			finalHeight = parseInt(this.maxWidth / this.imageRatio);
		}

		this.galleryElement.setStyles({
			'width': finalWidth + 'px',
			'height': finalHeight + 'px',
			'min-width': '0px'
		});
	}

});