//Kepmegjelenito vezerlese billentyukkel:
//IE vs browsers, ez a megoldas IEben nem megy 
//(bar IE megoldas hasznosabb lenn, mert engedi divhez is rendelni keydownt...)
//(lasd IE megoldasat lejjebb a resizeLayerToImg fuggvenyben)
//(FF es tsai azonban csak igy tudjak lekezelni dives keypresseket)
//(Az egesz windowra ki kell adni, aztan elkapni ha epp latszik a div)
window.onkeydown = myKeyHandler; 

var brwWidth = 800;
var brwHeight = 600;
var bPicLayer = false;
var picsArr = [];
var currPics = '';
var picsPath = './';

function myParseInt(s) {
  var ret = parseInt(s);
  return (isNaN(ret)? 0 : ret);
}

function f_clientWidth() {
	return f_filterResults (
		window.innerWidth ? window.innerWidth : 0,
		document.documentElement ? document.documentElement.clientWidth : 0,
		document.body ? document.body.clientWidth : 0
	);
}
function f_clientHeight() {
	return f_filterResults (
		window.innerHeight ? window.innerHeight : 0,
		document.documentElement ? document.documentElement.clientHeight : 0,
		document.body ? document.body.clientHeight : 0
	);
}
function f_scrollLeft() {
	return f_filterResults (
		window.pageXOffset ? window.pageXOffset : 0,
		document.documentElement ? document.documentElement.scrollLeft : 0,
		document.body ? document.body.scrollLeft : 0
	);
}
function f_scrollTop() {
	return f_filterResults (
		window.pageYOffset ? window.pageYOffset : 0,
		document.documentElement ? document.documentElement.scrollTop : 0,
		document.body ? document.body.scrollTop : 0
	);
}
function f_filterResults(n_win, n_docel, n_body) {
	var n_result = n_win ? n_win : 0;
	if (n_docel && (!n_result || (n_result > n_docel)))
		n_result = n_docel;
	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}


function setupLayerAndImg() {
  layer = document.getElementById('showpic_layer');
  i = document.getElementById('showpic_img');
  var aspect = i.clientWidth/i.clientHeight;

  if( !i ) {
    return false;
  }
  var x, y;
  ww = f_clientWidth();
  wh = f_clientHeight();
  sl = f_scrollLeft();
  st = f_scrollTop();

  if( ww*0.8 < i.clientWidth ) {
    i.style.width = ww*0.8 + 'px';

    layer.style.width = i.style.width;
    layer.style.height = myParseInt(i.style.width)/aspect + 'px';
  }
  if( wh*0.8 < i.clientHeight ) {
    i.style.height = wh*0.8 + 'px';

    layer.style.height = i.style.height;
    layer.style.width = myParseInt(i.style.height)*aspect + 'px';
  }
  i.style.width = layer.style.width;
  i.style.height = layer.style.height;

  x = ww/2 + sl - i.clientWidth/2;
  y = wh/2 + st - i.clientHeight/2;

  layer.style.left = x + 'px';
  layer.style.top = y + 'px';
}

//return false azert kell, hogy ha a JS engedelyezve van, akkor ne kovesse az A HREFeket a browser
function hidePic() {
	document.getElementById('loader').style.visibility = 'hidden';  //biztosamituti
  hideLayerControls();
  layer = document.getElementById('showpic_layer');
  if( layer )
    layer.style.display = 'none';
  bPicLayer = false;
  return false;
}

function prevPic() {
	currPic--;
	if(currPic<0) {
		currPic = 0;
	} else {
		hideLayerControls();
		showPic(picsArr[currPic]);
	}
}

function nextPic() {
	currPic++;
	if(currPic>=picsArr.length) {
		currPic = picsArr.length-1;
	} else {
		hideLayerControls();
		showPic(picsArr[currPic]);
	}
}
function searchArr(a,s) {
	for( var i = 0; i < a.length; i++ ) {
		if( a[i] == s )
			return i; 
	}
	return -1;
}

