jQuery.fn.center = function () {
  this.css("position","absolute");
  this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
  this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
  return this;
}

$(function(){
  $(window)
    .scrollTop(0)
    .on('scroll',function(){
      var yLimit=$('#sect_0 #jenima_verlag').position().top+$('div.jenima-page').position().top
      $('.menu').css('top',$(window).scrollTop()+60)
      if($(window).scrollTop()<yLimit){
console.log('portal')
        $('.menu-bar').css('opacity',0)
//      $('.toggle-bars').css('top',30)
// reset toggle-vert and hide vert-menu

        $('.toggle-vert #top_bar').css('transform','rotate(0deg)')
        $('.toggle-vert #mid_bar').show(0)
        $('.toggle-vert #bot_bar').css('transform','rotate(0deg)')

        $('.toggle-bars')
          .css('display','block')
          .css('opacity',1)
        $('.vert-menu').css('height',0)
      }
      else if($(window).scrollTop()<(yLimit+50)){
console.log('twilight')
        $('.menu-bar').css('opacity',($(window).scrollTop()-yLimit)/50)
        $('.toggle-bars')
          .css('display','block')
          .css('top',30-(($(window).scrollTop()-yLimit)/3.333))
          .css('opacity',1-(($(window).scrollTop()-yLimit)/50))
      }
      else{
console.log('anywhere')
        $('.menu-bar').css('opacity',1)
        if($(window).scrollTop()>=$('section#sect_1').position().top-36){	// ('.menu').height
          $('.toggle-bars')
            .css('display','none')
            .css('opacity',0.5-(($(window).scrollTop()-(yLimit+50))/100))
        }
        if(parseInt($('.side-menu').css('left'))>=0){ $('.side-menu').animate({ left: -280 },400) }
      }
    })

  $('.toggle-bars').on('click',function(){
//console.log('top_bar transform='+$('#top_bar').css('transform'))
    var iPad=($(window).width()>600)
console.log('iPad='+iPad)
    var transVal=(iPad?12:9.5)
    if(($('.toggle-bars #top_bar').css('transform')=='none') ||
       ($('.toggle-bars #top_bar').css('transform')=='matrix(1, 0, 0, 1, 0, 0)')){
//console.log('show side-menu')
      $('.toggle-bars #top_bar').css('transform','scaleX(1.6) translate(0px,'+transVal+'px) rotate(60deg)')
      $('.toggle-bars #mid_bar').hide(400)
      $('.toggle-bars #bot_bar').css('transform','scaleX(1.6) translate(0px,-'+(transVal+1)+'px) rotate(-60deg)')
      $('.side-menu').animate({ left: 0 },400)
    }
    else{
//console.log('hide side-menu')
      $('.toggle-bars #top_bar').css('transform','rotate(0deg)')
      $('.toggle-bars #mid_bar').show(400)
      $('.toggle-bars #bot_bar').css('transform','rotate(0deg)')
      $('.side-menu').animate({ left: -280 },400)
    }
  })
  
  $('.toggle-vert, .vert-menu').on('click',function(){
    var iPad=($(window).height()>600)
    if($('.detail').css('opacity')>0){ hideDetail() }
console.log('toggle-vert clicked')
    if(($('.toggle-vert #top_bar').css('transform')=='none') ||
       ($('.toggle-vert #top_bar').css('transform')=='matrix(1, 0, 0, 1, 0, 0)')){
      $('.toggle-vert #top_bar').css('transform','scaleX(1.7) translate(0px,8px) rotate(60deg)')
      $('.toggle-vert #mid_bar').hide(400)
      $('.toggle-vert #bot_bar').css('transform','scaleX(1.7) translate(0px,-9px) rotate(-60deg)')
      var hei=parseInt($('.vert-menu .menu-item').css('fontSize'))*5.5
// Lang=de, Simple=1
console.log('height='+hei)
      $('.vert-menu').animate({ height: hei },400)
    }
    else{
//console.log('hide vert-menu')
      $('.toggle-vert #top_bar').css('transform','rotate(0deg)')
      $('.toggle-vert #mid_bar').show(400)
      $('.toggle-vert #bot_bar').css('transform','rotate(0deg)')
      $('.vert-menu').animate({ height: 0 },400)
    }
  })

  $('.detail').on('mouseenter','.small-icon',function(e){
    if(!$(this).hasClass('ico-empty')){
      var myName=$(this).attr('id').split('_')[0]
//onsole.log('enter myName='+myName)
//onsole.log('not empty: '+(!$(this).hasClass('ico-empty')?'ja':'nein'))
      if(!$(this).css('background-image').match(/busy/)){
//      $(this)
//        .css('background-image','url(/pict/inv-'+myName+'.png)')
//        .css('background-size','100%')
      }
    }
  })

  $('.detail').on('mouseout','.small-icon',function(e){
    if(!$(this).hasClass('ico-empty')){
      var myName=$(this).attr('id').split('_')[0]
//onsole.log('out myName='+myName)
      if(!$(this).css('background-image').match(/busy/)){
//     $(this)
//        .css('background-image','url(/pict/ico-'+myName+'.png)')
//        .css('background-size','100%')
      }
    }
  })

  $('.detail').on('click','.small-icon, span.audio',function(e){
    e.stopPropagation();
  })

  $('.detail').on('mousedown','.small-icon, span.audio',function(e){
    var myName=$(this).attr('id').split('_')[0]
//onsole.log('down myName='+myName)
    if(!$(this).hasClass('ico-empty')){
      if(myName=='audio'){
console.log('song clicked')
        $(this).css('cursor','url(/pict/play.png), auto')
        playSong($(this))
      }
      else{	// (myName=='pdf')||(myName=='mp3')
        
      }
    }
  })

  $('.detail').on('mouseup','.small-icon, span.audio',function(e){
    var myName=$(this).attr('id').split('_')[0]
console.log('Up myName='+myName)
//  if(!$('audio#audio_player')[0].paused){ $('audio#audio_player')[0].pause() }
    if(myName=='info'){
      var nr=$(this).attr('id').split('_')[1]
      var dest='A03C6'+nr
      while(dest.length<8){ dest+=String.fromCharCode(65+parseInt(Math.random()*6)) }
      showDetail(nr,'BA137B1FAD70/de/'+dest)
    }
    else if(myName=='buy'){
      var prd=$(this).attr('id').split('_')[1]
      $.ajax({
        type: 'GET',
        url: '/AC9160DC681C/'+prd,
        success: function(xml){
          var cnt=$(xml).find('items').attr('cnt');
          $('#menu_bag').attr('src','/pict/bag'+cnt+'.png');
//        $('.detail').load('/BA137B1FAD70/de/B658CCA')
          hideDetail()
        },
        statusCode: { 404: function(){ showMessage(101) } }
      })
    }
    else if(myName=='close'){
      $('.detail')
        .animate({ height: 0, width: 0 }, 800, 'easeOutCubic', function(){
          $('.detail').css('opacity',0).html('')
        })
      $('.container').css('opacity',0.9)
    }
    else if(myName=='cls'){
      var what=$(this).attr('id').split('_')[1]
console.log('what='+what)
      if((what=='pce')||(what=='band')){
        var nr=$(this).attr('id').split('_')[2]
        $('.detail').load('/BA137B1FAD70/de/B658C'+nr+'FF')
      }
      else if(what=='bag'){
        hideDetail()
      }
    }
    else if(myName=='pce'){
console.log('here i am')
    }
  })

  $(window).on('orientationchange',function(){
//nsole.log('orientation changed')
    gotoElement($('section#sect_2'),0)
    hideDetail()
//  openBag()
  })

  $('span.audio').on('click',function(){
  })

  $('audio#audio_player')
    .on('ended',function(){
console.log('the audio has ended.')
      $('.ico-audio').each(function(){
console.log('id='+$(this).attr('id')+', img='+$(this).css('background-image'))
        if($(this).css('background-image').match(/busy32/)){
          $(this).css('background-image','url(/pict/ico-noten.png)')
        }
      })
    })
    .on('timeupdate',function(e){
      if(this.currentTime == this.duration){
        $('.song').each(function(){
          if($(this).css('background-image').match(/busy32/)){ unmarkBusy($(this)) }
        })
      }
    })

  $('input.frm-input, textarea.frm-textarea').each(function(){ $(this).val('') })

  $('#menu_bag').on('click',function(){ openBag() })
})

