//shop content related variables
var currentShop = 0;
var currentShopHover = 0;
var currentShops = new Array();
var lastShop = "";
var shopsRoot = "images/shops/";
var firstShoplist = true;
var shopsPushed = false;
var pushBoundary = 760;
var pushDistance = 6;
//popup variables
var mainPopupWidth = "700px";
var mainPopupHeight = "490px";
var speedMainPopupShow = 500;
var speedMainPopupHide = 500;
var speedShopPopupShow = 750;
var speedShopPopupHide = 750;
var speedNavbarShow = 700;
var speedNavbarHide = 700;
var visibleMainPopup = false;
var visibleShopPopup = false;
var currentMainPopup = "";
//thumbnail slide variables (in shop popup)
var thumbWidth = 90;
var currentThumbList = "";
var currentScrollPosition = 0;
var containerWidth = 0;
var slideWidth = 0;
var maxScroll = 0;
var clickObject = new Array();
var firstThumblist = true;
//variables used with the gallery picture slideshow
var currentPictures = new Array();
var pictureWidth = 0;
var pictureHeight = 0;
var currentPicture = 0;
var currentPictureList = "";
var speedPictureSlide = 500;
var intervalPictureSlide = 4000;
var autoSlideTimeout = 4000;
var autoSlideOn = false;
var automaticSlide = null;
var galleryRoot = "images/gallery/";
var firstPicturelist = true;
var shopRows = new Object();


/**
 *  Functions to be called on document ready
 **/
$(document).ready(function(){
    initClicks();
    getSizes();
    loadGalleryList("ochtum_park");
    autoSlide(true);
    loadShopList();
    bindResize();
	
    $(window).resize (resizeLogos);
    window.setTimeout (resizeLogos, 100);
    getSizes();  // nochmal machen!
});

/**
 *  Init the object responsible for handling the shop pictures in rows
 **/
function initRowHandling(){
    var items = new Array();
    shopRows.items = items;
    shopRows.items[0] = 8;
    shopRows.items[1] = 8;
    shopRows.items[2] = 8;
    shopRows.items[3] = 8;
    shopRows.items[4] = 7;
    shopRows.rowOne = shopRows.items[0];
    shopRows.rowTwo = shopRows.items[1]+shopRows.items[0];
    shopRows.rowThree = shopRows.items[2]+shopRows.items[1]+shopRows.items[0];
    shopRows.rowFour = shopRows.items[3]+shopRows.items[2]+shopRows.items[1]+shopRows.items[0];
    shopRows.rowFive = shopRows.items[4]+shopRows.items[3]+shopRows.items[2]+shopRows.items[1]+shopRows.items[0];
}
/**
 *  Initializes all click and hovering events
 **/
function initClicks(){
    $("#nav_left").click(function(){
	slidePictureLeft(null, true);
    });
    $("#nav_right").click(function(){
	slidePictureRight(null, true);
    });
	
    $("#imgLogo").click(function(){
		$("#ochtum_park").click();
    });
	
    $("#map_link").click(function(){
	showMainPopup("map.html");
    });
    $("#impress_link").click(function(){
	showMainPopup("impressum.html");
    });
    $("#brandlist_link").click(function(){
	showMainPopup("brand_list.html");
    });
    $("#contact_link").click(function(){
	$("#ochtum_park").click();
    });
    $("#shop_popup_close").click(function(){
	hideShopPopup(speedShopPopupHide);
    });
    $("#main_popup_close").click(function(){
	hideMainPopup();
    });
    $(".list_link").live("click", function(){
	hideMainPopup();
	var id = $(this).attr("id");
	id = id.substring(5);
	$("#"+id).click();
    });
    $(".map_link").live("click", function(){
	var activeShop = $(".active").attr("id");
	hideShopPopup(0);
	showMainPopup("map.html", activeShop);
    });
}
/**
 *  Binds the pushShops function to the resize event of the window
 **/
function bindResize(){
    pushShops();
    $(window).resize(pushShops);
}
/**
 *  Pushes the shop pictures of class secondRow to fifthRow up a bit, to make them fit on a smaller screen
 **/
