var is_b = false; // Flag für Pfeil back
var is_f = false; // Flag für Pfeil forward
var timer = 100; // Timerzeit
var versatz = 6;
var absolute_image_container_width = 0;

// Style ändern und Hauptfunktion aufrufen
function rock(){
	if(navigator.appName != "Microsoft Internet Explorer"){
   		//Breite des ImageContainers erfassen
        document.getElementById("images").style.position = "absolute"; 
        absolute_image_container_width = document.getElementById("images").offsetWidth;
   		document.getElementById("images").style.position = "relative";

		// Nur Pfeile wenn Bilder angezeigt werden
		var imgs = document.getElementsByTagName('img');
		for(var i = 0; i < imgs.length; i++){
			if(imgs[i].className == "imgs"){
				nav_arrow_show();
			}
		}
	
		// Kontrollfunktion starten
		//shifting();
	}else{
		if(document.getElementById("contact") != null || document.getElementById("legal") != null){
			document.getElementById("images").style.overflowX = "hidden";
		}
	}
}

function rock_1(){
	document.getElementById("content").style.overflowX = "hidden";
	document.getElementById("images").style.marginLeft = "0px";
}


// Hauptfunktion jede 10ms
function shifting(){
	
	// Bildbereich nach vorne bewegen
	if(is_f){
		var pix = document.getElementById("images").style.marginLeft.split("p");
		var zahl = parseInt(pix[0]);
	
		zahl = zahl + versatz;
	
		if(zahl < 0){
			zahl = zahl + "px";
			document.getElementById("images").style.marginLeft = zahl;
		}else
		{
			document.getElementById("images").style.marginLeft = "0px";
			is_f = false;
		}
	}
	
	// Bildbereich nach hinten bewegen
	else if(is_b){
		var pix;
		var rsize;
		var size;
		var zahl;

		pix = document.getElementById("images").style.marginLeft.split("p");
		rsize = absolute_image_container_width;
		size = document.getElementById("images").offsetWidth;
		if(pix.length > 1) zahl = parseInt(pix[0]);
		else zahl = 0;
		if((zahl-versatz) > (rsize*(-1)+(size+parseInt(zahl)))){
			document.getElementById("images").style.marginLeft = (zahl-versatz) + "px";
		}else
		{
			document.getElementById("images").style.marginLeft = (rsize*(-1)+(size+parseInt(zahl)))+ "px";
			is_b = false;
		}
	}
	if((is_b || is_f) && versatz < 40)
		versatz++;
	//window.setTimeout("shifting()", timer); //jede x>10 ms nochmal
}

// Back-Flag setzen
function nav_b_a(){
	is_b = true;
}

// Back-Flag auf falsch setzen
function nav_b_d(){
	is_b = false;
	versatz = 6;
}

// Forward-Flag setzen
function nav_f_a(){
	is_f = true;
}

// Forward-Flag auf falsch setzen
function nav_f_d(){
	is_f = false;
	versatz = 6;
}

// Pfeile zeigen
function nav_arrow_show(){
	//document.getElementById("nav_b").style.visibility = "visible";
	//document.getElementById("nav_f").style.visibility = "visible";
    //$('.arrow').css("opacity", "1");
}

// Pfeile verstecken
function nav_arrow_hide(){
	//document.getElementById("nav_b").style.visibility = "hidden";
	//document.getElementById("nav_f").style.visibility = "hidden";
    
    //$('.arrow').css("opacity", "0.5");
}

function replaceImage(src){
    $("#the_image").hide();
    setActive(src);
    //Input like this phpThumb/phpThumb.php?src=../images/wedding/SteffiPascal_1.jpg&h=60
    //Large image source like this images/wedding/SteffiPascal_1.jpg
    src = src.split("src=../")[1].split("&")[0];
    //Stop scrolling
    scroll(0);
    //Display large image
    $("#the_image").load(function(){
        $("#the_image").fadeIn('slow');
    }).attr("src",src);
    $('.arrow').show();
}

//Setup if page is loaded
$(document).ready(function() {
    $("#images").hide();
    
    //
    //rock();
    //
    
    replaceImage($('#images img:first').attr("src"));
    $('#images img:last').load(function(){
        $("#images").show('slow');
    });
});

$(window).load(function () {
  $("#images").show('slow');
});

//Activate and deactivte imagelist scrolling
function scroll(xCursorPosition){
    // Container margin left
    var max = (document.body.offsetWidth / 100) * 10;
    // Imagelist margin left
    var pix = parseInt(document.getElementById("images").style.marginLeft.split("p")[0]);
    // Container margin plus width of imagelist
    max = max + document.getElementById("images").offsetWidth;
    // If imagelist have a margin, add it
    if(pix < 0){
        max = max + pix;
    }
    
    //alert("xCursorPosition:" + xCursorPosition);
    //alert("max:"+max);
    
    // If the curser is on the right side
    if(xCursorPosition < max && xCursorPosition > max-100){
        nav_b_a();
    }
    // or on the left side
    else if(xCursorPosition > 127 && xCursorPosition < 227 ){
        nav_f_a();
    }
    // end scrolling
    else {
        nav_f_d();
        nav_b_d();
    }
}
// Display the next image in large size
function next(){
    // Get the source of the large image
    var src = $("#the_image").attr("src");
    var next = false;
    
    // For each image in the list check if it is the large image
    $('#images img').each(function() {
        // if this image is marked then display it large
        if(next){
            replaceImage($(this).attr("src"));
            next = false;
            return next;
        }
        // if it is the large image mark the next image
        else if($(this).attr("src").indexOf(src) != -1){
            next = true;
        }
    });
  
}
// Display the previos image in large size
function previos(){
    var src = $("#the_image").attr("src");
    var next = false;
    
    // all the same but backwards
    $($('#images img').get().reverse()).each(function() {
        if(next){
            replaceImage($(this).attr("src"));
            next = false;
            return next;
        }
        else if($(this).attr("src").indexOf(src) != -1){
            next = true;
        }
    });
}

function setActive(src){
    $('#images img').each(function() {
        // if this image is displayed large hover it
        if($(this).attr("src").indexOf(src) != -1){
            $(this).addClass('activeimg');
            //Set the position of the thumbnail to center
            var pos = $(this).position();
            var last = $('#images img:last').position();
            if(pos.left > 500) {
                document.getElementById("images").style.marginLeft = 500-pos.left + "px";
            }else{
                document.getElementById("images").style.marginLeft = 0 + "px";
            }
        } else {
            $(this).removeClass('activeimg');
        }
    });
}