function playSong(e){
  if(!$('audio#audio_player')[0].paused){
    $('audio#audio_player')[0].pause()
    e.css('cursor','default')
  }
  else{
    var band=e.attr('id').split('_')[1]
    var track=e.attr('id').split('_')[2]
    $('audio#audio_player')
      .attr('src','/audio/short/B'+band+'Tr'+track+'.mp3')
    $('audio#audio_player')[0].play()
console.log('playing track '+track)
    e.css('cursor','wait')
  }
}

function hideDetail(){
  $('.detail')
    .animate({ left: '50vw', width: 0, top: '50%', height: 0 }, 400, 'easeOutCubic', function(){
      $('.detail').css('opacity',0).html('')
    })
  $('.container').css('opacity',0.9)
  $('body').removeClass('noscroll')
}

function gotoBagScreen(nr){
  var dest='';
  if(nr=='one'){ dest='A99E' }
  else if(nr=='two'){ dest='D0C4' }
console.log('goto '+dest)
  if(dest){
    while(dest.length<8){ dest+=String.fromCharCode(65+parseInt(Math.random()*6)) }
    $('.detail')
      .fadeOut(300,function(){
        $('.detail').load('/BA137B1FAD70/de/'+dest,function(){
          $('.detail').fadeIn(300)
        })
      })
  }
}

