// JavaScript Document
$(document).ready(function(){
var main;
var spriteMax = 0.99;
var spriteMin = 0.05;

$('.overflow').css({'overflow':'hidden'});
$('#btnZodiac').click(function(evt){
	$('#Layer1').toggle();
});

//*******************************************************************
// ZOOMIFY
$('#btnZoomify').click(function(evt){
	$('#imageMap').toggle();
	$('#Zoomify').toggle();
});

main = function(){
// hide image map if screen height is less than:
// not yet implemented
var hideMap = false;
if(screen.height < 0){ hideMap = true; }

//*******************************************************************
// Slider
//*******************************************************************
//function slider(msg) { 

var imgStart = 0; // first Image on the left
var visible = 3; 
var zoom = 1.07; 
var imgBorder = 1; 
var imgMargin = 5; 
var $li = $('#panel li'); // all list elements
var numLi = $li.length; // original number of list elements 
if (numLi < visible){visible = numLi;}
var liEnd = $li.length -1;
//add images to start and end of slider for continous rotation
var i = 0;
for(i= visible-2; i>=0 ; i=i-1)
{  
var tmp = $li.eq(i).clone();
$li.eq(liEnd).after(tmp);	
tmp = $li.eq(liEnd-i).clone(); 
$li.eq(0).before(tmp);
}

$li = $('#panel li'); // reload prepared list elements
var $pix = $('#panel li a img'); // all images
var imgHeight = $pix.height(); //is constatnt
var imgWidth  = $pix.width(); 
var nImg = $pix.length; // Anzahl aller Bilder
sliderWidth = $('#panel').width();

var retSlide = function(ival)
{
   return (visible - 1 + ival);
};
var visibleFirst = retSlide(imgStart);
//var visibleFirst = visible - 1 + imgStart;

$pix.css({ // CSS-Anweisungen
  'border-width': imgBorder,
  'margin-right': imgMargin
});

//store each elements width in as data to avoid growing of the images
var count = 0;
for( i=0; i < $pix.length; i++){
		var mtmp = $pix.eq(i).width();
		$pix.eq(i).data('fixedwidth', mtmp);
		count++;	
}

imgWidth = $pix.eq($pix.length -1).data('fixedwidth');
// does not work reliable in safari - hover effect only after check positive
if(imgWidth > 0){
  $pix.hover(	  
  function() { 
	imgWidth = $(this).data('fixedwidth');
	if(imgWidth > 0){
	
	$(this).stop().animate({ 
	 width: ( imgWidth * zoom), //  zoom effect
	 height: (imgHeight * zoom)
	});
  }},
  function() { 
	imgWidth = $(this).data('fixedwidth');
	if(imgWidth > 0){
	$(this).stop().animate({ 
	 width: imgWidth, // zoom out
	 height: imgHeight
	  });
	}}
  );
}
// activate right and left scrolling
var enableSlider = function() { 
  $('#leftSlide, #rightSlide').removeClass('clickSlide').unbind();
  $('#leftSlide').addClass('clickSlide').click(leftSlide);
  $('#rightSlide').addClass('clickSlide').click(rightSlide);
};
var showSlide = function(nSlide)
{
	visibleFirst = nSlide;
	if(visibleFirst < 0)
	{visibleFirst = numLi-1;}
	if(visibleFirst >= numLi)
	{visibleFirst = 0;}
	$li.hide();
	$li.slice(visibleFirst, visibleFirst + visible).show();
};
var leftSlide = function() { 
  visibleFirst--; 
  showSlide(visibleFirst);
};
var rightSlide = function() {
  visibleFirst++; 
  showSlide(visibleFirst);
};
  

$li.eq(0).before('<li id="leftSlide"></li>'); // fügt die Schaltflächen ein
$li.eq($li.length - 1).after('<li id="rightSlide"></li>');

  enableSlider(); // Scrollfunktion vorbereiten
  $li.hide();
  $li.slice(visibleFirst, visibleFirst + visible).show();
//};
//*******************************************************************



//*******************************************************************
// EXTERNAL HTML
//*******************************************************************
//  attach events to slider and to image map (class = click2extern)

$('area').addClass('click2extern'); //attach click2extern to image maps

$('*:has(a).click2extern').click(function(evt){
	if(hideMap) {$('#imageMap').stop().slideUp(500);}
	var target = $(this).find('a').attr("href"); 
	change(target);
	//alert(target);
	evt.preventDefault();}
);

$('area.click2extern').click(function(evt){
	if(hideMap) {$('#imageMap').stop().slideUp(500);}
//	var target = $(this).find('a').attr("href"); //slider
	var target = $(this).attr("href"); // map
	change(target);
	evt.preventDefault();}
);
function change(loc){
	$.get( loc, null, function(data){
		var extHTML = data;
		$('#externalHTML').stop().fadeTo(50,0.0, function(data){
			$('#externalHTML').html(extHTML);});
		$('#externalHTML').fadeTo(100,0.99, function(){
			$.scrollTo('#externalHTML',{duration:500}); });
		$('.sprites').stop().fadeTo(0,spriteMin);
		var ahref = loc.split('.')[0];
		$('.'+ahref).fadeTo(250,spriteMax);
	});
}
	
var clickSlider = function()
{
	var hrefFile = $(this).find('a').attr("href");
	//alert(lookfor);
	//synchronise slider with image map
	// NOTE: they are synced using the href to the external HTML!
	var $cS_li = $('#panel li:has(a)');   // all slider elements
	$cS_li.hide(); // hide all but the arrows
	// find first slider element that contains the same href as the clicked map
	var $myPix = $('#panel li a[href*=' + hrefFile + ']:first').parent();
	// get its index position in the list of all slider elements
	var myli = $cS_li.index($myPix);
	// call the showSlide funktion to display the slider
	$cS_li.slice(myli, myli + visible).show();
	visibleFirst = myli;
};
$('*:has(a).click2extern').click(clickSlider); //CSS Sprites

var mapClickSlider = function()
{
	var hrefFile = $(this).attr("href");
	var $cS_li = $('#panel li:has(a)');   // all 
	$cS_li.hide(); 
	var $myPix = $('#panel li a[href*=' + hrefFile + ']:first').parent();
	var myli = $cS_li.index($myPix);
	$cS_li.slice(myli, myli + visible).show();
	visibleFirst = myli;
};
$('area.click2extern').click(mapClickSlider); //image map
//*******************************************************************

//*******************************************************************
//IMAGE MAP
//
var mapimage = $('img.imgmap').metadata();

$.fn.imgmap.defaults = {
	fill: false,
	fillColor: '#00F',
	fillOpacity: '0.0',
	rounded: 0,
	stroke: true,
	strokeColor: '#f89708',
	strokeOpacity: 1,
	strokeWidth: 1,
	fade: true,
	strokeFadOpacity: 0.8,
	alwaysOn: true,           //must be true
	rollover: true,
	rollImage: mapimage.path, //using CSS Sprites
	classSprites: 'sprites',
	spritesMin: spriteMin,
	spritesMax: spriteMax
};
//preload map image, apply hover effects and individual opacity for CSS sprites
var imageSprites = new Image();
$(imageSprites).attr('src', mapimage.path);
$(imageSprites).load(function () {
	$('img[usemap]').imgmap(); 
    //$('.sprites').fadeTo(250, mapimage.imgopacity);
});


//*******************************************************************
//

//*******************************************************************
//// Fading effect for .fading
////*******************************************************************
//******************
// Mini-navigation fading
// Only for links to external HTML

var url = document.URL;
var urls = url.split('/');
urlss = urls[urls.length-1].split('\\');
htmlname = urlss[urlss.length-1];

var fad_min = 0.60;
var fad_NotActive = 0.30;

var lihref;
$('.miniNotActive img').stop().fadeTo(0,fad_NotActive).click(function(evt){evt.preventDefault();});

$('.miniActive').each(function(){
lihref = $(this).find('a').attr("href");

if(lihref != htmlname)
{
	$(this).find('img').addClass('fading');	
}
else
	{$(this).stop().fadeTo(0,0.99);}
});



//$('#minis li img').addClass('fading');

//$('.fading').hide();	
$('.fading').stop().fadeTo(0,fad_min);

$('.fading').hover(
function(){
	//$('.fading').fadeTo(0,fad_min);
	$(this).stop().fadeTo(100, 0.99);
	},
function(){
	$('.fading').stop().fadeTo(100, fad_min);
	}
);
};
//END MAIN

//*****************************************************
// preload panel images

var is_image_loaded = function(img) {
if(img.width > 0) { return true; } 
return false;
};

var loaded = 0;
var imageSrc = '';
var toload = $('img').length;

var preloadImage = function(img){
	if(!is_image_loaded(img)) { 
		return window.setTimeout(function() { preloadImage(img); }, 200); 
	}// not yet loaded? Try again later
	else
	{
		loaded ++;
		if(loaded == toload)
		{main();}	
	}
};
// preload map-highlight image first
var highlightImg = new Image();
highlightImg.src = $('img.imgmap').metadata().path;
preloadImage(highlightImg);

$('img').each(function(){
	var preloadImg = new Image();
	preloadImg.src = ($(this).attr('src'));
	preloadImage(preloadImg);
	}); // End of each




//*******************************************
// Tabs
$('#Zoomify').show();
$('#tabs').tabs();
//$('rect').hide();

});