function pushShops(){
	// alert("pushShops() called\nwindow height: "+$(window).height());
    var windowHeight = parseInt($(window).height());
    var boundary = 700;
    if(boundary>=windowHeight && !shopsPushed){
	$(".firstRow").each(function(){
	    var itemTop = $(this).css("top");
	    var itemID = $(this).attr("id");
	    itemTop = itemTop.substring(0, itemTop.length-2);
	    var itemTopInt = parseInt(itemTop);
	    $("#"+itemID).css({
		top: itemTopInt-pushDistance+"px"
	    });
	});
	$(".secondRow").each(function(){
	    var itemTop = $(this).css("top");
	    itemTop = itemTop.substring(0, itemTop.length-2);
	    var itemTopInt = parseInt(itemTop);
	    $(this).css({
		top: itemTopInt-pushDistance+"px"
	    });
	});
	$(".thirdRow").each(function(){
	    var itemTop = $(this).css("top");
	    itemTop = itemTop.substring(0, itemTop.length-2);
	    var itemTopInt = parseInt(itemTop);
	    $(this).css({
		top: itemTopInt-pushDistance+"px"
	    });
	});
	$(".fourthRow").each(function(){
	    var itemTop = $(this).css("top");
	    itemTop = itemTop.substring(0, itemTop.length-2);
	    var itemTopInt = parseInt(itemTop);
	    $(this).css({
		top: itemTopInt-pushDistance+"px"
	    });
	});
	$(".fifthRow").each(function(){
	    var itemTop = $(this).css("top");
	    itemTop = itemTop.substring(0, itemTop.length-2);
	    var itemTopInt = parseInt(itemTop);
	    $(this).css({
		top: itemTopInt-pushDistance+"px"
	    });
	});
	shopsPushed = true;
    }
    if(boundary<=windowHeight && shopsPushed){
	$(".firstRow").each(function(){
	    var itemTop = $(this).css("top");
	    var itemID = $(this).attr("id");
	    itemTop = itemTop.substring(0, itemTop.length-2);
	    var itemTopInt = parseInt(itemTop);
	    $("#"+itemID).css({
		top: itemTopInt+pushDistance+"px"
	    });
	});
	$(".secondRow").each(function(){
	    var itemTop = $(this).css("top");
	    itemTop = itemTop.substring(0, itemTop.length-2);
	    var itemTopInt = parseInt(itemTop);
	    $(this).css({
		top: itemTopInt+pushDistance+"px"
	    });
	});
	$(".thirdRow").each(function(){
	    var itemTop = $(this).css("top");
	    itemTop = itemTop.substring(0, itemTop.length-2);
	    var itemTopInt = parseInt(itemTop);
	    $(this).css({
		top: itemTopInt+pushDistance+"px"
	    });
	});
	$(".fourthRow").each(function(){
	    var itemTop = $(this).css("top");
	    itemTop = itemTop.substring(0, itemTop.length-2);
	    var itemTopInt = parseInt(itemTop);
	    $(this).css({
		top: itemTopInt+pushDistance+"px"
	    });
	});
	$(".fifthRow").each(function(){
	    var itemTop = $(this).css("top");
	    itemTop = itemTop.substring(0, itemTop.length-2);
	    var itemTopInt = parseInt(itemTop);
	    $(this).css({
		top: itemTopInt+pushDistance+"px"
	    });
	});
	shopsPushed = false;
    }
}
/**
 *  Retrieves the sizes and settings for divs and images used to calculate on them
 **/
function getSizes(){
    if(!firstThumblist){
	var buffer = $("#slide").css("left");
	buffer.substring(0, buffer.length-2);
	currentScrollPosition = parseInt(buffer);
    }
    containerWidth = parseInt($(".popup_picture_slide_container").width());
    slideWidth = parseInt($("#slide li img").length*thumbWidth);
    maxScroll = containerWidth-slideWidth;
    scrollTime = maxScroll*(-2);
    var pictureWidthParent = $("#pictures").css("width");
    pictureWidth = pictureWidthParent.substring(0, pictureWidthParent.length-2);
    var pictureHeightParent = $("#pictures").css("height");
    pictureHeight = pictureHeightParent.substring(0, pictureHeightParent.length-2);
    
}
/**
 *  Slides the thumbnail list to the left
 **/
function slideThumbsLeft(){
    getSizes();
    if(currentScrollPosition>=maxScroll){
	if(maxScroll!=0||scrollTime!=0){
	    $("#slide").animate({
		left:maxScroll+"px"
	    }, scrollTime);
	}
    }
}
/**
 *  Slides the thumbnail list to the right
 **/
