var art_scroll_req;
var art_main_req;
var art_scroll_first = 0;
var art_main_first = 0;

function toggle (id, offon)
{
	document.getElementById(id).style.visibility = offon == false ? 'hidden' : 'visible';
	return false;
}

function art_main (offset)
{
	toggle('art', false);
	
	art_main_req = offset == -1 || offset == 1
		? ajax_request('/ajax/service/art/' + (offset == -1 ? 'before' : 'after') + '/' + art_main_first + '/', art_main_flush)
		: ajax_request('/ajax/service/art/at/' + (offset == null ? 'random' : offset) + '/', art_main_flush);
	
	return false;
}

function art_main_flush ()
{
	if (!art_main_req || art_main_req.readyState != 4)
		return;

	var art = art_main_req.responseXML.getElementsByTagName('art');
	var source = document.getElementById('art');
	var credit = document.getElementById('shadow');
	
	art_main_first = art[0].getElementsByTagName('id')[0].firstChild.nodeValue;
	var full = art[0].getElementsByTagName('art_full')[0].firstChild.nodeValue;
	var name = art[0].getElementsByTagName('artist_name')[0].firstChild.nodeValue;
	var url = art[0].getElementsByTagName('artist_url')[0].firstChild.nodeValue;

	// update scroller
	art_scroller_move(art_main_first);
	
	var image = document.createElement('img');
	image.onload = addReflections;
	
	image.width = 900;
	image.height = 280;
	image.alt = name;
	image.title = name;
	image.className = 'left reflect rheight25 ropacity50';
	image.src = '/media/art/full/' + full;
	
	source.innerHTML = '';
	source.appendChild(image);
	credit.innerHTML = '<a href="' + url + '"><img src="../media/link.gif" width="9" height="8" title="" alt="" />' + name + '</a>';
	
	toggle('art', true);
}

function art_scroller_move (offset)
{
	offset = offset == null ? art_scroll_first : offset;
	
    art_scroll_req = ajax_request('/ajax/service/art/offset/' + offset + '/', art_scroller_flush);
    return false;
}

function art_scroller_flush ()
{
	if (!art_scroll_req || art_scroll_req.readyState != 4)
		return;
	
    var art = art_scroll_req.responseXML.getElementsByTagName('art');
    var append_to = document.getElementById('scroller-content');

    append_to.innerHTML = '';
    art_scroll_first = art[0].getElementsByTagName('id')[0].firstChild.nodeValue;

	var mid    = 5;
	var start  = 0.1;
	var target = 0.75;
	var opac_per_step = (target - start) / mid;

    for (var i = 0; i < art.length && i <= 11; i++)
    {
        var thumb = art[i].getElementsByTagName('art_thumb')[0].firstChild.nodeValue;
        var name = art[i].getElementsByTagName('artist_name')[0].firstChild.nodeValue;
        var id = art[i].getElementsByTagName('id')[0].firstChild.nodeValue;

        var div = document.createElement('div');

		div.className = "thumb";
        //div.style.left = (i * 75) + 'px';

		if (i == 0)
		{
			set_opacity(div, start);
		}
		else
	 		if (i == mid)
			{
				set_opacity(div, 1);
				div.className = 'thumb midthumb';
			}
			else
				if (i < mid)
					set_opacity(div, start + (i * opac_per_step));
				else
					set_opacity(div, target - ((i - mid) * opac_per_step));

		div.innerHTML = '<a href="#" title="' + name + '" onclick="return art_main(' + id + ');">'
		              + '<img src="../media/art/thumb/' + thumb + '" width="65" height="50" title="' + name + '" alt="' + name + '" />'
		              + '</a>';
		
        append_to.appendChild(div);
    }
}

function set_opacity (obj, val)
{
	obj.setAttribute('filter', 'alpha(opacity=' + (val * 100) + ')');
	obj.setAttribute('style', '-moz-opacity:' + val);
	obj.style.opacity = val;
}

function ajax_request (url, process_func)
{   
    var request = window.XMLHttpRequest
        ? new XMLHttpRequest()
        : new ActiveXObject('Microsoft.XMLHTTP');
    request.onreadystatechange = process_func;
    request.open('GET', 'http://www.mykoala.com' + url, true);
    window.XMLHttpRequest ? request.send(null) : request.send();
    return request;
}

