//<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
$(document).ready(function() {
    $(document).pngFix(); 


//ateljee videot
$('#atVid1').qtip({
   content: 'GLIMPSES OF TOVE JANSSON.<br/>KATSO VIDEO.', 
   position: {
      corner: {
         target: 'topMiddle',
         tooltip: 'bottomMiddle'
      }
   },
   show: 'mouseover',
   hide: 'mouseout',
   style: { 
      padding: 5,
      background: '#FFF',
      color: '#CF76C6',
      textAlign: 'center',
      fontFamily:'Tahoma, Geneva, sans-serif',
     'font-size': '13px' ,
     'font-style': 'normal',
	'font-weight': 'normal',
	'letter-spacing': '0.1em',
      border: {
         width: 7,
         radius: 5,
         color: '#FFF'
      },
      tip: { // Now an object instead of a string
         corner: 'bottomMiddle', // We declare our corner within the object using the corner sub-option
         color: '#fff',
         size: {
            x: 14, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            y : 10 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         }
},
      name: 'dark' // Inherit the rest of the attributes from the preset dark style
        
   }
   
})

$('#atVid2').qtip({
   content: 'MUUMITALO.<br/>KATSO VIDEO.', 
   position: {
      corner: {
         target: 'topMiddle',
         tooltip: 'bottomMiddle'
      }
   },
   show: 'mouseover',
   hide: 'mouseout',
   style: { 
      padding: 5,
      background: '#FFF',
      color: '#CF76C6',
      textAlign: 'center',
      fontFamily:'Tahoma, Geneva, sans-serif',
     'font-size': '13px' ,
     'font-style': 'normal',
	'font-weight': 'normal',
	'letter-spacing': '0.1em',
      border: {
         width: 7,
         radius: 5,
         color: '#FFF'
      },
      tip: { // Now an object instead of a string
         corner: 'bottomMiddle', // We declare our corner within the object using the corner sub-option
         color: '#fff',
         size: {
            x: 14, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            y : 10 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         }
},
      name: 'dark' // Inherit the rest of the attributes from the preset dark style
        
   }
   
})

$('#atVid3').qtip({
   content: 'TOVE T&Auml;YTT&Auml;&Auml; 80.<br/>KATSO VIDEO.', 
   position: {
      corner: {
         target: 'topMiddle',
         tooltip: 'bottomMiddle'
      }
   },
   show: 'mouseover',
   hide: 'mouseout',
   style: { 
      padding: 5,
      background: '#FFF',
      color: '#CF76C6',
      textAlign: 'center',
      fontFamily:'Tahoma, Geneva, sans-serif',
     'font-size': '13px' ,
     'font-style': 'normal',
	'font-weight': 'normal',
	'letter-spacing': '0.1em',
      border: {
         width: 7,
         radius: 5,
         color: '#FFF'
      },
      tip: { // Now an object instead of a string
         corner: 'bottomMiddle', // We declare our corner within the object using the corner sub-option
         color: '#fff',
         size: {
            x: 14, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            y : 10 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         }
},
      name: 'dark' // Inherit the rest of the attributes from the preset dark style
        
   }
   
})
$('#atVid4').qtip({
   content: 'VIDEOITA TOVEN <BR />EL&Auml;M&Auml;ST&Auml;', 
   position: {
      corner: {
         target: 'topMiddle',
         tooltip: 'bottomMiddle'
      }
   },
   show: 'mouseover',
   hide: 'mouseout',
   style: { 
      padding: 5,
      background: '#FFF',
      color: '#CF76C6',
      textAlign: 'center',
      fontFamily:'Tahoma, Geneva, sans-serif',
     'font-size': '13px' ,
     'font-style': 'normal',
	'font-weight': 'normal',
	'letter-spacing': '0.1em',
      border: {
         width: 7,
         radius: 5,
         color: '#FFF'
      },
      tip: { // Now an object instead of a string
         corner: 'bottomMiddle', // We declare our corner within the object using the corner sub-option
         color: '#fff',
         size: {
            x: 14, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            y : 10 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         }
},
      name: 'dark' // Inherit the rest of the attributes from the preset dark style
        
   }
   
})
//Galleria
$('#Kat1').qtip({
   content: 'KUVIA ATELJEESTA', 
   position: {
      corner: {
         target: 'topMiddle',
         tooltip: 'bottomMiddle'
      }
   },
   show: 'mouseover',
   hide: 'mouseout',
   style: { 
      padding: 5,
      background: '#FFF',
      color: '#CF76C6',
      textAlign: 'center',
      fontFamily:'Tahoma, Geneva, sans-serif',
     'font-size': '13px' ,
     'font-style': 'normal',
	'font-weight': 'normal',
	'letter-spacing': '0.1em',
      border: {
         width: 7,
         radius: 5,
         color: '#FFF'
      },
      tip: { // Now an object instead of a string
         corner: 'bottomMiddle', // We declare our corner within the object using the corner sub-option
         color: '#fff',
         size: {
            x: 14, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            y : 10 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         }
},
      name: 'dark' // Inherit the rest of the attributes from the preset dark style
        
   }
   
})
$('#At1').qtip({
   content: 'ATELJEE', 
   position: {
      corner: {
         target: 'topMiddle',
         tooltip: 'bottomMiddle'
      }
   },
   show: 'mouseover',
   hide: 'mouseout',
   style: { 
      padding: 5,
      background: '#FFF',
      color: '#CF76C6',
      textAlign: 'center',
      fontFamily:'Tahoma, Geneva, sans-serif',
     'font-size': '13px' ,
     'font-style': 'normal',
	'font-weight': 'normal',
	'letter-spacing': '0.1em',
      border: {
         width: 7,
         radius: 5,
         color: '#FFF'
      },
      tip: { // Now an object instead of a string
         corner: 'bottomMiddle', // We declare our corner within the object using the corner sub-option
         color: '#fff',
         size: {
            x: 14, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            y : 10 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         }
},
      name: 'dark' // Inherit the rest of the attributes from the preset dark style
        
   }
   
})
$('#At2').qtip({
   content: 'NUUSKAMUIKKUSEN LAULU', 
   position: {
      corner: {
         target: 'topMiddle',
         tooltip: 'bottomMiddle'
      }
   },
   show: 'mouseover',
   hide: 'mouseout',
   style: { 
      padding: 5,
      background: '#FFF',
      color: '#CF76C6',
      textAlign: 'center',
      fontFamily:'Tahoma, Geneva, sans-serif',
     'font-size': '13px' ,
     'font-style': 'normal',
	'font-weight': 'normal',
	'letter-spacing': '0.1em',
      border: {
         width: 7,
         radius: 5,
         color: '#FFF'
      },
      tip: { // Now an object instead of a string
         corner: 'bottomMiddle', // We declare our corner within the object using the corner sub-option
         color: '#fff',
         size: {
            x: 14, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            y : 10 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         }
},
      name: 'dark' // Inherit the rest of the attributes from the preset dark style
        
   }
   
})
 $('#ati1').click(function(e) {
    e.preventDefault();
    $.nyroModalManual({
					  	width: 820, 
                height: 430,
      url: 'ateljeeinfo1.html'
    });
    return false;
  });
 
 $('#ati2').click(function(e) {
    e.preventDefault();
    $.nyroModalManual({
			width: 820, 
                height: 430,
         url: 'ateljeeinfo2.html'
    });
    return false;
  });

$('#atv1').click(function(e) {
		    $.nyroModalManual({
				bgColor: '#000000',
					url: 'ateljeevid1.html'
			});
			return false;
});
$('#atv2').click(function(e) {
			    $.nyroModalManual({
				bgColor: '#000000',
				url: 'ateljeevid2.html'
			});
			return false;
});
$('#atv3').click(function(e) {
			    $.nyroModalManual({
				bgColor: '#000000',
					url: 'ateljeevid3.html'
			});
			return false;
});
$('a[rel="copy"]').click(function(e) {
		$.nyroModalSettings({
				bgColor: '#000000',
				width: 820, 
  height: 430
			});
			return false;
});

});
function esiin(who){
	$(who).slideDown('slow');	
}
/* TICKERS */
//$opened keeps record of opened ticker
/*
var $opened = 'void';
var $opened2 = 'void';

//position tickers to position 0-tickerWidth
for(var i=0;i<$(".arrTeksti").length;i++){
var $kohde = $(".arrTeksti:eq("+i+")");
var $kohdeW = -parseInt($kohde.outerWidth(),10);
$kohde.css("left",$kohdeW+"px");
}

//openTicker(who) opens ticker from clicked arrow button, who -parameter is parent div of the caller link
function openTicker(who){
	var $mtrg = $(who).children('.textHolder').children('.arrTeksti');
	var $mtrg2 = $(who).children('.arrow').children('a').children("img");
	if(parseInt($mtrg.css('left'),10) == 0){
	//hide ticker
		$mtrg.animate({left: -$mtrg.parent().outerWidth() , opacity:0}, 800);
		$mtrg2.attr({ src: "images/nuoli2.png", title: "Avaa", alt: "Avaa"});
	}else {
	//close other opened tickers
		if($opened != 'void'){
			$opened.animate({left: -$opened.parent().outerWidth(), opacity:0}, 800);
			$opened2.attr({ src: "images/nuoli2.png", title: "Avaa", alt: "Avaa"});
		}
	//show ticker
		$mtrg.animate({left: 0 , opacity:1}, 1000);
		$mtrg2.attr({ src: "images/nuoli2_hi.png", title: "Avaa", alt: "Avaa"});
		$opened = $mtrg;
		$opened2 = $mtrg2;
		
	}
}
*/
//-->