//$(document).ready(hotelSheetInit);

var showingPhoto = 0;
var photoCount = 6;

var hotelSheetPages = 0;


function showPhotos() {

  var loadedImg = $('#hotel-sheet-photos img');
  if(loadedImg.length == 0) {
    alert('No photos');
    return;
  } 

  var overlay = new Overlay();
  overlay.show(function() {

    var win = new OverWindow(940, null, overlay);

    var div0 = document.createElement('div');
    div0.id = 'hotel-sheet-photo-show';
    win.content = div0;

   var h2 = document.createElement('h2');
    $(div0).append(h2);

    var h2text = $('#gallery_title h2').text(); 
	$(h2).text(h2text);




    var div01 = document.createElement('div');
    div01.id = 'hotel-sheet-photo-show-title';
    $(div0).append(div01);

    var h3 = document.createElement('h3');
    $(div01).append(h3);

    var h3text = $('#hotel-sheet-page_0 h3').text();
    $(h3).text(h3text);

    var span = document.createElement('span');
    $(div01).append(span);

    var loadedSpan = $('#hotel-sheet-photos span');
    $(span).text($(loadedSpan[0]).text());

    var div1 = document.createElement('div');
    div1.id = 'hotel-sheet-photo-show-image';
    $(div0).append(div1);

    var img = document.createElement('img');
    $(div1).append(img);

    img.src = loadedImg[0].src; 
    
    var div2 = document.createElement('div');
    div2.id = 'hotel-sheet-photo-show-image-list';
    $(div0).append(div2);
  
    var leftArrow = document.createElement('img');
    leftArrow.className = 'arrow';
    $(div2).append(leftArrow);
    leftArrow.src = '/img/left-arrow.png'; 
    $(leftArrow).click(function() {

      if(showingPhoto == 0)
        return;

      showingPhoto--;

      var photos = $('#hotel-sheet-photo-show-image-list img.photo');
      $.each(photos, function(index, value) {
        if(index == showingPhoto) { 
          $(value).css('opacity', '1');
          if(!$(value).is(':visible')) {
            $(value).show();
            $(photos[index + photoCount]).hide();
          }
          img.src = loadedImg[index].src;
          $(span).text($(loadedSpan[index]).text());
        } else {
          $(value).css('opacity', '0.7');
        }
      });
  
    });


    var photos = 0;
    $.each(loadedImg, function(index, value) {
      photos++;
      var img0 = document.createElement('img');
      img0.src = value.src + '?w=76';
      img0.className = 'photo';
      $(div2).append(img0); 
      if(index > photoCount)
        $(img0).hide();
      $(img0).click(function() {
        img.src = value.src;
      });
      if(index > 0)
        $(img0).css('opacity', '0.7');
    });

    var rightArrow = document.createElement('img');
    rightArrow.className = 'arrow';
    $(div2).append(rightArrow);
    rightArrow.src = '/img/right-arrow.png'; 
    $(rightArrow).click(function() {

      if(showingPhoto + 1 == photos)
        return;

      showingPhoto++;

      var first = null;      

      $.each($('#hotel-sheet-photo-show-image-list img.photo'), function(index, value) {
        if(first == null && $(value).is(':visible'))
          first = value;
        if(index == showingPhoto) { 
          $(value).css('opacity', '1');
          if(!$(value).is(':visible')) {
            $(first).hide();
            $(value).show();
          }
          img.src = loadedImg[index].src;
          $(span).text($(loadedSpan[index]).text());
        } else {
          $(value).css('opacity', '0.7');
        }
      }); 
      
    });

    win.show(function(){
    });  

  });    

}

