$(document).ready(function() {
  
  $('.kuvat img').click(function() {
    // overlay background
    var background = $('<div>');
      
    $(background).attr('id', 'overlayBackground').animate({'opacity':'.6'},1000)
                                                  .css('width', $(document).width())
                                                 .css('height', $(document).height())
                                                 .show('fast');
    $('body').append(background);
    
    // popup image
    var newImage = $('<img>');
    var width = $('body').width();
    var newDiv = $('<div>');

    $(newDiv).attr('id', 'popup_galleria'); 

    $(newImage).attr('src', $(this).attr('alt') + '&size=normal')
               .attr('id', 'largeImage');

    $('body').append(newDiv);
    $('#popup_galleria').append('<span id="popup_close">sulje ikkuna</span>')
                        .append('<h1>' + $(this).attr('title') + '</h1>')
                        .append(newImage);
    if($('#allowComments').attr('value') == 'true') {
      if($('#allowOsoite').attr('value') == 'true' && $('#allowPuhelin').attr('value') == 'false') {
          $('#popup_galleria').append('<br><a id="toggle_kommentti">Tilaa tuote tai j&auml;t&auml; viesti</a><form action="?toiminto=galleria&action=kommentti&kuvaID=' + $(this).attr('id') + '" method="post" id="popup_form"><label for="kommentti_nimi"><span class="obs">*</span> Nimi:</label><br><input type="text" id="kommentti_nimi" name="nimi"><br><label for="kommentti_sposti">S&auml;hk&ouml;posti:</label><br><input id="kommentti_sposti" type="text" name="sposti"><br><label for="kommentti_osoite">Osoite:</label><br><input id="kommentti_osoite" type="text" name="osoite"><br><label for="kommentti_teksti"><span class="obs">*</span> Viesti</label><br><textarea id="kommentti_teksti" name="kommentti" cols="30" rows="8"></textarea><br><label for="roskaa">Hyv&auml;ksy viestin l&auml;hetys (roskapostin esto):</label><br><input name="roskaa" value="ei" type="checkbox"><br><input type="submit" value="L&auml;het&auml;"></form>');
      } else if($('#allowPuhelin').attr('value') == 'true' && $('#allowOsoite').attr('value') == 'false') {
          $('#popup_galleria').append('<br><a id="toggle_kommentti">Tilaa tuote tai j&auml;t&auml; viesti</a><form action="?toiminto=galleria&action=kommentti&kuvaID=' + $(this).attr('id') + '" method="post" id="popup_form"><label for="kommentti_nimi"><span class="obs">*</span> Nimi:</label><br><input type="text" id="kommentti_nimi" name="nimi"><br><label for="kommentti_sposti">S&auml;hk&ouml;posti:</label><br><input id="kommentti_sposti" type="text" name="sposti"><br><label for="kommentti_puhelin">Puhelin:</label><br><input id="kommentti_puhelin" type="text" name="puhelin"><br><label for="kommentti_teksti"><span class="obs">*</span> Viesti</label><br><textarea id="kommentti_teksti" name="kommentti" cols="30" rows="8"></textarea><br><label for="roskaa">Hyv&auml;ksy viestin l&auml;hetys (roskapostin esto):</label><br><input name="roskaa" value="ei" type="checkbox"><br><input type="submit" value="L&auml;het&auml;"></form>');
      } else if($('#allowPuhelin').attr('value') == 'true' && $('#allowOsoite').attr('value') == 'true') {
          $('#popup_galleria').append('<br><a id="toggle_kommentti">Tilaa tai kysy tuotteesta</a><form action="?toiminto=galleria&action=kommentti&kuvaID=' + $(this).attr('id') + '" method="post" id="popup_form"><label for="kommentti_nimi"><span class="obs">*</span> Nimi:</label><br><input type="text" id="kommentti_nimi" name="nimi"><br><label for="kommentti_sposti">S&auml;hk&ouml;posti:</label><br><input id="kommentti_sposti" type="text" name="sposti"><br><label for="kommentti_osoite">Osoite:</label><br><input id="kommentti_osoite" type="text" name="osoite"><br><label for="kommentti_puhelin">Puhelin:</label><br><input id="kommentti_puhelin" type="text" name="puhelin"><br><label for="kommentti_teksti"><span class="obs">*</span> Viesti</label><br><textarea id="kommentti_teksti" name="kommentti" cols="30" rows="8"></textarea><br><label for="roskaa">Hyv&auml;ksy viestin l&auml;hetys (roskapostin esto):</label><br><input name="roskaa" value="ei" type="checkbox"><br><input type="submit" value="L&auml;het&auml;"></form>');
      } else {
          $('#popup_galleria').append('<br><a id="toggle_kommentti">J&auml;t&auml; kommentti</a><form action="?toiminto=galleria&action=kommentti&kuvaID=' + $(this).attr('id') + '" method="post" id="popup_form"><label for="kommentti_nimi"><span class="obs">*</span> Nimi:</label><br><input type="text" id="kommentti_nimi" name="nimi"><br><label for="kommentti_sposti">S&auml;hk&ouml;posti:</label><br><input id="kommentti_sposti" type="text" name="sposti"><br><label for="kommentti_teksti"><span class="obs">*</span> Kommentti</label><br><textarea id="kommentti_teksti" name="kommentti" cols="30" rows="8"></textarea><br><label for="roskaa">Hyv&auml;ksy viestin l&auml;hetys (roskapostin esto):</label><br><input name="roskaa" value="ei" type="checkbox"><br><input type="submit" value="L&auml;het&auml; kommentti"></form>');
      }
      $('#popup_galleria').append('<div id="kommentit"></div>');
      $('#kommentit').load("?toiminto=haeKommentit&kuvaID=" + $(this).attr('id'));      
    }

    // linkki alkuperäiseen kuvaan
    $('#largeImage').wrap('<a href="' + $(this).attr('alt') + '&size=original" id="linkto_original"></a>');

    // center the div (normal imagen leveys Profiilissa on max 530 px 
    $('#popup_galleria').css('width', 530+22 + "px");
    $('#popup_galleria').css('left', ($(document).width() - $('#popup_galleria').outerWidth(true)) / 2);
    $('#popup_galleria').css('top', (($(window).scrollTop()+10) + "px"));

    if($('#allowComments').attr('value') == 'true') {
      $('#popup_form').hide();
    }
    $(newImage).fadeIn('slow', function() {
          
          $('#popup_close').bind('click', function() {
              $('#popup_galleria').fadeOut('fast');
              $('div#overlayBackground').fadeOut('fast', function() {
                $('#overlayBackground').remove(); 
                $('#popup_galleria').remove();  
              });

          }); // bind
          $('#toggle_kommentti').bind('click', function() {
            $('#popup_form').toggle();
          }); // bind toggle_kommentti
    }); // fadeIn

    var validator = $('#popup_form').validate( {
      rules: {
        nimi: "required",
        roskaa: "required",
        kommentti: "required"
      },
      messages: {
        nimi: "anna nimesi",
        roskaa: "viestin l&auml;hetys pit&auml;&auml; hyv&auml;ksy&auml;",
        kommentti: "anna kommentti"
      }
    });


  });

});