var isIE = document.all && !window.opera ? true : false
var DO_NOT_APPLY_CATEGORY = -1
var categories = ["News", "Sport", "Radio", "TV", "Weather", "Languages"]
var categoryImages = []
for(var i = 0; i < categories.length; i++) {
	categoryImages[categories[i]] = "resources/images/panel"+(i+1)+".png"
}
var currentCategory = categories[0]

var navigationPanelSubstitute
/** An array, holding all registered images */
var images = []
/** Object pointer. Indexes all registered images */
var index = 0
/** How fast is the transition done? */
var INTERVAL = isIE ? 30 : 0.3
var ANIMATION_RATE = 10
/** The minimum opacity for a picture. Defines, how much transparency you'd like. Minimum is 0.1, NOT 0.0 */
var MINIMUM_OPACITY = isIE ? 40 : 0.4
/** The maximum opacity for a picture. Normally, this is 1.0 for a fully opacque image */
var MAXIMUM_OPACITY = isIE ? 100 : 0.99 /* mozilla: opacity of 1.0 => script-error */

var myZIndex = 11

function registerImage(element, defaultZoomFactor, category) {
	var imageSubstitute = new ImageSubstitute(element, index, defaultZoomFactor, category)
	images[imageSubstitute.index] = imageSubstitute
	index++
}
function registerNavigationPanel(element) {
	navigationPanelSubstitute = new ImageSubstitute(element, DO_NOT_APPLY_CATEGORY, 1, "")
}

function ImageSubstitute(element, x, f, c) {
	var category = c
	var factor = f
	var timeout = false
	this.src = element
	var blurDone
	var showDone
	var currentHeight = Number(eval(this.src.height))
	var currentWidth = Number(eval(this.src.width))
	var originalWidth = currentWidth
	var originalHeight = currentHeight
	var maxHeight = factor * originalHeight
	var maxWidth = factor * originalWidth
	var deltaWidth = (maxWidth - currentWidth) / 6
	var deltaHeight = (maxHeight - currentHeight) / 6
	var opacity = MAXIMUM_OPACITY
	this.index = x
	this.markRead = function() {
		this.src.style.borderColor = "#999"
		this.src.style.borderStyle = "dashed"
	}
	this.blur = function() {
		blurDone = opacity < MINIMUM_OPACITY
		clearTimeout(timeout)
		if(! blurDone) {
			if(! isIE) {
				this.src.style.MozOpacity = opacity
			} else {
				this.src.style.filter="alpha(opacity="+opacity+")"
			}
			opacity -= INTERVAL
		}
		if(currentWidth >= originalWidth+deltaWidth) {
			currentWidth -= deltaWidth
			element.width = currentWidth
		}
		if(currentHeight >= originalHeight+deltaHeight) {
			currentHeight -= deltaHeight
			element.height = currentHeight
		}
		if(! blurDone | currentWidth < maxWidth | currentHeight < maxHeight) {
			timeout = setTimeout('images['+this.index+'].blur()', ANIMATION_RATE)
		}
	}
	this.show = function() {
		if(this.index != DO_NOT_APPLY_CATEGORY) {
			applyCategory(category)
		}
		clearTimeout(timeout)
		if(! opacity > MAXIMUM_OPACITY | currentWidth < maxWidth | currentHeight < maxHeight) {
			if(! isIE) {
				this.src.style.MozOpacity = opacity
			} else {
				this.src.style.filter="alpha(opacity="+opacity+")"
			}
			opacity += INTERVAL
			this.src.style.zIndex = ++myZIndex
			currentWidth += deltaWidth
			element.width = currentWidth
			currentHeight += deltaHeight
			element.height = currentHeight
			timeout = setTimeout('images['+this.index+'].show()', ANIMATION_RATE)
		}
	}
    this.src.onmouseover = new Function('f1', 'images['+this.index+'].show()')
    this.src.onmouseout = new Function('f2', 'images['+this.index+'].blur()')
    this.src.onclick = new Function('f3', 'images['+this.index+'].markRead();')
}


function applyCategory(category) {
	var pathToImage = categoryImages[category]
	document.getElementById('navigationPanel').src = pathToImage
	currentCategory = category
}

var theImages = []
function preloadImages() {
	for(var i = 0; i < preloadImages.arguments.length; i++) {
		theImages[i] = new Image()
		theImages[i].src = preloadImages.arguments[i]
	}
}