/**
 * @author Master
 * 
 *  Images that are not loaded should be hidden.
 *  Transitions should never touch the visibility property of images, but can do anything to the div holders.
 *  
 *  changed 12. may 2010
 *  
 *  depends on resize_image.js
 */



function Slide_Show(name, width, height, imageArrStr, imageURL, transition, loadWheelURL)
{
    this.name = name;
    this.width = width;
    this.height = height;
    this.imagePathArr = new Array();
    this.imagePathArr = imageArrStr.split("|");
    this.imageURL = imageURL;
    this.transition = transition;
    this.loadWheelURL = loadWheelURL;
		
    this.canvas;
    this.imageFrameCurrentImage;
    this.imageFrameTransitionImage;
    this.imageFrameCurrentImageID 		= "imageFrameCurrentImage_" + this.name;
    this.imageFrameTransitionImageID	= "imageFrameTransitionImage_" + this.name;
    this.imageCurrentImage;
    this.imageTransitionImage;
    this.imageCurrentImageID 	= "imageCurrentImage_" + this.name;
    this.imageTransitionImageID	= "imageTransitionImage_" + this.name;
	
    this.canvas = document.createElement( "div" );
    this.canvas.setAttribute( "id", "canvas_" + this.name );
	
    this.imageFrameCurrentImage = document.createElement( "div" );
    this.imageFrameCurrentImage.setAttribute( "id", this.imageFrameCurrentImageID );
	
    this.imageCurrentImage = document.createElement( "img" );
    this.imageCurrentImage.setAttribute( "id", this.imageCurrentImageID );
	
    this.imageFrameTransitionImage = document.createElement( "div" );
    this.imageFrameTransitionImage.setAttribute( "id", this.imageFrameTransitionImageID );
	
    this.imageTransitionImage = document.createElement( "img" );
    this.imageTransitionImage.setAttribute( "id", this.imageTransitionImageID );
	
    this.imageHolderLoadIndicator = document.createElement( "div" );
    this.imageHolderLoadIndicator.setAttribute( "id", "imageHolderLoadIndicator_" + this.name );
	
    this.imageLoadIndicator = document.createElement( "img" );
    this.imageLoadIndicator.setAttribute( "id", "imageLoadIndicator_" + this.name );
	
    this.imageFrameCurrentImage.appendChild( this.imageCurrentImage );
    this.imageFrameTransitionImage.appendChild( this.imageTransitionImage );
    this.imageHolderLoadIndicator.appendChild( this.imageLoadIndicator );
	
    this.canvas.appendChild( this.imageFrameCurrentImage );
    this.canvas.appendChild( this.imageFrameTransitionImage );
    this.canvas.appendChild( this.imageHolderLoadIndicator );
		
	
    this.canvas.style.position = "absolute";
    this.canvas.style.width = this.width + "px";
    this.canvas.style.height = this.height + "px";
    //this.canvas.style.border = "red 1px solid";
    this.canvas.style.overflow = "hidden";
	
    this.imageFrameCurrentImage.style.position = "absolute";
    this.imageFrameCurrentImage.style.zIndex = "0";
    this.imageFrameCurrentImage.style.width = "100%";
    this.imageFrameCurrentImage.style.visibility = "hidden";
		
    this.imageCurrentImage.style.position = "absolute";
    this.imageCurrentImage.style.border = "none";
		
    this.imageFrameTransitionImage.style.position = "absolute";
    this.imageFrameTransitionImage.style.width = "100%";
    this.imageFrameTransitionImage.style.visibility = "hidden";
		
    this.imageTransitionImage.style.position = "absolute";
    this.imageTransitionImage.style.border = "none";
		
    this.loadIndicator = new Image();
    this.loadIndicator.src = this.loadWheelURL;
	
    this.loadingComplete = false;
    this.loadingCurrently = -1;
	
    //this.imageHolderLoadIndicator = document.getElementById("imageHolderLoadIndicator_" + this.name);
    this.imageHolderLoadIndicator.style.position = "absolute";
    this.imageHolderLoadIndicator.style.visibility = "hidden";
    //this.imageHolderLoadIndicator.style.zIndex = "2";
    //this.imageLoadIndicator = document.getElementById("imageLoadIndicator_" + this.name);
    this.imageLoadIndicator.style.border 	= "none";
    this.imageLoadIndicator.style.position 	= "absolute";
    this.imageLoadIndicator.src = this.loadWheelURL;
	
    this.currentImage = 0;
	
    this.imageObjectArr = new Array();
	
    for (i = 0; i < this.imagePathArr.length; ++i)
    {
        this.imageObjectArr[i] = new Image();
    //this.imageObjectArr[i].src = "";
    }
}

	
function slide_show_append( parent )
{
    parent.appendChild( this.canvas );
}

function slide_show_remove()
{
    this.transition.stop();
    this.canvas.parentNode.removeChild( this.canvas );
}

function slide_show_get_current_image_number()
{
    return (this.currentImage +1);
}