/*function showDescription(code) {

  var text = $('#hotel-sheet-description_' + code + ' .hotel-rooms-item-text');
  var img = $('#hotel-sheet-description_' + code + ' .hotel-rooms-item-text-header-controls img')[0];
  var span = $('#hotel-sheet-description_' + code + ' .hotel-rooms-item-text-header-controls span');
  if(text.hasClass('hidden')) {
    img.src = '/img/hotel-sheet-arrow-up.png';
    span.text('cerrar');
    text.removeClass('hidden')
  } else { 
    img.src = '/img/hotel-sheet-arrow-down.png';
    span.text('más');
    text.addClass('hidden');
  }

}

function showContact() {

  var overlay = new Overlay();
  overlay.show(function() {

    var win = new OverWindow(652, 270, overlay);

    var div0 = document.createElement('div');
    div0.id = 'hotel-sheet-contact';
    win.content = div0;

    var div1 = document.createElement('div');
    div1.id = 'hotel-sheet-contact-image';
    $(div0).append(div1);

    var img = document.createElement('img');
    $(div1).append(img);
    img.src = $('#hotel-sheet-contact-photo')[0].src;

    var div2 = document.createElement('div');
    div2.id = 'hotel-sheet-contact-sheet';
    $(div0).append(div2);

    var h2 = document.createElement('h2');
    $(div2).append(h2);
    $(h2).text('Contacto');

    var h3 = document.createElement('h3');
    $(div2).append(h3);
    var h3text = $('#hotel-sheet-contact-data-name').text();
    $(h3).text(h3text);

    var div3 = document.createElement('div');
    div3.id = 'hotel-sheet-contact-sheet-address';
    $(div2).append(div3);

    var span0 = document.createElement('span');
    $(div3).append(span0);
  <xsl:template name="content">
    <div id="hotel-sheet-header">
      <div id="hotel-sheet-header-title">
        <span><xsl:value-of select="$hotel/name" /> - <xsl:value-of select="$zone-name" /></span>
        <xsl:call-template name="category">
          <xsl:with-param name="code" select="$hotel/category/@code" />
        </xsl:call-template>
      </div>

      <div id="hotel-sheet-top-menu">
        <ul>
          <!--li><img src="/img/pdf-icon.png" alt="pdf-icon" /><span>Catálogo</span></li-->
          <li><a href="javascript:showPhotos();"><img src="/img/photo-icon.png" alt="photo-icon" /><span><xsl:value-of select="//section[@code = 'HOME']/childs/section[@code = 'PICTURES']//name[@lang = $lang]" /></span></a></li>
          <!--li><img src="/img/video-icon.png" alt="video-icon" /><span>Vídeos</span></li-->
          <li><a href="javascript:showContact();"><img src="/img/contact-icon.png" alt="contact-icon" /><span><xsl:value-of select="//section[@code = 'HOME']/childs/section[@code = 'CONTACT']//name[@lang = $lang]" /></span></a></li>
        </ul>
      </div>
 
   </div>

    <div>
      <div id="hotel-sheet-left-column">

        <div id="hotel-sheet-contact-data" class="hidden">
          <span id="hotel-sheet-contact-data-name"><xsl:value-of select="$hotel/name" /></span>
          <span id="hotel-sheet-contact-data-address"><xsl:value-of select="$hotel/address/address" /></span>
          <span id="hotel-sheet-contact-data-address1"><xsl:value-of select="$hotel/address/postalCode" /> - <xsl:value-of select="$zone-name" /> - <xsl:value-of select="$destination-name" /></span>
          <span id="hotel-sheet-contact-data-phone">Tel: <xsl:value-of select="$hotel/contactInfo/phone" /></span>
          <span id="hotel-sheet-contact-data-fax">Fax: <xsl:value-of select="$hotel/contactInfo/fax" /></span>
          <span id="hotel-sheet-contact-data-email"><xsl:value-of select="$hotel/contactInfo/email" /></span>
          <img id="hotel-sheet-contact-photo" src="/files/{//web//section[@code = 'CONTACT']/multimediaContents/multimediaContent[@code = '280x230']/file}" alt="contact-photo" />
        </div>
        <ul id="hotel-sheet-photos" class="hidden">
          <xsl:for-each select="$hotel/multimediaContents/multimediaContent[@code = '800x600']">
            <li><span><xsl:value-of select="titles/title[@lang = $lang]" /></span><img src="/files/{file}" alt="hotel-sheet-image" /></li>
          </xsl:for-each>
        </ul>
<!--call template-->
          <xsl:choose>
            <xsl:when test="$section-code = 'ROOMS'">
              <xsl:call-template name="hotel-sheet-page_1"/>
            </xsl:when>
            <xsl:when test="$section-code = 'BOARDS'">
              <xsl:call-template name="hotel-sheet-page_2"/>
            </xsl:when>
            <xsl:when test="$section-code = 'SERVICES'">
              <xsl:call-template name="hotel-sheet-page_3"/>
            </xsl:when>
            <xsl:when test="$section-code = 'ANIMACION'">
              <xsl:call-template name="hotel-sheet-page_4"/>
            </xsl:when>
            <xsl:when test="$section-code = 'COMO'">
              <xsl:call-template name="hotel-sheet-page_5"/>
            </xsl:when>
            <xsl:when test="$section-code = 'BODA'">
              <xsl:call-template name="hotel-sheet-page_6"/>
            </xsl:when>
            <xsl:when test="$section-code = 'EVENT'">
              <xsl:call-template name="hotel-sheet-page_7"/>
            </xsl:when>
            <xsl:when test="$section-code = 'SPA_BIOMAR'">
              <xsl:call-template name="hotel-sheet-page_8"/>
            </xsl:when>
            <xsl:otherwise>
              <xsl:call-template name="hotel-sheet-page_0"/>
            </xsl:otherwise>
          </xsl:choose>
        
      </div>

    var address = $('#hotel-sheet-contact-data-address').text();
    $(span0).text(address);

    $(div3).append(document.createElement('br'));

    var span1 = document.createElement('span');
    $(div3).append(span1);
    var address1 = $('#hotel-sheet-contact-data-address1').text();
    $(span1).text(address1);

    var div4 = document.createElement('div');
    div4.id = 'hotel-sheet-contact-sheet-contact';
    $(div2).append(div4);

    var span2 = document.createElement('span');
    $(div4).append(span2);
    var phone = $('#hotel-sheet-contact-data-phone').text();
    $(span2).text(phone);

    $(div4).append(document.createElement('br'));

    var span3 = document.createElement('span');
    $(div4).append(span3);
    var fax = $('#hotel-sheet-contact-data-fax').text();
    $(span3).text(fax);

    $(div2).append(document.createElement('br'));

    var anchor = document.createElement('a');
    $(div2).append(anchor);
    var email = $('#hotel-sheet-contact-data-email').text();
    $(anchor).text(email);  
    anchor.href = 'mailto:' + email;

    win.show(function(){
    });  
  });

}*/