/*
Name:       expandBox
Version:    0.3.1 (Januar 27 2010)
Company:    stadt.werk	
Author:     Finn Rudolph
Support:	rudolph@stadtwerk.org

Licence:    expandBox is licensed under a Creative Commons 
            Attribution-Noncommercial 3.0 Unported License 
            (http://creativecommons.org/licenses/by-nc/3.0/).

            You are free:
                + to Share - to copy, distribute and transmit the work
                + to Remix - to adapt the work

            Under the following conditions:
                + Attribution. You must attribute the work in the manner specified by the author or licensor 
                  (but not in any way that suggests that they endorse you or your use of the work). 
                + Noncommercial. You may not use this work for commercial purposes. 

            + For any reuse or distribution, you must make clear to others the license terms of this work.
            + Any of the above conditions can be waived if you get permission from the copyright holder.
            + Nothing in this license impairs or restricts the author's moral rights.
*/


/* expandBox constructor */
function expandBox()
{
	/* Closure for this */
	var my = this;

	/* Initiate expandBox */
	this.init = function(boxId)
	{
		this.boxId = boxId;
		this.maxHeight = 162.0;
		this.minHeight = 80.0;

		/* Try to get box element */
		var boxExists = document.getElementById(my.boxId);
		if(boxExists)
		{
			this.box = boxExists;
			my.setEvents();
			
			/* Add resize event and run scaler onload */
			my.addResizeEvent();
			my.Scaler.start();
		}
	};
	
	this.setEvents = function()
	{
		my.addEvent(my.box,'mouseover',my.over);
		my.addEvent(my.box,'mouseout',my.out);

		/* Store url in the box object */
		my.box.url = my.getAnchor(my.box);

		/* Link expandBox to that url */
		my.addEvent(my.box,'click',function() { document.location = my.box.url; });
	};
	
	/* Returns href attribute of the first anchor element inside the expandBox */
	this.getAnchor = function(element)
	{
		anchors = element.getElementsByTagName('a');
		if(anchors.length > 0)
		{
			var url = anchors[0].getAttribute('href');
			return url;
		}
	};
	
	this.over = function()
	{
		my.Action.type = 'expand';
		my.Renderer.start();
	};
	
	this.out = function()
	{
		my.Action.type = 'collapse';
		my.Renderer.start();
	};
	
	this.Action =
	{
		type: '',
		stepWidth: 1.0,
		
		expand: function()
		{
			my.box.style.height = (my.box.offsetHeight + my.Action.stepWidth) + 'px';
		},
		
		collapse: function()
		{
			my.box.style.height = (my.box.offsetHeight - my.Action.stepWidth) + 'px';
		}
	};
	
	this.Renderer =
	{
		start: function()
		{
			my.Renderer.interval = window.setInterval(my.Renderer.loop,30);
		},

		stop: function()
		{	
			window.clearInterval(my.Renderer.interval);
		},

		loop: function()
		{	
			var height = my.box.offsetHeight;
		
			if(my.Action.type === 'expand')
			{
				if(height < my.maxHeight)
				{
					my.Action.expand();
				}
				else
				{
					my.Renderer.stop();
				}
			}
			if(my.Action.type === 'collapse')
			{
				if(my.box.offsetHeight > my.minHeight)
				{
					my.Action.collapse();
				}
				else
				{
					my.Renderer.stop();
				}
			}
		}
	};
	
	/* Set scale in relation to the viewport height */
	this.Scaler =
	{
		start: function()
		{
			var viewport = my.Scaler.getViewport();
			my.Scaler.setScale(viewport[1]);
		},
		
		setScale: function(viewportHeight)
		{
			var classname = 'expandBox';
			if(viewportHeight < 600)
			{
				classname = 'expandBox small';
				my.minHeight = 35.0;
			}
			else{
				my.minHeight = 80.0;
			}
			my.box.setAttribute('class',classname);
			my.box.setAttribute('className',classname);
			my.box.style.height = my.minHeight + 'px';
		},
		
		getViewport: function()
		{
			var viewport = [];
			if (typeof window.innerWidth != 'undefined')
			{
				viewport[0] = window.innerWidth;
				viewport[1] = window.innerHeight;
			}
			else
			{
				viewport[0] = document.documentElement.clientWidth;
				viewport[1] = document.documentElement.clientHeight;
			}
			return viewport;
		}
	};
	
	
	this.addResizeEvent = function()
	{
		var otherFunctions = window.onresize;
		if(typeof window.onresize != 'function')
		{
			window.onresize = function()
			{
				my.Scaler.start();
			};
		}
		else
		{
			window.onresize = function(){
				if (otherFunctions)
				{
					otherFunctions();
				}
				my.Scaler.start();
			};
		}
	};

	
	/* Add events */
	this.addEvent = function(obj, type, fn)
	{
		if(obj.addEventListener)
		{
			obj.addEventListener(type, fn, false);
		}
		else if(obj.attachEvent)
		{
			obj["e"+type+fn] = fn;
			obj[type+fn] = function() { obj["e"+type+fn]( window.event ); };
			obj.attachEvent( "on"+type, obj[type+fn] );
		}
	};
}

/* Instantiates expandBoxes */
var expandBoxFactory = {
	
	/* Get DOM elements by class name */
    getElementsByClass: function (searchClass, tag, node) 
	{
		var classElements = [];
		var els = node.getElementsByTagName(tag);
		var elsLen = els.length;
		var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
		for(var i = 0, j = 0; i < elsLen; i++)
		{
			if(pattern.test(els[i].className))
			{
				classElements[j] = els[i];
				j++;
			}
		}
		return classElements;
    },
	
	/* Instantiate expandBox for each div element with the class name 'expandBox' */
	run: function()
	{
		var keyString = 'expandBox';
		var boxElements = expandBoxFactory.getElementsByClass(keyString,'DIV',document);
		var max = boxElements.length;
		var instanceName = '';
		for(var j=0; j<max; j++)
		{
			instanceName = keyString+'_'+j;
			boxElements[j].setAttribute('id',instanceName);
			boxElements[j].setAttribute('class',keyString);
			boxElements[j].setAttribute('className',keyString);
			this[instanceName] = new expandBox();
			this[instanceName].init(instanceName);
		}
	}
};

/* Create expandBox instance when the DOM structure has been loaded */
domReady(function()
{
	expandBoxFactory.run();
});