function slideThumbsRight(){
    getSizes();
    if(currentScrollPosition<0){
	maxScroll -=currentScrollPosition;
	maxScroll *=(-1);
	$("#slide").animate({
	    left:"0px"
	}, scrollTime);
    }
}
/**
 *  Displays the shop popup fading in with an animation, hiding the picture navbar
 **/
function showShopPopup(){
    if(visibleMainPopup){
	hideMainPopup();
    }
    //check if it's the same shop being clicked on (to not load it twice)
    if(!visibleShopPopup){
	var id = $(".active").attr("id");
	$("#shop_popup").css({
	    display:"block"
	});
	hideNavbar();

        // TSCH 27.08.2010 leicht verzögerte Animation wählen
        $("#shop_popup").css ("bottom", "-265px");
        window.setTimeout (function ()  {
            $("#shop_popup").animate({
                bottom:"0px"
            }, speedShopPopupShow);
        }, 100);
	$(".content_shop").children().remove();
	$(".content_shop").load("content/"+id+".html", function(){

	    });
	$(".shop_popup_picture").children().remove();
	var LogoImage = $("<img src='"+shopSourceFromName(id)+"nav_logo.png' alt='' style='cursor:pointer;'/>");
	$(".shop_popup_picture").append(LogoImage);
	LogoImage.click (function()  {
							  hideShopPopup(speedShopPopupHide);
							  });
//	$(".shop_popup_picture").append("<img src='"+shopSourceFromName(id)+"nav_logo.png' alt=''/>");
	
	var ImgLogo = $("#imgLogo");
	if (typeof ImgLogo.attr("src") == 'undefined')
		$("#navbar_arrows").append("<img id='imgLogo' src='"+shopSourceFromName(id)+"nav_logo.png' alt=''  style='cursor:pointer;'/>");
	else
		ImgLogo.attr ("src", shopSourceFromName(id)+"nav_logo.png");
	$("#imgLogo").unbind ("click");
	$("#imgLogo").click (function()  {
		showFullContent(id);
	});
	
	
	//calculate vertical offset (margin)
	var imgHeight = $("#"+id).height();
	var containerHeight = $(".shop_popup_picture").height();
	$(".shop_popup_picture img").css({
	    marginTop: (containerHeight-imgHeight)/2+"px"
	});
	lastShop = currentShops[currentShop].name;
        autoSlide (false);
    }else{
	if(currentShops[currentShop].name!=lastShop){
	    hideShopPopup(0);
	    id = $(".active").attr("id");
	    $("#shop_popup").css({
		display:"block"
	    });
	    hideNavbar();
            // TSCH 27.08.2010 leicht verzögerte Animation wählen
            $("#shop_popup").css ("bottom", "-265px");
            window.setTimeout (function ()  {
                $("#shop_popup").animate({
                    bottom:"0px"
                }, speedShopPopupShow);
            }, 100);
	    $(".content_shop").children().remove();
	    $(".content_shop").load("content/"+id+".html", function(){

		});
	    $(".shop_popup_picture").children().remove();
		var LogoImage = $("<img src='"+shopSourceFromName(id)+"nav_logo.png' alt='' style='cursor:pointer;'/>");
		$(".shop_popup_picture").append(LogoImage);
		LogoImage.click (function()  {
							  hideShopPopup(speedShopPopupHide);
							  });
	    //$(".shop_popup_picture").append("<img src='"+shopSourceFromName(id)+"nav_logo.png' alt=''/>");
		
            var ImgLogo = $("#imgLogo");
            if (typeof ImgLogo.attr("src") == 'undefined')
                    $("#navbar_arrows").append("<img id='imgLogo' src='"+shopSourceFromName(id)+"nav_logo.png' alt='' style='cursor:pointer;'/>");
            else
                    ImgLogo.attr ("src", shopSourceFromName(id)+"nav_logo.png");
            $("#imgLogo").unbind ("click");
            $("#imgLogo").click (function()  {
                                            $("#" + id).click();
                                    });

	    //calculate vertical offset (margin)
	    imgHeight = $("#"+id).height();
	    containerHeight = $(".shop_popup_picture").height();
	    $(".shop_popup_picture img").css({
		marginTop: (containerHeight-imgHeight)/2+"px"
	    });
	    lastShop = currentShops[currentShop].name;
            autoSlide (false);
	}
    }
    visibleShopPopup = true;
}