function showPicArr(p, u, arr) {
	picsArr = arr;
	picsPath = p;
	currPic = searchArr( arr, u );
  return showPic(u);
}

function showPic(id) {
	u = picsPath + id;
  layer = document.getElementById('showpic_layer');
  bPicLayer = true;
  document.getElementById('loader').style.visibility = 'visible';
  document.getElementById('loader').style.left = ((f_scrollLeft() + f_clientWidth()/2) - 15) + 'px';
  document.getElementById('loader').style.top = ((f_scrollTop() + f_clientHeight()/2) - 15) + 'px';
  layer.innerHTML = "<img onload='resizeLayerToImg(this)' id='showpic_img' src=\'"+u+"\' alt=\'\' />";
  img = document.getElementById('showpic_img');
  layer.style.display = 'block';
  layer.style.visibility = 'hidden';
  return false;
}

function resizeLayerToImg( i ) {
  layer = document.getElementById('showpic_layer');
  layer.style.width = i.clientWidth + 'px';
  layer.style.height = i.clientHeight + 'px';
  setupLayerAndImg();
  var bShow = layer.style.display == 'block';
  document.getElementById('loader').style.visibility = 'hidden';
  if( bShow ) {
    layer.style.visibility = 'visible';
    layer.focus();  //IE vs browsers, itt IE miatt kell ez
    layer.onkeydown = myKeyHandler; //IE vs browsers, itt IE miatt kell ez
    setupLayerControls( i.clientWidth / 2, i.clientHeight );
  }
  return false;
}

function hideLayerControls() {
  document.getElementById('erre').style.display='none';
  document.getElementById('arra').style.display='none';
  document.getElementById('zar').style.display='none';
}

function setupLayerControls(w,h) {
    layer = document.getElementById('showpic_layer');
    document.getElementById('erre').style.width = w + 'px';
    document.getElementById('erre').style.height = h + 'px';
    document.getElementById('arra').style.width = w + 'px';
    document.getElementById('arra').style.height = h + 'px';

    document.getElementById('zar').style.display='block';
    document.getElementById('zar').style.left = myParseInt(layer.style.left)
                             + i.clientWidth
                             -5
                             + 'px';
    document.getElementById('zar').style.top = myParseInt(layer.style.top) - 5 + 'px';
    document.getElementById('zar').style.visibility='visible';


    if( currPic > 0 ) {
      document.getElementById('erre').style.display='block';
      document.getElementById('erre').style.left = myParseInt(layer.style.left) + 10 + 'px';
      document.getElementById('erre').style.top = myParseInt(layer.style.top) + 10 + 'px';
      document.getElementById('erre').style.visibility='visible';
    }
    if( currPic < picsArr.length - 1 ) {
      document.getElementById('arra').style.display='block';
      document.getElementById('arra').style.left = myParseInt(layer.style.left)
                             + i.clientWidth 
                             - document.getElementById('arra').clientWidth
                             + 11
                             + 'px';
      document.getElementById('arra').style.top = myParseInt(layer.style.top) + 10 + 'px';
      document.getElementById('arra').style.visibility='visible';
    }
}

function myKeyHandler( e ) {
  if( window.event ) {
    key = window.event.keyCode;
  } else {
    key = e.keyCode;
  }
  if( bPicLayer ) {
    switch( key ) {
      case 27:
        hidePic();
        break;
      case 37:
        prevPic();
        break;
      case 39:
        nextPic();
        break;
    }
  }
}

function openPlayer(trid,beLe) {
  url = 'player.php?mit='+trid;
  if( !beLe ) {
    url += '&dl=1';
  }
  if( beLe ) {
    h=108;
  } else {
    h=137;
  }
  window.open( url, 'playerWindow','width=232,height='+h+',directories=no,menubar=no,toolbar=no,scrollbars=no,location=no,resizeable=no,status=no');
}

function openLyrics(trid) {
  window.open( 'lyrics.php?mit='+trid, 'lyricsWindow','width=650,height=700,directories=no,menubar=no,toolbar=no,scrollbars=no,location=no,resizeable=no,status=no');
}