function slide_show_get_total_number_of_images()
{
    return this.imagePathArr.length;
}
function slide_show_set_position(x, y)
{
    this.canvas.style.left = x + "px";
    this.canvas.style.top = y + "px";
}

function slide_show_think()
{
    if (!this.loadingComplete)
        this.preload();
	
    if( (this.imageObjectArr[this.currentImage].src != "" && this.imageObjectArr[this.currentImage].complete) )
    {
        if(this.imageCurrentImage.src != this.imageObjectArr[this.currentImage].src)
            this.change_image();
        this.imageCurrentImage.style.visibility = "visible";
        this.imageHolderLoadIndicator.style.visibility = "hidden";
    }
    else
    {
        this.imageCurrentImage.style.visibility = "hidden";
		
        //positioning the loadwheel
        this.imageHolderLoadIndicator.style.top 		=  ( (this.height/2) - (this.loadIndicator.height/2) ) + "px";
        this.imageHolderLoadIndicator.style.left 		=  ( (this.width/2) - (this.loadIndicator.width/2) ) + "px";
        if(this.loadIndicator.complete)
            this.imageHolderLoadIndicator.style.visibility = "visible";
    }
}

function slide_show_preload()
{
    if( !this.loadIndicator )
        return;
    if( this.loadingComplete )
        return;
	
    if( this.loadingCurrently == -1 || this.imageObjectArr[this.loadingCurrently].complete )
    {
        ++this.loadingCurrently;
        if( this.loadingCurrently == this.imageObjectArr.length )
        {
            this.loadingComplete = true;
        }
        else
        {
            this.imageObjectArr[this.loadingCurrently].src = this.imageURL + this.imagePathArr[this.loadingCurrently];
        //alert("Now loading: " + this.imagePathArr[this.loadingCurrently]);
        //this.currentImage = this.loadingCurrently;
        }
    }
}

function slide_show_change_image()
{

    this.imageFrameTransitionImage.style.visibility = 'hidden';
    this.imageFrameTransitionImage.style.width = '100%';
    this.imageFrameTransitionImage.style.height = '100%';
    this.imageFrameTransitionImage.style.top = '0px';
    this.imageFrameTransitionImage.style.left = '0px';
    this.imageFrameTransitionImage.style.zIndex = '1';
    slide_show_set_opacity(100, this.imageFrameTransitionImageID);
	
    if( this.imageCurrentImage.src != "" )
    {
        this.imageTransitionImage.src = this.imageCurrentImage.src;
        resize_image( this.imageTransitionImage, this.width, this.height );
        this.imageTransitionImage.style.left = ( this.width - parseInt( this.imageTransitionImage.style.width ) ) / 2 + 'px';
        this.imageTransitionImage.style.top = ( this.height - parseInt( this.imageTransitionImage.style.height ) ) / 2 + 'px';
		
        this.imageFrameTransitionImage.style.visibility = 'visible';
    }
	
    this.imageFrameCurrentImage.style.visibility = 'hidden';
    this.imageFrameCurrentImage.style.width = '100%';
    this.imageFrameCurrentImage.style.height = '100%';
    this.imageFrameCurrentImage.style.top = '0px';
    this.imageFrameCurrentImage.style.left = '0px';
    this.imageFrameCurrentImage.style.zIndex = '0';
    slide_show_set_opacity(100, this.imageFrameCurrentImageID);
	
    this.imageCurrentImage.src = this.imageObjectArr[this.currentImage].src;
    resize_image( this.imageCurrentImage, this.width, this.height );
    this.imageCurrentImage.style.left = ( this.width - parseInt( this.imageCurrentImage.style.width ) ) / 2 + 'px';
    this.imageCurrentImage.style.top = ( this.height - parseInt( this.imageCurrentImage.style.height ) ) / 2 + 'px';
	
    this.imageFrameCurrentImage.style.visibility = 'visible';
	
    // Do transition here
    this.transition.do_transition(this.imageCurrentImageID, this.imageFrameCurrentImageID, this.imageTransitionImageID, this.imageFrameTransitionImageID);
}

function slide_show_next_image()
{
    this.currentImage++;
    if( this.currentImage == this.imageObjectArr.length )
        this.currentImage = 0;
}

function slide_show_previous_image()
{
    this.currentImage--;
    if( this.currentImage == -1 )
        this.currentImage = this.imageObjectArr.length - 1;
}

Slide_Show.prototype.append 		= slide_show_append;
Slide_Show.prototype.remove 		= slide_show_remove;
Slide_Show.prototype.set_position 	= slide_show_set_position;
Slide_Show.prototype.think 			= slide_show_think;
Slide_Show.prototype.preload 		= slide_show_preload;
Slide_Show.prototype.change_image 	= slide_show_change_image;
Slide_Show.prototype.next_image 	= slide_show_next_image;
Slide_Show.prototype.previous_image = slide_show_previous_image;

Slide_Show.prototype.get_current_image_number = slide_show_get_current_image_number;
Slide_Show.prototype.get_total_number_of_images = slide_show_get_total_number_of_images;