function showFullContent(id) {
   	$("#" + id).click(); 
}

/**
 *  Hides the shop popup fading out with an animation, displaying the picture navbar again
 **/
function hideShopPopup(speed){
    if(speed==null){
	speed = speedShopPopupHide;
    }
    $("#shop_popup").animate({
	bottom:"-330px"
    }, speed, function(){
	$("#shop_popup").css({
	    display:"none"
	});
    });
    showNavbar();
    autoSlide(true);
    visibleShopPopup = false;
}
/**
 *  Shows the picture navbar
 **/
function showNavbar(){
    $("#navbar_pictures").animate({
	top:"300px"
    },speedNavbarShow, function(){
	$("#navbar_pictures").css({
	    display:"block"
	});
    });
}
/**
 *  Hides the picture navbar
 **/
function hideNavbar(){
    $("#navbar_pictures").animate({
	top:"350px"
    }, speedNavbarHide, function(){
	$("#navbar_pictures").css({
	    display:"none"
	});
    });
}

function loadPopupContent (url)
{
    // erst nach dem Laden animieren
    $(".content_main_popup").load(url, function ()  {
        $("#main_popup").css({
            height:"0px",
            width:"0px",
            left:mainPopupWidth,
            display: "block"
        });
        $("#main_popup").animate({
            height: mainPopupHeight,
            width: mainPopupWidth,
            left:"0px"
        }, speedMainPopupShow);
    });
}


/**
 *  Shows the main popup, fading in with an animation
 *  @param content The html to be loaded into the popup
 *  @param shop The currently active shop to be highlighted (on the map popup)
 **/
function showMainPopup(content, shop){
    if(visibleShopPopup){
	hideShopPopup(speedShopPopupHide);
    }

    // TSCH: 27-08-2010 die Animation vöölig verändert,
    if(!visibleMainPopup){
        loadPopupContent ("content/"+content);
    }else{
	if(currentMainPopup!=content){
	    hideMainPopup(function ()  { loadPopupContent ("content/"+content); });
	}
    }
    currentMainPopup = content;
    autoSlide (false);
    visibleMainPopup = true;
}
/**
 *  Hides the main popup, fading out with an animation
 **/
function hideMainPopup(callback){
    $("#main_popup").animate({
	height: "0px",
	width: "0px",
	left: mainPopupWidth
    }, speedMainPopupHide, function(){
	$("#main_popup").css({
	    height:mainPopupHeight,
	    width:mainPopupWidth,
	    left:"0px",
	    display: "none"
	});
        if (typeof callback == "function")
            callback ();
    });
    
    autoSlide(true);
    visibleMainPopup = false;

}
/**
 *  Slides the currentPicture to a specified picture while adhering to a proper
 *  sliding direction
 *  @param picture The picture to be loaded
 **/
function slideToPicture(picture){
    var oldPicture = currentPicture;
    var newPicture = 0;
    for(var i=0; i<currentPictures.length;i++){
	var somePicture  = new Object();
	somePicture = currentPictures[i];
	if(somePicture.src==picture){
	    newPicture = i;
	}
    }
    if(oldPicture<=newPicture){
	slidePictureRight(picture, true);
    }else{
	slidePictureLeft(picture, true);
    }
}
/**
 *  Start an auto slide for the gallery pictures
 *  @param on Boolean to specify wether autoSlide() should start or stop the interval
 **/
function autoSlide(on){
    if (on)  {
	if (!autoSlideOn)  {
	    automaticSlide = setInterval("slidePictureRight(null, false)", intervalPictureSlide);
	    autoSlideOn = true;
	}
    }
    else  {
        if (automaticSlide)
            clearInterval(automaticSlide);
        automaticSlide = null;
	autoSlideOn = false;
    }
}
/**
 *  Slides the currentPicture to the left and replaces it with a new one specified
 *  @param picture Optional picture source parameter. If called without the function will
 *  determine the next picture on its own, otherwise it will traverse the pictures
 *  to the picture specified
 *  @param sleep Boolean to specify wether the interval of autoslide should be interrupted or not
 **/
