var NorskDesignMultimedia = Class.create({

    initialize: function() {
        images = this.observeImages();
	},
	
	observeImages: function() {

		$$('div.multimediadisplay-list img.multimediathumb').each(function(element) {
			element.observe('mouseover', this.mouseoverListener.bindAsEventListener(this));
			element.observe('mouseout', this.mouseoutListener.bindAsEventListener(this));
		}.bind(this));

	},
	
	mouseoverListener: function(event) {
		event.stop();

		// Get wrapper div in because we are mouseovering a img-tag inside a a-tag
		wrapperDivElement = event.element().up().up();
	
		fileID = this.identifyImgElementID(wrapperDivElement);
		
		$('multimediadisplay-list').select('div.multimediahover').each(function(hoverimage) {
			if (hoverimage.visible() && hoverimage.identify() != 'hover-' + fileID) {
				hoverimage.hide();
			}
		});
		
		hoverDivToDisplay = $('hover-' + fileID);
		
		this.positionImage(wrapperDivElement,hoverDivToDisplay);
		
		$('hover-' + fileID).show();

	},
	
	mouseoutListener: function(event) {
		event.stop();
		
		wrapperDivElement = event.element().up().up();

		wrapperDivElement.select('div.multimediahover').each(function(hoverimage) {
			if (hoverimage.visible()) {
				hoverimage.hide();
			}
		});
	},
	
	identifyImgElementID: function(element) {
		return element.identify().replace('mmfile-', '');
	},
	
	// Position the multimediahover correct inside viewport
	positionImage: function(wrapperDiv,hoverDivToDisplay) {
		
		// Get infomation about viewport
		var viewportWidth = document.viewport.getWidth();
		var viewportHeight = document.viewport.getHeight();
		
		// Get infomation about scroll offset, how much is scrolled
		var scrollOffsets = document.viewport.getScrollOffsets();
		var scrollOffsetLeft = scrollOffsets['left'];
		var scrollOffsetTop = scrollOffsets['top'];

		// Get infomation about the element to position after - wrapper div of event element
		var wrapperDivWidth = wrapperDiv.getWidth();
		var wrapperDivHeight = wrapperDiv.getHeight();
		var wrapperDivViewportOffset = wrapperDiv.viewportOffset();
		var wrapperDivViewportOffsetLeft = wrapperDivViewportOffset['left'];
		var wrapperDivViewportOffsetTop = wrapperDivViewportOffset['top'];
		
		// Get information about the multimediahover div to display
		var hoverDivToDisplayWidth = hoverDivToDisplay.getWidth();
		var hoverDivToDisplayHeight = hoverDivToDisplay.getHeight();
		
		// Set default positions - default is to the right 
		
		var spaceFromHoverDiv = 8; //px
		
		var topPosition = wrapperDivViewportOffsetTop - spaceFromHoverDiv;
		
		if(topPosition < 0) {
			// If the wrapper div starts above viewport the offset top gets minus value
			// Top position to multimediahover div can't be minus since it will disappear in top
			// Becuase of that we set initial top position to be the space/margin from hover div 
			topPosition = spaceFromHoverDiv;
		}
		
		var leftPosition = wrapperDivViewportOffsetLeft + wrapperDivWidth + spaceFromHoverDiv;
		
		var bottomPosition = null;
		var rightPosition = null;
		
		// # Set correct horizontal position
		
		// Calculate available width
        var availableWidth = (viewportWidth - wrapperDivViewportOffsetLeft) - wrapperDivWidth - spaceFromHoverDiv;
		// Check if med multimediahover div should be moved to the left
        if(availableWidth < hoverDivToDisplayWidth) {
        	leftPosition = wrapperDivViewportOffsetLeft -(hoverDivToDisplayWidth + spaceFromHoverDiv);
        }
        
        leftPosition += scrollOffsetLeft;
        
        // # Set correct vertical position
        
        // Calculate available height, used to check if the multimediahover div must be moved vertical
        var availableHeight = (viewportHeight - wrapperDivViewportOffsetTop)/* - spaceFromHoverDiv*/;
        
        if(availableHeight < hoverDivToDisplayHeight) {
        	if(viewportHeight < hoverDivToDisplayHeight) {
        		topPosition = spaceFromHoverDiv;
        	}
        	else {
        		topPosition = viewportHeight - hoverDivToDisplayHeight - 10;
        	}
        }
        
        // We must add scroll offset to make sure the div is positioned correct if user scrolls
        topPosition += scrollOffsetTop;
        
		// Set correct position style
        hoverDivToDisplay.setStyle({
            top: topPosition + 'px',
            left: leftPosition + 'px'
        });
	}

});