var speed = 30; //interval of redrawing the image
var changeInterval = 6000;  //interval of changing the image
var canvasWidth = 380;  //the same as in css 
var canvasHeight = 200;  //the same as in css 
var stepX = 0.3; //step to move x position for every redraw
var stepY = 0.2;  //step to move y position for every redraw
var startPosX = 0; //startposition x for every image
var startPosY = 100; //startposition y for every image
var ctx; //canvas context
var ctx1; //canvas context
var ctx2; //canvas context
var img;
var img1; //image for context1
var img2; //image for context2
var proc; // reference to interval
var x = startPosX; //current position of x
var y = startPosY; //current position of y
var scale = 1.5; //scale 1 = no scaling, improved motion quality för googlechrome
var activeCanvas;
var i = 0; //index for images

var counter = 0;


//called body onload
function showImages() {

    //IF HTML5 support
    if(checkHTML5Support()){
        drawHTML5();
    } else {
        drawHTML4();
    }
}

//check if canvas support
function checkHTML5Support() {

    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
        return true;
    } else {
        return false;
    }
}

//starting call image load
function drawHTML5() {
    $("#MainMediaContainer").hide();
    
    ctx1 = document.getElementById('canvas').getContext('2d');
    ctx2 = document.getElementById('canvasUnder').getContext('2d');

    document.getElementById('textlayer').setAttribute("style", "display: block; opacity:0.0;");
    document.getElementById('imagelayer').setAttribute("style", "display: block; opacity:0.0;");

    img = new Image();
    img1 = new Image();
    img2 = new Image();

    activeCanvas = "canvasUnder";

    img1.src = getPath(); 

    changeAll();

    proc1 = setInterval(changeAll, changeInterval);

}


function changeAll(){   

    counter = 0;

    ShowLayers();

    changeImg();

}


//Get Image path
function getPath() {

    if (i  < imagepaths.length - 1) {
        i++;
    } else {
        i = 1;
    } 

    return imagepaths[i];
}

function ShowLayers()
{
   if(imagetexts[i] != null)
    {
	$('#textlayer').stop(false, true); 
	$('#textlayer').css({ opacity: 0.0 });

        $("#textlayer").html(imagetexts[i]);

        $('#textlayer').css({ opacity: 0.0 })
            .animate({ opacity: 1.0 }, 2000, null);
    }
    if(symbols[i] != null)

    {
	$('#imagelayer').stop(false, true);  
	$('#imagelayer').css({ opacity: 0.0 });

        $("#imagelayer").html(symbols[i]);

        $('#imagelayer').css({ opacity: 0.0 })
            .animate({ opacity: 1.0 }, 2000, null);             
    }

    if(links[i] != null)
    {
       $("#slideLink").attr("href",links[i]);  
    
    }
}


function HideLayers(){

   if(imagetexts[i] != null)
    {
	$('#textlayer').stop(false, true); 

        $('#textlayer').css({ opacity: 1.0 })
            .animate({ opacity: 0.0 }, 1500, null);


    }
    if(symbols[i] != null)
    {   

	$('#imagelayer').stop(false, true);  
     
  	$('#imagelayer').css({ opacity: 1.0 })
           .animate({ opacity: 0.0 }, 1500, null);

    }	
}


//change images with fade in and out
function changeImg() {

    
    //reset
    clearInterval(proc); //without this, the motion accelerates    
    x = startPosX;
    y = startPosY;

  
    //first to be executed is canvasunder
    if (activeCanvas == "canvasUnder") {
	$('#canvas').show();

        ctx = ctx1;
        img = img1;

	if (i != 1){
	   proc = setInterval(draw, speed);
	}else{
	   proc = setInterval(drawfirst, speed);
    	}        

        $('#canvasUnder').css({ opacity: 1.0 })
            .animate({ opacity: 0.0 }, 2000, null);

        activeCanvas = "canvas";

        img2.src = getPath(); 

    } else {
	$('#canvasUnder').show();

        ctx = ctx2;
        img = img2;


	if (i != 1){
	   proc = setInterval(draw, speed);
	}else{
	   proc = setInterval(drawfirst, speed);
    	}


        $('#canvasUnder').css({ opacity: 0.0 })
            .animate({ opacity: 1.0 }, 2000, null);

        activeCanvas = "canvasUnder";
        img1.src = getPath();
    }  
      
}

//draw image
function draw() {
    //reset, start from beginning when coming to the end
    if (x > (img.width - canvasWidth)) { x = startPosX; }
    //when y is moving up
    if (y <=0 ) {y = startPosY; }

    ctx.drawImage(img, x, y, canvasWidth * scale, canvasHeight * scale, 0, 0, canvasWidth, canvasHeight);
    x += stepX;
    y -= stepY;

   if (counter == 150){
      HideLayers(); 
   }

   counter += 1; 
}

//draw first image
function drawfirst() {
    //ctx.drawImage('',0, 0, canvasWidth * 0.75, canvasHeight * 0.75);
   // ctx.drawImage(img,0, 0, canvasWidth, canvasHeight);


   if (counter == 150){
      HideLayers(); 
   }
   counter += 1; 
$('#canvas').hide();
$('#canvasUnder').hide();

}

//load ome image
function drawHTML4() {
    $("#MainMediaContainer").show();
    //document.getElementById('textlayer').setAttribute("style", "display: block");
    //document.getElementById('HTML4img').setAttribute("style", "display:inline;");
    //document.getElementById('HTML4img').setAttribute("src", getPath());

}