Viwer = function (Elements, Details)
{
	var elements = ($type(Elements) == 'string') ? $$(Elements) : Elements
	var details = ($type(Details) == 'string') ? $$(Details) : Details
	var opened = -1
	var func
	var divs = new Array()

	Show = function (index)
	{
		if(opened == index)
		{
			return
		}
		
		opened = index
		
		for (var i = 0; i < elements.length; i++)
		{
			var elem = elements[i]
			var detail = details[i]
			var div = divs[i]
			var img = document.id(div.getElementsByTagName('img')[0])
			var imgElem = document.id(elem.getElementsByTagName('img')[0])
			var position = imgElem.getPosition()

			if (i == index)
			{
				//img.setProperty('src', imgElem.src)
				//	.inject(div)
				

				div.get('morph').addEvent('complete', elem.funcBox)
				
				div.morph({height: 100, width: 100, top: position.y - 7, left: position.x - 7})
				img.morph({height: 100, width: 100})

				continue
			}
			else
			{
				Hide(i)
			}

			img.tween('opacity', '.25')
		}
	}

	Hide = function (index)
	{
		if(index == opened)
		{
			opened = -1
		}
		
		for (var i = 0; i < elements.length; i++)
		{
			var elem = elements[i]
			var div = divs[i]
			var img = div.getElementsByTagName('img')[0]
			var imgElem = document.id(elem.getElementsByTagName('img')[0])
			var position = imgElem.getPosition()
			
			if (i == index)
			{
				div.get('morph').removeEvent('complete', elem.funcBox)
				HideBox(i)
				
				div.morph({height: 80, width: 80, top: position.y, left: position.x})
				img.morph({height: 80, width: 80})

				continue
			}

			if(opened == -1)
			{
				img.tween('opacity', '1')
			}
		}
	}
	
	ShowBox = function(index)
	{
		var elem = elements[index]
		var detail = details[index]
		var div = elem.getElementsByTagName('div')[0]
		
		var position = div.getPosition()
		detail.setStyles({ 'top': position.y + 66, 'left': position.x + 133 })
		
		detail.tween('opacity', '1')
	}
	
	HideBox = function(index)
	{
		var elem = elements[index]
		var detail = details[index]
		var div = elem.getElementsByTagName('div')[0]
		
		detail.tween('opacity', '0')
	}

	for (var i = 0; i < elements.length; i++)
	{
		var elem = elements[i]
		var detail = details[i]

		elem.addEvent('mouseover', Show.bind(this, i))
		elem.addEvent('mouseout', Hide.bind(this, i))
		
		elem.funcBox = ShowBox.bind(this, i)
		
		var imgElem = document.id(elem.getElementsByTagName('img')[0])

		elem.set('tween', { link: 'cancel', duration: 300 })
		
		detail.setStyles({ 'opacity': '0', 'display': 'block', 'zindex': '1' })
		detail.set('tween', { link: 'cancel', duration: 200 })
		
		detail.addEvent('mouseover', Show.bind(this, i))
		detail.addEvent('mouseout', Hide.bind(this, i))
		detail.addEvent('mouseover', ShowBox.bind(this, i))
		
		var position = imgElem.getPosition()
		var div = new Element('div', { styles: { 'width': '80px', 'height': '80px', 'top': position.y + 'px', 'left': position.x + 'px', 'position': 'absolute'} })
			.inject(document.id(elem.getElementsByTagName('div')[0]))
		div.set('morph', { link: 'cancel', duration: 300 })
		divs.push(div)
		//div.get('morph').addEvent('complete', ShowBox.bind(this, i))

		var img = new Element('img', { styles: { 'width': '80px', 'height': '80px' } })
			.inject(div)
		img.set('alt', imgElem.get('alt'))
		img.set('tween', { link: 'cancel', duration: 300 })
		img.setProperty('src', imgElem.src)
		img.set('morph', { link: 'cancel', duration: 300})
	}
}