function openBag(){
  gotoElement($('section#sect_2'),0)
//$('.container').css('opacity',0)
//if(($('.detail').width()==0)&&($('.detail').height()==0)){
    var ext='46F6';
    while(ext.length<8){ ext+=String.fromCharCode(65+parseInt(Math.random()*6)) }
    showDetail('bag','/BA137B1FAD70/de/'+ext)
//}
}

function showDetail(nr,act){
console.log('showDetail nr='+nr+', act='+act)
  var e
  if($('section').width()>640){
    e=$('.container')
  }
  else{
    e=$('section')
  }
  var contLeft=e.position().left+parseInt(e.css('margin-left'))
  var contWid=e.width()
console.log('wid='+contWid*0.9)
  var landsc=(e.height()<e.width())
  var hFac=(landsc?0.9:0.8)
  $('.detail')
    .animate({ opacity: 0.9,
               left: (contLeft+0.05*contWid), width: contWid*0.9,
               top: ((e.height()*.125)<65?65:'12.5vh'), height: '75vh' }, 400, 'easeOutCubic', function(){
      $('.detail').load(act)
    })
  $('body').addClass('noscroll')
}

function gotoElement(e,parent){
  var nr=parseInt(e.attr('id').split('_')[1])
  var y=e.position().top // -(nr>0?36:0)
console.log('goto '+e.attr('class')+(parent?', parent='+parent.attr('class'):''))
  $('body').animate({ scrollTop: y }, 800, 'easeOutCubic')
  if(nr==0){
    $('.toggle-bars #top_bar').css('transform','rotate(0deg)')
    $('.toggle-bars #mid_bar').show(400)
    $('.toggle-bars #bot_bar').css('transform','rotate(0deg)')
  }
}

function initFields(clsString){
  for(let cls of clsString.split(/ /)){
    $('.'+cls)
      .each(function(){
        if($(this).val().length==0){
          $(this).val($(this).attr('default-value'))
          $(this).addClass('show-default')	// .prop('readonly',true)
        }
      })
      .on('click focusin',function(){
console.log('input clicked')
        if($(this).hasClass('show-default')){
          $(this)
            .removeClass('show-default').val('')
//          .prop('readonly',false)
            .css('border-color','#888')
          $(this).focus()
        }
      })
      .on('focusout',function(){
console.log('input='+$(this).val())
        if($(this).val().length==0){
          $(this).val($(this).attr('default-value'))
          $(this).addClass('show-default')	// .prop('readonly',true)
        }
      })
  }
}

function showMessage(msgId){
  var msg;
  var h=parseInt($('.detail').height()/3)

  if(msgId==101){
    msg="<p>Der Artikel konnte nicht in die Einkaufstasche gelegt werden.</p><p>Bitte probiere es später noch einmal.</p>"
  }
  else if(msgId==103){
    msg="<p>Der Rabatt-Code konnte nicht eingelöst werden.</p><p>Bitte probiere es später noch einmal.</p>"
  }
  else{
    msg="<p>Es ist eine unbekanner Fehler aufgetreten: "+msgId+"</p>"
  }

console.log('height='+h)

  $('#errorMsg')
    .attr('title',(msgId%2?"Fehler":"Hinweis"))
    .html(msg)
    .dialog({
      modal: true,
      width: '60%',
      height: h,
      position: { my: "center center", at: "center center", of: '.detail' },
      buttons: {
        'Ok': function(){
          $(this).html('').dialog('destroy')
        }
      }
    })
}