function slidePictureLeft(picture, sleep){
    $("#next_picture").css({
	left: pictureWidth+"px",
	height: pictureHeight+"px",
	width: "0px"
    });
    //if called directly
    if(picture==null){
	if(sleep){
	    autoSlide(false);
	    setNextPicture(calculateNext(true), true);
	    setTimeout("autoSlide(true)", autoSlideTimeout);
	}else{
	    setNextPicture(calculateNext(true), true);
	}
    }
    //if called indirectly with path to picture parameter
    else{
	if(sleep){
	    autoSlide(false);
	    setNextPicture(picture, false);
	    setTimeout("autoSlide(true)", autoSlideTimeout);
	}else{
	    setNextPicture(picture, false);
	}
    }

    $("#next_picture").animate({
        width:pictureWidth+"px",
        left:"0"
    }, speedPictureSlide, function(){
        $(this).attr("id", "current_picture");
    });
    $("#current_picture").animate({
        width:0,
        height:pictureHeight
    }, speedPictureSlide, function(){
        $(this).attr("id", "next_picture");
    });
}
/**
 *  Slides the currentPicture to the right and replaces it with a new one specified
 *  @param picture Optional picture parameter. If called without the function will
 *  determine the next picture on its own, otherwise it will traverse the pictures
 *  to the picture specified
 *  @param sleep Boolean to specify weather autoSlide() should be put on hold for a while
 **/
function slidePictureRight(picture, sleep){
    $("#next_picture").css({
	left: "-1px",
	width: "0px",
	height:pictureHeight+"px"
    });
    //if called directly
    if(picture==null){
	if(sleep){
	    autoSlide(false);
	    setNextPicture(calculateNext(false), true);
	    setTimeout("autoSlide(true)", autoSlideTimeout);
	}else{
	    setNextPicture(calculateNext(false), true);
	}
    }
    //if called indirectly with path to picture parameter
    else{
	if(sleep){
	    autoSlide(false);
	    setNextPicture(picture, false);
	    setTimeout("autoSlide(true)", autoSlideTimeout);
	}else{
	    setNextPicture(picture, false);
	}
    }
    $("#next_picture").animate({
	width:pictureWidth+"px",
	left:"0"
    }, speedPictureSlide, function(){
	$(this).attr("id", "current_picture");
    });
    $("#current_picture").animate({
	width:0,
	left:pictureWidth+"px",
	height: pictureHeight+"px"
    }, speedPictureSlide, function(){
	$(this).attr("id", "next_picture");
    });
}
/**
 *  Calculates the next picture depending on the current one and the function it
 *  has been called from
 *  @param left Boolean wether called from slidePictureLeft() or slidePictureRight()
 **/
function calculateNext(left){
    if(!left){
	if(currentPicture+1>currentPictures.length-1){
	    currentPicture = 0;
	}else{
	    currentPicture = currentPicture+1;
	}
    }else{
	if(currentPicture-1<0){
	    currentPicture = currentPictures.length-1;
	}else{
	    currentPicture = currentPicture-1;
	}
    }
    return currentPictures[currentPicture].src;
}
/**
 *  Sets the next picture (which will replace the current one)
 *  @param picture Source of the picture to be set as the next current image
 *  @param currentSet Bool wether the current has been set already (by functions like calculateNext())
 **/
function setNextPicture(picture, currentSet){
    $("#next_picture").attr("src", picture);
    //set a new current picture (for the next round)
    if(!currentSet){
	for (var i=0;i<currentPictures.length; i++) {
	    if(currentPictures[i].src==picture){
		currentPicture = i;
	    }
	}
    }
}
/**
 *  Loads a specific file list from images/gallery/"list"/thumbs/, inserts the
 *  defined list elements and adds click events for it (to open the specific
 *  picture on click in the picture slide)
 *  @param list The file list to be retrieved from /images/gallery/"list"/thumbs/
 **/
