//initial z-index -- will increase by 1 every time an image is rolled over
var zIndex = 100;
//the fade in time in milliseconds
var inTime = 0;
//the fade out time in milliseconds
var outTime = 300;
var title;

var height = 0.8;
var opacity = .3;
var largeGap = 30;
var smallGap = 8;

function periodic() {
	title = $('elementTitle');
	
	var elements = $$('#fisheye_table div.element img');
	lastItem = elements[0];
	for (var i=0; i < elements.length; i++) 
	{
		var element = elements[i];
		
		//store the image's coordinates
		var coord = element.getCoordinates($('fisheye_table'));
		var top = coord.top;
		var left = coord.left;
		element.store('xPos', left);
		element.store('yPos', top);
		
		//store the image's src for the small and large thumbnails
		var source = element.getProperty('src');
		var pos = source.indexOf('_sm.png', 0);
		var imageName = source.substr(0, pos);
		element.store('mediumSource', imageName + '_md.png');
		element.store('smallSource', source);
		element.store('reflection', false);
		
		//preload the medium size thumbnail
		var mediumImage = new Asset.image(imageName + '_md.png');
		
		//make the image's position absolute
		element.setStyles({'position':'absolute', 'float':'none', 'left': element.retrieve('xPos'), 'top': element.retrieve('yPos'), 'width':67, 'height':67, 'zIndex':20});
		
		//add the roll over and roll out events
		element.addEvent('mouseenter', function() {over(this);});
		element.addEvent('mouseleave', function() {out(this);});
		
		//create element reflection for the elements on the bottom row if the browser is not an iphone or ipod touch
		if (! Browser.Platform.ipod)
		{
			if (i >= 36)
			{
				var reflection, canvas, gradient;
				var holder = new Element('span', {styles: {display: 'block', backgroundColor: '#232323', position: 'absolute', marginTop: element.get('top') + element.height, 'top': element.retrieve('yPos') + largeGap}});
				if (Browser.Engine.trident) 
				{
					reflection = new Element('img', {src: element.src, styles: {width:element.width, height:element.height, marginBottom: -element.height + (element.height * height), filter: "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (height * 100) + ")"}});
				} else {
					reflection = new Element('canvas');
					updateReflection(element, reflection, element.retrieve('smallSource'), 67, 67);
				}
				holder.grab(reflection);
				element.getParent().getParent().grab(holder);
				element.store('reflection', true);
			}
		}
		
		//strip out the title tag, it's not needed since javascript is enabled
		element.setProperty('title', '');
	}
	
	if (Browser.Engine.trident4)
	{
		$('spotlight').setStyles({'behavior': 'url(/assets/iepngfix/iepngfix.htc)', 'zIndex': 7});
	}
};

function over(element)
{	
	var inTransition = Fx.Transitions.linear;
	
	//The element
	(function() { this.setProperty('src', this.retrieve('mediumSource'));}).delay(inTime * .5, element);
	element.setStyles({'width':67, 'height':67, 'zIndex':zIndex++});
	element.set('morph', {duration:inTime, link:'cancel', transition:inTransition});
	element.morph({'width':90, 'height':90, 'left': (element.retrieve('xPos') - 12), 'top': (element.retrieve('yPos') - 12)});
	
	//The element reflection
	if ( element.retrieve('reflection') == true)
	{
		var reflection, beginHeight, endHeight;
		if (Browser.Engine.trident) 
		{
			reflection = element.getParent().getParent().getElement('span').getElement('img');
			
			beginHeight = 67;
			endHeight = 90;
		} else {
			reflection = element.getParent().getParent().getElement('span').getElement('canvas');
			beginHeight = 67 * height;
			endHeight = 90 * height;
		}
		
		var holder = reflection.getParent();
		holder.setStyles({'width':67, 'height':beginHeight, 'zIndex':5});
		holder.set('morph', {duration:inTime, link:'cancel', transition:inTransition});
		holder.morph({'width':90, 'height':endHeight, 'left': (element.retrieve('xPos') - 12), 'top': (element.retrieve('yPos')+11) + smallGap});
		
		reflection.setStyles({'width':67, 'height':beginHeight});
		reflection.set('morph', {duration:inTime, link:'cancel', transition:inTransition});
		reflection.morph({'width':90, 'height':endHeight});
		
		(function() { 
			updateReflection(element, reflection, element.retrieve('mediumSource'), 90, 90);
			holder.setStyle('zIndex', 6);								 
		}).delay(inTime * .5, element);
	}
}

function out(element)
{
	//The element
	element.set('morph', { duration:outTime, link:'cancel', transition:Fx.Transitions.Sine.easeOut});
	element.morph({'left': element.retrieve('xPos'), 'top': element.retrieve('yPos'), 'width':67, 'height':67});
	element.setProperty('src', element.retrieve('smallSource'));
		
	//The element reflection
	if ( element.retrieve('reflection') == true)
	{
		var reflection, beginHeight, endHeight;
		if (Browser.Engine.trident) 
		{
			reflection = element.getParent().getParent().getElement('span').getElement('img');
			beginHeight = 90;
			endHeight = 67;
		} else {
			reflection = element.getParent().getParent().getElement('span').getElement('canvas');
			beginHeight = 90 * height;
			endHeight = 67 * height;
		}
		
		var holder = reflection.getParent();
		holder.setStyle('zIndex', 4);
		holder.set('morph', {duration:outTime, link:'cancel', transition:Fx.Transitions.Sine.easeOut});
		holder.morph({'width':67, 'height':endHeight, 'left': (element.retrieve('xPos')), 'top': (element.retrieve('yPos') + largeGap)});
		
		reflection.set('morph', {duration:outTime, link:'cancel', transition:Fx.Transitions.Sine.easeOut});
		reflection.morph({'width':67, 'height':endHeight});
		updateReflection(element, reflection, element.retrieve('smallSource'), 67, 67);
		holder.setStyle('zIndex', 3);
	}
}

function updateReflection(element, reflection, imgSrc, imgWidth, imgHeight)
{
	if (reflection.get('tag') == 'img')
	{
		reflection.setProperty('src', imgSrc);
		reflection.setStyles({width:element.width, height:element.height, marginBottom: -element.height + (element.height * height), filter: "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (height * 100) + ")"});
	}
	else if (reflection.get('tag') == 'canvas')
	{

		var img = new Image();
		img.addEvent('load', function()
		{
			canvas = reflection.setProperties({width: imgWidth, height: imgHeight * height}).getContext("2d");
			canvas.width = imgWidth;
			canvas.save();
			canvas.translate(0, imgHeight - 1);
			canvas.scale(1, -1);						  
			canvas.drawImage(img, 0, 0, imgWidth, imgHeight);
			canvas.restore();
			canvas.globalCompositeOperation = "destination-out";
	
			gradient = canvas.createLinearGradient(0, 0, 0, (imgHeight * height));
			gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity) + ")");
			gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
			canvas.fillStyle = gradient;
			canvas.rect(0, 0, imgWidth, (imgHeight * height));
			canvas.fill();
		});
		img.src = imgSrc;
	}
}

var _fadeOutOpacity = .4;
var _fadeOutTime = 1000;
function legend()
{
    $$('#legend li').each(function(element, index) {
        element.set('morph', { duration:_fadeOutTime, link:'cancel', transition:Fx.Transitions.Sine.easeOut});
        element.setStyle('cursor', 'pointer');
        element.addEvent('mouseenter', function() {legendFadeOutExcept(this);});
    });
    
    $('legend').addEvent('mouseleave', legendFadeInAll);
	//fix for legend jump on first rollover in ie
	if (Browser.Engine.trident)
	{$('legend').fireEvent('mouseleave');}
}

function legendFadeOutExcept(element)
{
    
    //fade out the other legend li's
    $$('#legend li').each(function(legend_li) {
        if (legend_li != element)
        {
            legend_li.morph({opacity: _fadeOutOpacity});
        }
    });
    element.morph({opacity: 1});
    
    var category = element.getProperty('id');
    //fade out all elements except for the category
    $$('#fisheye_table div.element').each(function(periodic_div) {
        //periodic_div.set('morph', {duration:_fadeOutTime, link:'cancel', transition:Fx.Transitions.Sine.easeOut});
        if (periodic_div.hasClass(category) == false )
        {
            //fade out the element
            var element = periodic_div.getFirst('a').getFirst('img');
            element.tween('opacity', _fadeOutOpacity);
            if (element.retrieve("reflection") == true)
            {
                var reflection = element.getParent().getParent().getElement('span');
                reflection.tween('opacity', _fadeOutOpacity);
            }
        }
        else
        {
            //fade in the element
            var element = periodic_div.getFirst('a').getFirst('img');
            element.tween('opacity', 1);
            if (element.retrieve("reflection") == true)
            {
                var reflection = element.getParent().getParent().getElement('span');
                reflection.tween('opacity', 1);
            }
        }
    });
}

function legendFadeInAll()
{
    $$('#legend li').each(function(legend_li) {
        legend_li.morph({opacity: 1});
    });
    
    $$('#fisheye_table div.element').each(function(periodic_div) {
        //periodic_div.getFirst('a').getFirst('img').morph({opacity: 1});	
        var element = periodic_div.getFirst('a').getFirst('img');
        element.tween('opacity', 1);
        if (element.retrieve("reflection") == true)
        {
            var reflection = element.getParent().getParent().getElement('span');
            reflection.tween('opacity', 1);
        }
    });
}

window.addEvent('domready', function()
{
	periodic();
	legend();
});