//
// 
//  fotonav.js
//
//  Created by  on 2008-10-18.
//  Copyright (c) 2008 murat n konar. All rights reserved.
//

/*


<ul id='fotonav-list'>
	<li><img id='previous' src='images/previous-btn.png'/></li>
	<li><a href='#' id='fotonav-0' class='fotonav-index'>00</a></li>
	<li><a href='#' id='fotonav-1'class='fotonav-index'>01</a></li>
	<li><a href='#' id='fotonav-2'class='fotonav-index'>02</a></li>
	<li><a href='#' id='fotonav-3'class='fotonav-index'>03</a></li>
	<li><a href='#' id='fotonav-4'class='fotonav-index'>04</a></li>
	<li><a href='#' id='fotonav-5'class='fotonav-index'>05</a></li>
	<li><a href='#' id='fotonav-6'class='fotonav-index'>06</a></li>
	<li><a href='#' id='fotonav-7'class='fotonav-index'>07</a></li>
	<li><a href='#' id='fotonav-8'class='fotonav-index'>08</a></li>
	<li><a href='#' id='fotonav-9'class='fotonav-index'>09</a></li>
	<li><a href='#' id='fotonav-10'class='fotonav-index'>10</a></li>
	<li><a href='#' id='fotonav-menu'>menu</a></li>
	<li><img id='menu-button' src='images/menu-btn.png'/></li> 
	<li><img id='next' src='images/next-btn.png'/></li>
</ul>


*/

var kMaxFotonavOpacity = 0.9 // this has to be 0.9 or IE will mess up.

var kOnColor 	= '#fff'
var kOffColor 	= '#333'
var kHoverColor = '#ccc'

var kArrowHighlightedOpacity = 1
var kArrowUnhighlightedOpacity = 0.2

var kMouseIsOverUnknown 	= 0
var kMouseIsOverLeftHalf 	= 1
var kMouseIsOverRightHalf 	= 2
var kMouseIsOverMenuButton 	= 3