function loadThumbList(list){
    $.ajax({
	url: "script/pictures.php",
	type: "POST",
	dataType: "json",
	data:{
	    type:"thumbs",
	    dir:list
	},
	success: function(data){
	    if(firstThumblist){
		$(".popup_picture_slide_container").append("<ul id='slide'></ul>");
		firstThumblist = false;
	    }
	    if(data!=null){
		if(currentThumbList!=list){
		    resetSlideSettings();
		    $("#slide").children().remove();
		    clickObject = new Array();
		    currentThumbList = list;
		    for(var i=0; i<data.length; i++){
			var picName = data[i].substring(0, data[i].length-4);
			$("#slide").append("<li><img src='images/gallery/"+list+"/thumbs/"+data[i]+"' alt='' id='"+picName+"'/></li>");
			addThumbClick(data[i], picName, list);
		    }
		    calculateThumbScrolling();
		}
	    }else{
		$("#slide").children().remove();
		currentThumbList = list;
	    }
	}
    });
}
/**
 *  Adds a click function to each thumbnail in the picture list of the shop popup
 *  @param picture The picture name and suffix
 *  @param name The picture name only
 *  @param list The list which this picture belongs to
 **/
function addThumbClick(picture, name, list){
    clickObject[name] = galleryRoot+list+"/"+picture;
    $("#"+name).click(function(){
	var pic = $(this).attr("id");
	var newPicture = clickObject[pic];
	var pictureBackground = $("#current_picture").attr("src");
	if(pictureBackground.search(newPicture)==(-1)){
	    slideToPicture(clickObject[pic]);
	}
	hideShopPopup(0);
    });
}
/**
 *  Resets the picture slide settings in the shop popup to its default value
 *  which suggests centered display of the images in the list
 **/
function resetSlideSettings(){
    $("#slide li img").unbind();
    $("#slide").contents().remove();
    $("#slide").css({
	left:"0px",
	position:"absolute"
    });
}
/**
 *  Gets the list of pictures in a folder and stores it in a String array.
 *  @param list The specific file list in images/gallery/* that should be retrieved
 **/
function loadGalleryList(list){
    $.ajax({
	url: "script/pictures.php",
	type: "POST",
	dataType: "json",
	data:{
	    type:"gallery",
	    dir:list
	},
	success: function(data){
	    if(firstPicturelist){
		$("#pictures").append("<img class='slide_picture' id='current_picture' alt='' src=''/>");
		$("#pictures").append("<img class='slide_picture' id='next_picture' alt='' src=''/>");
		firstPicturelist = false;
	    }
	    if(currentPictureList!=list){
		if(data!=null){
		    currentPictures = new Array();
		    currentPicture = 0;
		    currentPictureList = list;
		    for(var i=0; i<data.length; i++){
			var name = data[i].substring(0, data[i].length-4);
			var pictureObject = new Object();
			pictureObject.name = name;
			pictureObject.src = galleryRoot+list+"/"+data[i];
			currentPictures[i] = pictureObject;
		    }
		    //select the first picture from the array to be the next to be displayed
		    slideToPicture(currentPictures[0].src);

                    // preloding the images
                    window.setTimeout (function ()  {
                        for (i = 0; i < currentPictures.length; i++)  {
                            var imgObj = new Image();
                            imgObj.src = currentPictures[i].src;
                            currentPictures[i].preloaded = imgObj;
                        }
                    }, 100);

		}
	    }
	}
    });
}
/**
 *  Loads the list of shops and their pictures to the #shops_container
 *  Generically adds click functions to them by calling appendShop()
 **/
function loadShopList(){
    $.ajax({
	url: "script/shops.php",
	type: "POST",
	dataType: "json",
	data:{
	    type:"directory"
	},
	success: function(data){
	    if(data!=null){
		initRowHandling();
		if(firstShoplist){
		    $("#shops_container").append("<ul class='shoplist'></ul>");
		    firstShoplist = false;
		}
		currentShops = new Array();
		currentShop = 0;
		for(var i=0;i<data.length;i++){
		    var shopObject = new Object();
		    shopObject.src = shopsRoot+data[i]+"/";
		    shopObject.name = data[i].substring(4);
		    currentShops[i] = shopObject;
		    appendShop(shopObject.name, shopObject.src);
		}
	    //		initShopListDecorator();
	    }
	}
    });
}
/**
 *  Appends a shop to the list. Adds the image with the id=name and src=src
 *  @param name Name of the shop, used as id (it's the folder name)
 *  @param src Source of the folder
 **/
