/**
 * Mini-kalender
 */
$(document).ready( function() {

  /* check IE6 */
  var vs = parseInt(jQuery.browser.version);
  
  var datum_von = $("#vom").val();
  var datum_bis = $("#bis").val();

  if( jQuery.browser.msie && ( vs == 6 || vs == 7)) {

        var cv = $( "#vom").datepicker( { showButtonPanel: true} );
        var cb = $( "#bis").datepicker( { showButtonPanel: true} );

        $( "#icon-vom").click( function(){ cv.datepicker('show') });
        $( "#icon-bis").click( function(){ cb.datepicker('show') });

        // Kalender ausblenden, falls ESC gedrueckt wird ...
        $('body').keyup(function( e) { if( e.which == 27) { cv.datepicker('hide'); cb.datepicker('hide') } }) ;
  }
  else {

    /* Fuer die Barrierefreiheit soll der Datepicker direkt hinter dem Eingabeelement eingefuegt
           werden (anstatt am Ende vom DOM):

           Strategie 1 - inline Element erstellen, ausblenden & stylen und Verhalten von Hand nachbauen
           Strategie 2 - im DOM umhaengen und ggf. stylen (Prototyp funktioniert leider nicht ;)
        */
        function kalenderAnzeigen( id) {

                 var other;
                 if( id == "vom") { other = "bis"; } else { other = "vom"; }

                 // Positionieren (direkt unter
                 var pos = $("#"+ id).position();
                 //$("#datepicker-" + id).offset({ top: this.top, left: (this.left+ 400) })
                 $("#datepicker-" + id).css( { "left": (pos.left) + "px" } );

                 // Kalender anzeigen und den anderen ausblenden
                 $("#datepicker-" + other).hide();
                 $("#datepicker-" + id).fadeIn();
        }


        // Kalender fuer "vom" erzeugen
        var dpv = $( "#datepicker-vom" ).datepicker({
                        altField: "#vom",
                        showButtonPanel: true,
                        onSelect: function(dateText, inst) {

                                                // "sich selbst" ausblenden
                                                $("#datepicker-vom").fadeOut() ;

                                                // disable handler, set focus and enable handler again
                                                $("#vom").unbind('focus');
                                                $("#vom").focus();

                                                // timeout for IE 8
                                                setTimeout(function () {
                                                        $("#vom").bind( 'focus', function() { kalenderAnzeigen("vom") });
                                                }, 100);
                                          }
        });
        // Kalender "bis"
        var dpb = $( "#datepicker-bis" ).datepicker({
                        altField: "#bis",
                        showButtonPanel: true,
                        onSelect: function(dateText, inst) {

                                                // "sich selbst" ausblenden
                                                $("#datepicker-bis" ).fadeOut() ;

                                                // disable handler, set focus and enable handler again
                                                $("#bis").unbind('focus');
                                                $("#bis").focus();

                                                // timeout for IE 8
                                                setTimeout(function () {
                                                        $("#bis").bind( 'focus', function() {kalenderAnzeigen("bis") });
                                                }, 100);
                                          }
        });

        // jeweiligen Kalender bei Focus einblenden
        //$("#vom").bind( 'focus click', function() { kalenderAnzeigen("vom") });
        //$("#bis").bind( 'focus click', function() { kalenderAnzeigen("bis") });


        // Kalender ausblenden, falls woanders hin geklickt oder ESC gedrueckt wird ...
        $('body').click(function() { $("#datepicker-vom" ).fadeOut() ; $("#datepicker-bis" ).fadeOut() ; }) ;
        $('body').keyup(function( e) { if( e.which == 27) { $("#datepicker-vom" ).fadeOut() ; $("#datepicker-bis" ).fadeOut() } }) ;

        // ... ausser innerhalb der Kalender bzw. auf deren Labels :)
        $('#datepicker-vom').click( function(e){ e.stopPropagation(); });
        $('#vom').click( function(e){ e.stopPropagation(); });
        $('#datepicker-bis').click( function(e){ e.stopPropagation(); });
        $('#bis').click( function(e){ e.stopPropagation(); });
        $('.for-datum').click( function(e){ e.stopPropagation(); });
        $('.label').click( function(e){ e.stopPropagation(); });

        // Kalender beim Klicken auf Kalender-Icon anzeigen/ausblenden (inkl. dynamischer Alt-Text)
        $( "#icon-vom").children('img').attr( 'alt', 'Kalender einblenden');
        $( "#icon-bis").children('img').attr( 'alt', 'Kalender einblenden');

        $( "#icon-vom").click( function( e){

                e.stopPropagation();

                if( $("#datepicker-vom" ).is(':visible')) {
                        $("#datepicker-vom" ).fadeOut() ;
                        $( "#icon-vom").children('img').attr( 'alt', 'Kalender einblenden');
                } else {
                        kalenderAnzeigen("vom");
                        $( "#icon-vom").children('img').attr( 'alt', 'Kalender ausblenden');
                }
        });
        $( "#icon-bis").click( function( e){

                e.stopPropagation();

                if( $("#datepicker-bis" ).is(':visible')) {
                        $("#datepicker-bis" ).fadeOut() ;
                        $( "#icon-bis").children('img').attr( 'alt', 'Kalender einblenden');
                } else {
                        kalenderAnzeigen("bis");
                        $( "#icon-bis").children('img').attr( 'alt', 'Kalender ausblenden');
                }
        });

        // Label simulieren (onClick -> set Focus)
        // * das Label wird simuliert, da wegen des Screenreaders aufs Label verzichtet
        //   wird, sonst liest dieser das title-Attribut mit den Formatshinweisen nicht
        //   vor (diese Information sollte/konnte/wollte nicht im Layout eingefuegt werden)
        $(".for-datum").click( function(){ $(this).next("input").focus(); });
        $("strong.label").click( function(){ $(this).nextAll("input:first").focus(); });

        // Startwerte entfernen
        $("#vom").val(datum_von);
        $("#bis").val(datum_bis);
  }
}) ;