var allImages = new Array();
addedImages = 0;
actualImage = 0;

$('document').ready(function() {
    //picdiv zentrieren
    centerDivpic();
    
    $(window).resize(function() {
        centerDivpic();
    });

    $('#closeButton').hover(
        function() {
            $(this).attr('src', '/images/closeMouseover.jpg');
        },
        function() {
            $(this).attr('src', '/images/close.jpg');
        }
    );
    $('#closeButton').click(function() {
        allimage();
    });
    
    $('#previousImage').hover(
        function() {
            $(this).attr('src', '/images/previousMouseover.gif');
        },
        function() {
            $(this).attr('src', '/images/previous.gif');
        }
    );
    $('#previousImage').click(function() {
        actualImage--;
        if(actualImage < 0) {
            actualImage = allImages.length - 1;
        }
        $('#pic').attr('src', allImages[actualImage]);
        $('#actualImageShow').html(actualImage + 1);
    });
    
    $('#nextImage').hover(
        function() {
            $(this).attr('src', '/images/nextMouseover.gif');
        },
        function() {
            $(this).attr('src', '/images/next.gif');
        }
    );
    $('#nextImage').click(function() {
        actualImage++;
        if(actualImage > allImages.length - 1) {
            actualImage = 0;
        }
        $('#pic').attr('src', allImages[actualImage]);
        $('#actualImageShow').html(actualImage + 1);
    });
    
    $('#pic').click(function() {
        $('#nextImage').trigger('click');
    });
    
    $('#grau').click(function() {
        allimage();
    });
});

function centerDivpic() {
    $('#divpic').css('left', (getWindowWidth() - $('#divpic').width())/2);
	//$('#divpic').css('top', (getWindowHeight() - $('#divpic').height())/2);
	$('#divpic').css('top', 150);
}

function getWindowWidth() {
    var myWidth = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
    }
    return myWidth;
}

function getWindowHeight() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myHeight = document.body.clientHeight;
  }
  return myHeight;
}

function addImage(imageUrl) {
    allImages[addedImages] = imageUrl;
    addedImages++;
}

function blendin(i) {
	if (i > -1) {
		document.all.grau.style.setAttribute('filter', 'Alpha(opacity=' + i + ',style=0)');
		i=i-1;
		setTimeout("blendin(" + i + ")", 5);
	}
}

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("changeOpacGalerie(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpacGalerie(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpacGalerie(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 + ")"; 
}

blendgrau = 500;
blendbild = 750;

function allimage() {
	opacity('divpic', 100, 0, blendbild);
	setTimeout("opacity('grau', 80, 0, blendgrau);", blendbild);
	setTimeout("document.getElementById('grau').style.visibility = 'hidden';", blendgrau + blendbild);
	setTimeout("document.getElementById('divpic').style.visibility = 'hidden';", blendgrau + blendbild);
	setTimeout("document.getElementById('wrapper').style.display = 'none';", blendgrau + blendbild);
}

function showGalerie() {
    document.getElementById("grau").style.visibility = 'visible';
    document.getElementById("divpic").style.visibility = 'visible';
    opacity('grau', 0, 80, blendgrau);
    setTimeout("opacity('divpic', 0, 100, blendbild);", blendgrau);
}


actualPic = 1
function showImage(imgSrc, pictureId) {
    document.getElementById("picture_" + pictureId).style.border = "3px solid red";
    document.getElementById("picture_" + actualPic).style.border = "0px";
    actualPic = pictureId;
    document.getElementById("pic").src=imgSrc;
    
    newScrollWidth = 0;
    for(var i=1;i<pictureId;i++) {
        newScrollWidth = newScrollWidth + document.getElementById("picture_" + i).width + 3;    
    }
    containerWidth = parseInt(document.getElementById("pictureSliderContainer").style.width) / 2;
    newScrollWidth = newScrollWidth - containerWidth;
    if(newScrollWidth < 0) {
        newScrollWidth = 0;
    }
    
    //oldScrollWidth = document.getElementById("pictureSliderContainer").scrollLeft;
    document.getElementById("pictureSliderContainer").scrollLeft = newScrollWidth;
}

function nextImage(bigSize, smallSize) {
    numberOfPics = document.getElementById("picCount").value;
    if(actualPic == numberOfPics) {
        newPicId = 1;
    } else {
        newPicId = actualPic + 1;
    }
    newPic = document.getElementById("picture_" + newPicId).src;
    newPic = newPic.replace("height="+smallSize, "height="+bigSize);
    showImage(newPic, newPicId);
}


picsLoaded = 0
picsCounter = 0
function changePictureSliderWidth() {
    if(picsLoaded == 0) {
        numberOfPics = parseInt(document.getElementById("picCount").value);
        picsCounter = numberOfPics;
    }
    picsLoaded = picsLoaded + 1;
    if(picsLoaded == picsCounter) {
        newWidth = 0;
        for(i=1;i < picsCounter + 1;i++) {
            newWidth = newWidth + document.getElementById("picture_" + i).width + 6;
        }
        document.getElementById("pictureSlider").style.width = newWidth + "px";
    }
}