//////TRANSISITION COLLECTION START//////////////
// Should use inheritance
function transition_swap()
{
    this.do_transition = function( currentImageID, currentImageFrameID, transitionImageID, transitionImageFrameID )
    {
        document.getElementById(transitionImageFrameID).style.visibility = 'hidden';
    };
}

function transition_fade_from_background(transitionTime)
{
    this.transition_time = transitionTime;
    this.speed = Math.round(this.transition_time / 100);
    this.timerArray = new Array();
    
    this.stop = function()
    {
        for (i = 0; i < this.timerArray.length; ++i)
        {
            clearTimeout(this.timerArray[i]);
        }
    };
    
    this.do_transition = function( currentImageID, currentImageFrameID, transitionImageID, transitionImageFrameID )
    {
        // Clear all existing timers
        for (i = 0; i < this.timerArray.length; ++i)
        {
            clearTimeout(this.timerArray[i]);
        }
		
        slide_show_set_opacity(0, currentImageFrameID);
        document.getElementById(transitionImageFrameID).style.visibility = 'hidden';
		
        // Create opacity timers
        var opacity_end = 100;
        var opacity_start = 0;
        var timer = 0;
		
		
        for(i = opacity_start; i <= opacity_end; i++)
        {
            this.timerArray[i] = setTimeout("slide_show_set_opacity(" + i + ",'" + currentImageFrameID + "')",(timer * this.speed));
            timer++;
        }
		
    /*
		var intervalValue = 10;
		var totalOpacityChange = opacity_end - opacity_start;
		var intervalOpacityValue = totalOpacityChange/ (transitionTime/intervalValue);
		
		this.timerArray[0] = setInterval( "change_opacity( " + intervalOpacityValue + ", '" + currentImageFrameID + "')", intervalValue );
		*/
    };
}

//has a problem in ie - please fix
function transition_cross_fade(transitionTime)
{
    this.transition_time = transitionTime;
    this.speed = Math.round(this.transition_time / 100);
    this.timerArray1 = new Array();
    this.timerArray2 = new Array();
    
    this.stop = function()
    {
        // Clear all existing timers
        for (i = 0; i < this.timerArray1.length; ++i)
        {
            clearTimeout(this.timerArray1[i]);
        }
        for (i = 0; i < this.timerArray2.length; ++i)
        {
            clearTimeout(this.timerArray2[i]);
        }
    };
    
    this.do_transition = function( currentImageID, currentImageFrameID, transitionImageID, transitionImageFrameID )
    {
        // Clear all existing timers
        for (i = 0; i < this.timerArray1.length; ++i)
        {
            clearTimeout(this.timerArray1[i]);
        }
        for (i = 0; i < this.timerArray2.length; ++i)
        {
            clearTimeout(this.timerArray2[i]);
        }
		
        slide_show_set_opacity(0, currentImageFrameID);
		
        // Create opacity timers
        var opacity_end 	= 100;
        var opacity_start 	= 0;
        var timer = 0;
		
        for(i = opacity_start; i <= opacity_end; i++)
        {
            this.timerArray1[i] = setTimeout("slide_show_set_opacity(" + i + ",'" + currentImageFrameID + "')",(timer * this.speed));
            timer++;
        }
		
        opacity_end 	= 0;
        opacity_start 	= 100;
        timer = 0;
		
        for(i = opacity_start; i >= opacity_end; i--)
        {
            this.timerArray2[i] = setTimeout("slide_show_set_opacity(" + i + ",'" + transitionImageFrameID + "')",(timer * this.speed));
            timer++;
        }
    };
}

//////TRANSISITION COLLECTION END//////////////

function change_opacity( value, id)
{
    if(document.getElementById(id) == null)
        alert(id);

    var object = document.getElementById(id);
    var currentOpacity = 100 * parseFloat(object.style.opacity);

    var targetOpacityValue = currentOpacity + value;
    slide_show_set_opacity( targetOpacityValue, id );


}

function slide_show_set_opacity(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 + ")";
}


function opacity_fade( id, opacity_start, opacity_end, 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(opacity_start > opacity_end)
    {
        for(i = opacity_start; i >= opacity_end; i--)
        {
            setTimeout("slide_show_set_opacity(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
    else if(opacity_start < opacity_end)
    {
        for(i = opacity_start; i <= opacity_end; i++)
        {
            setTimeout("slide_show_set_opacity(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

/**
 * @author Jonas Wilson Schnack
 */
var resize_image = function( img_object, width, height )
{
	var imgSrc = new Image();
	imgSrc.src = img_object.src;
	var imageWidth = imgSrc.width;
	var imageHeight = imgSrc.height;
	var imgRatio = imageWidth/imageHeight;
	var targetRatio = width/height;
	var resizeRatio;
	
	// check is image is more 'landscapey'
	if ( imgRatio > targetRatio )
	{
		resizeRatio = imageWidth/width;
	}
	
	// check is image is 'portraity' or squarey
	else
	{
		resizeRatio = imageHeight/height;
	}
	img_object.style.width = imageWidth/resizeRatio + 'px';
	img_object.style.height = imageHeight/resizeRatio + 'px';
};