function fade (id, start_opacity, end_opacity, duration) { 
	var direction = start_opacity > end_opacity ? -1 : 1;
    var timer = 0;
    var speed = Math.round(duration / 100);
	var object = document.getElementById(id).style;
	
	toggle(id, 'on');

	for (i = start_opacity; i - direction != end_opacity; i += direction) {
		setTimeout('fade_step(' + i + ', "' + id + '")', (timer++ * speed)); } 

	if (direction == -1) toggle(id, 'off');
} 

function fade_step (opacity, id) { 
	var object = document.getElementById(id).style;
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = 'alpha(opacity=' + opacity + ')'; 
}

document.getElementsByClassName = function (className) {
	var children = document.getElementsByTagName('*') || document.all;
	var elements = new Array();
  
	for (var i = 0; i < children.length; i++) {
		var child = children[i];
		var classNames = child.className.split(' ');
		for (var j = 0; j < classNames.length; j++) {
			if (classNames[j] == className) {
				elements.push(child);
				break;
			}
		}
	}
	return elements;
}

// i forgot where i got this, but thanks dude!  you saved me an additional image request!
// i love you. passionately.
var Reflection = {
	defaultHeight : 0.5,
	defaultOpacity: 0.5,
	
	add: function (image, options) {
		Reflection.remove(image);
		
		doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
		if (options) {
			for (var i in doptions) {
				if (!options[i]) {
					options[i] = doptions[i];
				}
			}
		} else {
			options = doptions;
		}
	
		try {
			var d = document.createElement('div');
			var p = image;

			var classes = p.className.split(' ');
			var newClasses = '';
			for (j=0;j<classes.length;j++) {
				if (classes[j] != "reflect") {
					if (newClasses) {
						newClasses += ' '
					}
					
					newClasses += classes[j];
				}
			}

			var reflectionHeight = Math.floor(p.height*options['height']);
			var divHeight = Math.floor(p.height*(1+options['height']));
			
			var reflectionWidth = p.width;
	
			d.className = newClasses;
			p.className = 'reflected';
			
			d.style.cssText = p.style.cssText;
			p.style.cssText = ' ';
			
			if (document.all && !window.opera) {
				var reflection = document.createElement('img');	

				reflection.src = p.src;
				reflection.style.width = reflectionWidth+'px';

				reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
				reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';
				
				d.style.width = reflectionWidth+'px';
				d.style.height = divHeight+'px';
				p.parentNode.replaceChild(d, p);
				
				d.appendChild(p);
				d.appendChild(reflection);
			} else {
				var canvas = document.createElement('canvas');
				var context = canvas.getContext("2d");
			
				canvas.style.height = reflectionHeight+'px';
				canvas.style.width = reflectionWidth+'px';
				canvas.height = reflectionHeight;
				canvas.width = reflectionWidth;
				
				d.style.width = reflectionWidth+'px';
				d.style.height = divHeight+'px';
				p.parentNode.replaceChild(d, p);
				
				d.appendChild(p);
				d.appendChild(canvas);
				
				context.save();
				
				context.translate(0,image.height-1);
				context.scale(1,-1);
				
				context.drawImage(image, 0, 0, reflectionWidth, image.height);

				context.restore();
				
				context.globalCompositeOperation = "destination-out";
				var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
				
				gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
				gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");
	
				context.fillStyle = gradient;
				if (navigator.appVersion.indexOf('WebKit') != -1) {
					context.fill();
				} else {
					context.fillRect(0, 0, reflectionWidth, reflectionHeight*2);
				}
			}
		} catch (e) {
	    }
	},
	
	remove : function (image) {
		if (image.className == "reflected") {
			image.className = image.parentNode.className;
			image.parentNode.parentNode.replaceChild(image, image.parentNode);
		}
	}
}

function addReflections () {
	var rimages = document.getElementsByClassName('reflect');
	for (i=0;i<rimages.length;i++) {
		var rheight = null;
		var ropacity = null;
		
		var classes = rimages[i].className.split(' ');
		for (j=0;j<classes.length;j++) {
			if (classes[j].indexOf("rheight") == 0) {
				var rheight = classes[j].substring(7)/100;
			} else if (classes[j].indexOf("ropacity") == 0) {
				var ropacity = classes[j].substring(8)/100;
			}
		}

		Reflection.remove(rimages[i]);
		Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
	}
}

function register_onload (func)
{
    if (typeof window.onload != 'function')
        window.onload = func;
    else
    {
        var oldonload = window.onload;
        window.onload =
            function()
            {
                oldonload();
                func();
            }
    }
}