var webhost;
var loggedIn;
var srcSuffix;
var ajaxLoader;

/*
 * wie breit und hoch das Bild höchstens sein darf
 * muss hier festgesetzt werden, da JavaScript nicht schnell
 * genug die neuen Werte mitkriegt
 */
var maxDimension = 420;

// Standard-Theme, falls nicht als Cookie gespeichert
var theme = 'magenta';

Event.observe(window, 'load', function(){

	webhost = $('webhost').value;
	loggedIn = $('loggedIn').value;

	// Pfad zum AjaxLoader rausfinden
	if (document.cookie.search('theme') != -1) {

		var cookie = document.cookie.split('theme');
		cookie = cookie[1].split('=');
		cookie = cookie[1].split(';');
		theme = cookie[0];

	}
	// Loader
	var src = webhost + '/public/core-themes/' + theme + '/icons/ajax-loader.gif';
	ajaxLoader = new Image();
	ajaxLoader.src = src;

	// feststellen, ob User eingeloggt ist
	if (loggedIn == '1'){
		srcSuffix = '_365px.jpg';
	} else {
		srcSuffix = '_365px_wm.jpg';
	}

	$$('.lightview').each(function(img){
    	Event.observe(img, 'mouseover', showPreview);
    	Event.observe(img, 'mousemove', followMouse);
    	Event.observe(img, 'mouseout', hidePreview);
	})
});


/**
 * blendet die Großansicht ein
 */
function showPreview(){

	// alle Elternelemente des Bildes
	var ancestors = this.ancestors();

	// html-Elemente kopieren (ab <a href ... >)
	var copy = ancestors[0].cloneNode(true);

	// CSS definieren
	copy.setStyle({
		position: 'absolute'
	})

	// Bild ganz nach oben setzen
	Element.insert($('base'), {before: copy});

	// ID verpassen
	Element.writeAttribute(copy, 'id', 'instantPreview');

	$('instantPreview').clonePosition(this);

	// CSS definieren
	copy.setStyle({
		margin: 0,
		padding: '10px',
		width: '365px',
		height: '365px',
		background: 'white',
		visibility: 'hidden',
		zIndex: 1000 // sonst sind einige Schriften über dem Bild
	})

	// style-Attribute aller Kinder leeren
	var childrenWithStyles = copy.select('[style]');

	childrenWithStyles.each(function(div){
		div.writeAttribute('style');
	})

	if (document.images[0].width > document.images[0].height){
		// CSS-Styles
		document.images[0].setStyle({
			margin: 0,
			width: '365px',
			height: 'auto'
		})
	} else {
		// CSS-Styles
		document.images[0].setStyle({
			margin: 0,
			width: 'auto',
			height: '365px'
		})
	}

	// CSS definieren
	copy.setStyle({
		width: 'auto',
		height: 'auto'
	})


	var previewSrc = document.images[0].getAttribute('src').gsub('_175px.jpg', srcSuffix);

	/*
	new Ajax.Request(webhost + '/frontend/index/image-exists', {
		method: 'post',
		parameters: {
					url: previewSrc
					},
		onComplete: function(response) {
		}
	});
	*/

	document.images[0].src = previewSrc;
}

/**
 * blendet die Großansicht ein
 */
function showPreviewNeu(){

	var img = $('instantPreviewImage');

	$('instantPreview').show();

	var copy = this.cloneNode(true);

	img.src = copy.src;

	src = img.getAttribute('src').gsub('_175px.jpg', srcSuffix);

	img.src = src;

	var tmp = new Image();
	tmp.src = this.src;

	if (tmp.width > tmp.height){
		// CSS-Styles
		img.setStyle({
			margin: 0,
			width: '365px',
			height: 'auto'
		})
	} else {
		// CSS-Styles
		img.setStyle({
			margin: 0,
			width: 'auto',
			height: '365px'
		})
	}

}

/**
 * blendet die Großansicht aus
 */
function hidePreview(){
	Element.remove($('instantPreview'));
}

/**
 * positioniert das Bild in der Nähe der Maus bei jeder Bewegung
 */
function followMouse(e){

	// Ausmaße des Viewports
	var viewport = document.viewport.getDimensions();

	// Ausmaße des Bildes
	var dimensions = $('instantPreview').getDimensions();

	// Mausposition vergrößern, damit die Maus nicht über der Vorschau hängen bleibt
	var mouseOffset = 25;
	var mouseX = Event.pointerX(e) + mouseOffset;
	var mouseY = Event.pointerY(e) + mouseOffset;

	// x-Achse festlegen
	if (mouseX > viewport.width - dimensions.width){

		var newX = mouseX - dimensions.width - mouseOffset;
		//new Effect.Move('instantPreview', { x: newX, y: mouseY, mode: 'absolute' });

		$('instantPreview').setStyle({
			left: newX + 'px'
		})
	} else {
		//new Effect.Move('instantPreview', { x: mouseX, y: mouseY, mode: 'absolute' });
		$('instantPreview').setStyle({
			left: mouseX + 'px'
		})
	}

	// y-Achse festlegen
	if (mouseY > viewport.height - dimensions.height){

		var newY = mouseY - dimensions.height - mouseOffset;
		//new Effect.Move('instantPreview', { x: mouseX, y: newY, mode: 'absolute' });
		$('instantPreview').setStyle({
			top: newY + 'px'
		})
	} else {
		//new Effect.Move('instantPreview', { x: mouseX, y: mouseY, mode: 'absolute' });
		$('instantPreview').setStyle({
			top: mouseY+"px"
		})
	}

	$('instantPreview').setStyle({
		visibility: 'visible'
	})
}