var FotonavController = new Class({

	// ------------------------------------------------------------------------------------------------------------
    initialize: function(nodesParent) {
		this.parentNode = nodesParent
		this.parentNode.store('fader', new Fx.Tween(nodesParent, {property:'opacity', duration: kFadeDuration, fps: 30}))
		
		this.parentNode.retrieve('fader').set(0) // create ourselves invisible; we'll get shown later by out client
		
		// remove placeholder
		$('fotonav-list').destroy()
		
		this.fotonavCluster = new Element('ul', {'id': 'fotonav-list'})
		this.parentNode.adopt(this.fotonavCluster)


		// Add 'previous' arrow
		var previousLiNode = new Element('li')
		var previousImageNode = new Element('img', {'id': 'previous', 'src': 'images/previous-btn.png'})
		previousLiNode.adopt(previousImageNode)
		this.fotonavCluster.adopt(previousLiNode)


		// Make and add 100 invisible fotonav nodes
		this.fotonavNodes = new Array()
		for (var f = 0; f < 100; f++)
		{
			var newFotonavNode = this.makeFotonavNode(f)
			this.fotonavNodes.push(newFotonavNode)
			this.fotonavCluster.adopt(newFotonavNode)
			this.showFotonavNode(f, false)
		}

		// Add 'menu' button
		var menuLiNode = new Element('li')
		var menuAnchorNode 	= new Element('a', {'id': 'fotonav-menu', 'class': 'fotonav-index', 'href': '#'})
		menuAnchorNode.appendText('menu')
		menuAnchorNode.addEvent('click', showMenu)
		menuAnchorNode.addEvent('mouseover', this.makeMenuButtonRollOverHandler(menuAnchorNode))
		menuAnchorNode.addEvent('mouseout', this.makeMenuButtonRollOutHandler(menuAnchorNode))
		menuLiNode.adopt(menuAnchorNode)
		this.fotonavCluster.adopt(menuLiNode)

		// Add 'next' arrow
		var nextLiNode = new Element('li')
		var nextImageNode = new Element('img', {'id': 'next', 'src': 'images/next-btn.png'})
		nextLiNode.adopt(nextImageNode)
		this.fotonavCluster.adopt(nextLiNode)

		this.fotonavCluster.setStyle('opacity', kMaxFotonavOpacity) // makes white on black text look nicer in Safari
		
		// Arrow highlighting

		this.shouldShowPreviousArrow = true;
		this.shouldShowNextArrow = true;

		this.previousArrowNode 	= previousLiNode
        this.nextArrowNode 		= nextLiNode

		this.previousArrowNode.set('morph', {'duration': 250})
		this.nextArrowNode.set('morph', {'duration': 250})

		this.previousArrowNode.setStyle('opacity', kArrowUnhighlightedOpacity)
		this.nextArrowNode.setStyle('opacity', kArrowUnhighlightedOpacity)

		this.mouseIsInLeftHalf = false
		this.mouseIsOver = kMouseIsOverUnknown
		
		this.lastMouseEvent = undefined
		
		var self = this
		window.document.addEvent('mousemove', function (event){self.mouseMonitor(event)})

		this.previousArrowNode.addEvent('mousedown', function (){return false;}) // prevent user from dragging element (can f*ck up Safari by causing an autoscroll)
		this.nextArrowNode.addEvent('mousedown', 	function (){return false;}) // prevent user from dragging element (can f*ck up Safari by causing an autoscroll)
	},
	
	// ------------------------------------------------------------------------------------------------------------
	makeFotonavNode: function(fotoIndex)
	{
		var liNode 		= new Element('li')
		var anchorNode 	= new Element('a', {'id': 'fotonav-' + fotoIndex, 'class': 'fotonav-index', 'href': '#'})
	
		var anchorText 	= (fotoIndex+1).toString()	
		
		// Zero pad the anchorText (assume we'll never have more than 100 items).
		if (anchorText.length < 2) {
			anchorText = '0' + anchorText
		}
		
		//var path = newGalleryIndex.toString() + '/' + fotoIndex.toString()
		var path = '0' + '/' + fotoIndex.toString()
		var clickFunction = this.makeFotonavClickHandler(fotoIndex)
	
		anchorNode.addEvent('click', clickFunction)
		anchorNode.addEvent('mouseover', this.makeFotonavRollOverHandler(anchorNode))
		anchorNode.addEvent('mouseout', this.makeFotonavRollOutHandler(anchorNode))
		anchorNode.store('current', false)
		
		anchorNode.appendText(anchorText)
		liNode.adopt(anchorNode)
		return liNode
	},
	
	// ------------------------------------------------------------------------------------------------------------
	syncFotonavNodes: function(galleryIndex, fotoCount)
	{
		this.galleryIndex = galleryIndex
		
		// Hide the excess fotonav nodes, unhide nodes that we need
		for (var f = 0; f < 100; f++)
		{
			this.showFotonavNode(f, (f < fotoCount))
		}
	},
	
	// ------------------------------------------------------------------------------------------------------------
	showFotonavNode: function (fotoIndex, show)
	{
		if (show)
		{
			this.fotonavNodes[fotoIndex].setStyle('display', 'inline')
		}
		else
		{
			this.fotonavNodes[fotoIndex].setStyle('display', 'none')
		}
	},
	
	// ------------------------------------------------------------------------------------------------------------
	setCurrentFotonavLink: function (oldFotoIndex, newFotoIndex)
	{
		if ($defined(oldFotoIndex) && $defined($('fotonav-'+oldFotoIndex)))
		{
			$('fotonav-'+oldFotoIndex).tween('color', kOffColor)
			$('fotonav-'+oldFotoIndex).store('currentFoto', false)
		}

		if ($defined(newFotoIndex) && $defined($('fotonav-'+newFotoIndex)))
		{
			$('fotonav-'+newFotoIndex).tween('color', kOnColor)
			$('fotonav-'+newFotoIndex).store('currentFoto', true)
		}
	},
	
	// ------------------------------------------------------------------------------------------------------------
	makeFotonavClickHandler: function(fotoIndex)
	{	
		var self = this
		return function (){goto(self.galleryIndex + '/' + fotoIndex); return false;}
	},

	// ------------------------------------------------------------------------------------------------------------
	makeFotonavRollOverHandler: function (node)
	{
		return 	function () 
				{
					if (!node.retrieve('currentFoto'))
					{
						node.tween('color', kHoverColor)
						return false
					}
				}
	},

	// ------------------------------------------------------------------------------------------------------------
	makeFotonavRollOutHandler: function (node)
	{
		return 	function () 
				{
					if (!node.retrieve('currentFoto'))
					{
						node.tween('color', kOffColor)
						return false
					}
				}
	},

	// ------------------------------------------------------------------------------------------------------------
	makeMenuButtonRollOverHandler: function (node)
	{
		return 	function () 
				{
					node.tween('color', kHoverColor)
					return false
				}
	},

	// ------------------------------------------------------------------------------------------------------------
	makeMenuButtonRollOutHandler: function (node)
	{
		return 	function () 
				{
					node.tween('color', kOffColor)
					return false
				}
	},
	
	// ------------------------------------------------------------
	updateArrowHighlighting: function ()
	{

		var newPreviousArrowOpacity = 0
		var newNextArrowOpacity = 0

		switch(this.mouseIsOver)
		{
			case kMouseIsOverLeftHalf:
				newPreviousArrowOpacity = (this.shouldShowPreviousArrow? kArrowHighlightedOpacity:0)
				newNextArrowOpacity 	= (this.shouldShowNextArrow? kArrowUnhighlightedOpacity:0)
				break;

			case kMouseIsOverRightHalf:
				newPreviousArrowOpacity = (this.shouldShowPreviousArrow? kArrowUnhighlightedOpacity:0)
				newNextArrowOpacity 	= (this.shouldShowNextArrow? kArrowHighlightedOpacity:0)
				break;

			case kMouseIsOverMenuButton:
				newPreviousArrowOpacity = (this.shouldShowPreviousArrow? kArrowUnhighlightedOpacity:0)
				newNextArrowOpacity 	= (this.shouldShowNextArrow? kArrowUnhighlightedOpacity:0)
				break;

			default:
				;

		}

		this.previousArrowNode.morph({'opacity': newPreviousArrowOpacity})
		this.nextArrowNode.morph({'opacity': newNextArrowOpacity})			
	},

	// ------------------------------------------------------------
	mouseMonitor:function(anEvent)
	{
		if (anEvent && this.mouseIsOver != kMouseIsOverMenuButton)
		{
			// If the x coord of the even is left of center, we'll highlight the 'previous' button, 
			// otherwise we'll we'll highlight the 'next' button.

			var xMin = globalz.pagewrap.getPosition()['x']
			var xMax = xMin + globalz.pagewrap.getSize().x

			var newMouseIsOver = (anEvent.client.x < (xMin+xMax)/2) ? kMouseIsOverLeftHalf:kMouseIsOverRightHalf

			if (newMouseIsOver != this.mouseIsOver) {
				this.mouseIsOver = newMouseIsOver
				this.updateArrowHighlighting()
			}
		}
		this.lastMouseEvent = anEvent
	},
	
	
	// ------------------------------------------------------------
	showPrevious: function(show)
	{
		if (show != this.shouldShowPreviousArrow) {
			this.shouldShowPreviousArrow = show
			this.updateArrowHighlighting()
		}
	},

	// ------------------------------------------------------------
	showNext: function(show)
	{
		if (show != this.shouldShowNextArrow) 
		{
			this.shouldShowNextArrow = show
			this.updateArrowHighlighting()
		}
	}
})