function appendShop(name, src){
    //add the shop image to the list
    $(".shoplist").append("<li><img id='"+name+"' src='"+src+"default.png' alt=''/></li>");
    //add classes to the images depending on which row they are in
    var shopLength = $(".shoplist li img").length;
    if(shopLength<=shopRows.rowOne){
	$("#"+name).addClass("firstRow");
    }
    if(shopLength<=shopRows.rowTwo&&shopLength>shopRows.rowOne){
	$("#"+name).addClass("secondRow");
    }
    if(shopLength<=shopRows.rowThree&&shopLength>shopRows.rowTwo){
	$("#"+name).addClass("thirdRow");
    }
    if(shopLength<=shopRows.rowFour&&shopLength>shopRows.rowThree){
	$("#"+name).addClass("fourthRow");
    }
    if(shopLength<=shopRows.rowFive&&shopLength>shopRows.rowFour){
	$("#"+name).addClass("fifthRow");
    }
    //add click function
    $("#"+name).click(function(){
	var shop = $(this).attr("id");
	//remove active class from all other objects in the shop list and reset their pictures to the default
	$(".shoplist li img").each(function(){
	    var id = $(this).attr("id");
	    if($(this).hasClass("active")){
		$(".shoplist li img").removeClass("active");
	    }
	    if($(this).hasClass("visited")){
		$(this).attr("src", shopSourceFromName(id)+"visited.png");
	    }else{
		$(this).attr("src", shopSourceFromName(id)+"default.png");
	    }
	});
	if(currentShops[currentShop].name!=shop){
	    for(var i=0;i<currentShops.length;i++){
		if(currentShops[i].name==shop){
		    currentShop = i;
		}
	    }
	}
	//add class and change picture for having visited this picture
	$("#"+shop).addClass("active");
	$("#"+shop).addClass("visited");
	$("#"+shop).attr("src", currentShops[currentShop].src+"active.png");
	//open stuff
	loadGalleryList(currentShops[currentShop].name);
	showShopPopup();
	loadThumbList(currentShops[currentShop].name);
    });
    //add hover function
    $("#"+name).hover(function(){
	var shop = $(this).attr("id");
	if(currentShops[currentShopHover].name!=shop){
	    for(var i=0; i<currentShops.length; i++){
		if(currentShops[i].name==shop){
		    currentShopHover = i;
		}
	    }
	}
	$("#"+shop).addClass("hover");
	$("#"+shop).attr("src", currentShops[currentShopHover].src+"hover.png");
    }, function(){
	var hasVisited = false;
	var hasActive = false;
	var shop = $(this).attr("id");
	if(currentShops[currentShopHover].name!=shop){
	    for(var i=0; i<currentShops.length; i++){
		if(currentShops[i].name==shop){
		    currentShopHover = i;
		}
	    }
	}
	//check if the shop has been visited already
	if($("#"+shop).hasClass("visited")){
	    $("#"+shop).attr("src", currentShops[currentShopHover].src+"visited.png");
	    hasVisited = true;
	}
	//check if the shop is currently active (gallery is showing the shops pictures)
	if($("#"+shop).hasClass("active")){
	    $("#"+shop).attr("src", currentShops[currentShopHover].src+"active.png");
	    hasActive = true;
	}
	if(!hasVisited && !hasActive){
	    $("#"+shop).attr("src", currentShops[currentShopHover].src+"default.png");
	}
    });
}
/**
 *  Retrieves the source to the image of a shop depending on the name/id submitted
 */
function shopSourceFromName(name){
    var source = "";
    for(var i=0;i<currentShops.length;i++){
	if(currentShops[i].name==name){
	    source = currentShops[i].src;
	}
    }
    return source;
}
/**
 *  Depending on the size of the picture list in the shop popup, decide wether
 *  the list should be scrollable or centered.
 **/
function calculateThumbScrolling(){
    getSizes();
    $(".slide_hover_left").unbind();
    $(".slide_hover_right").unbind();
    if(containerWidth<slideWidth){
	$(".slide_hover_left").hover(function(){
	    slideThumbsLeft();
	}, function(){
	    $("#slide").clearQueue();
	    $("#slide").stop();
	});
	$(".slide_hover_right").hover(function(){
	    slideThumbsRight();
	}, function(){
	    $("#slide").clearQueue();
	    $("#slide").stop();
	});
    }else{
	$("#slide").css({
	    position: "relative"
	});
    }
}