var fadeLarge 		= 1000;

function Timeline() 
{
    this.counter = 0;    
    this.Append = function( func, interval ) 
    {
        setTimeout( func, this.counter );
        this.counter = this.counter + interval;
    };
    this.Sleep = function( interval ) 
    {
        this.counter = this.counter + interval;
    };
}

function opacity(id, opacStart, opacEnd, millisec) 
{
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;
 
    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) 
    {
        for(i = opacStart; i >= opacEnd; i--) 
        {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } 
    else if(opacStart < opacEnd) 
    {
        for(i = opacStart; i <= opacEnd; i++)
        {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}
 
//change the opacity for different browsers
function changeOpac(opacity, id) 
{
    var object = document.getElementById(id).style;
	if(opacity == 0)
	{
		object.visibility = 'hidden';
	}
	else
	{
		object.visibility = 'visible';
	}
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function changeMainImage(source,title,text)
{
	var timeline = new Timeline();
	
	timeline.Append("opacity('mainImage', 100, 0, fadeLarge)", fadeLarge );
	timeline.Append("changeLargeImageSource('" + source + "','" + title + "','" + text + "')", 50 );
	timeline.Append("opacity('mainImage', 0, 100, fadeLarge)", fadeLarge );
}
 
function changeLargeImageSource(source,title,text)
{
	var mainImage = document.getElementById('mainImage');
	
	var mainImageText = document.getElementById('text');
	
	// hide image and change source
	mainImage.style.visibility = 'hidden';
	mainImage.src = source;
	
	mainImage.alt = title;
	mainImageText.firstChild.data = text;		
}

function changeMainImageDetails(type)
{
	var timeline = new Timeline();
	
	timeline.Append("opacity('mainImage', 100, 0, 10)", fadeLarge );
	timeline.Append("changeImage('" + type + "')", 50 );
	timeline.Append("opacity('mainImage', 0, 100, 10)", fadeLarge );
}

function changeImage(type)
{
	var img_large = document.getElementById('mainImage');
	
	if(type == 'large')
	{	
		img_large.src = img_large.src.replace('_2.', '_1.');
	}
	else
	{
		img_large.src = img_large.src.replace('_1.', '_2.');
	}
}

window.onload = function() {opacity('mainImage', 0, 100, 1000)};