$(function () {
  $('#demo-video').dialog({
    autoOpen: false,
    draggable: false,
    modal: true,
    resizable: false,
    title: 'Demo Video',
    width: 540,
    position: ['center', 50],
    close: function () {
      //-- stop video --//
      try {
        if (videoFileUrl.length != 0)
          document.getElementById('demo-video-player').sendEvent('STOP');
      }
      catch (err) { }
    }
  });
  $('#screenshot-zoom').dialog({
    autoOpen: false,
    draggable: false,
    modal: true,
    resizable: false,
    dialogClass: 'zoom-modal',
    title: $('#appname').html(),
    width: 640,
    position: ['center', 50],
    open: function () {
      $('#screenshot-zoom').prev().append('<div class="clear"></div>');
    }
  });
  $('div.ui-widget-overlay').live('click', function () {
    $('#demo-video').dialog('close');
    $('#screenshot-zoom').dialog('close');
  });

  setTimeout(function () { init() }, 1);

  $('#embed-video').keypress(function (e) {
    if (e.which != 3)
      return false;
  }).bind('mousedown', function () {
    var obj = this;
    setTimeout(function () { checkEmbedSelection(obj) }, 1);
    return false;
  });

  function checkEmbedSelection(obj) {
    if ($(obj).is(':not(:selected)')) {
      obj.select();
    }
  }

  //-- screenshots --//
  $('#screenshot-left').click(scrollButtonClick);
  $('#screenshot-right').click(scrollButtonClick);
  $('#screenshot-control a').click(function (e) {
    var li = $('#screenshot-' + $(this).attr('rel'));
    var index = $('#screenshots li').index(li);

    scrollScreens(index);

    e.preventDefault();
    return false;
  });

  //-- screenshot zoom --//
  $('#screenshot-zoom-left').click(scrollEnlargedButtonClicked);
  $('#screenshot-zoom-right').click(scrollEnlargedButtonClicked);
  $('#screenshots img').click(function () {
    //    var id = $(this).parent().attr('id').substr($(this).parent().attr('id').indexOf('-') + 1);
    //    var url = $(this).attr('enlarged');
    var index = $('#screenshots img').index(this);

    //-- open modal --//
    $('#screenshot-zoom').dialog('open');

    //-- move to image index --//
    scrollEnlargedScreens(index);
  });

  //-- watch video button --//
  $('#watch-video').click(function (e) {
    launchVideo();
    e.preventDefault();
    window.location.hash = '';
    return false;
  });

  //-- read more details button --//
  $('#details-read-more').live('click', function () {
    if ($('#app-details-remainder').is(':visible')) {
      $('#app-details-remainder').slideUp();
      $(this).html('Show More &gt;');
    } else {
      $('#app-details-remainder').slideDown();
      $(this).html('Show Less &gt;');
    }
  });

  //-- related apps --//
  $('a.related-scroll-left').click(function () {
    if ($('#related-apps:not(:animated)').length == 1) {
      scrollRelatedApps(-1);
    }
  });
  $('a.related-scroll-right').click(function () {
    if ($('#related-apps:not(:animated)').length == 1) {
      scrollRelatedApps(1);
    }
  });

  //-- init --//
  function init() {
    var hash;
    try { hash = window.location.hash.substr(1); } catch (err) { }

    if ($('#app-details-remainder').length == 1)
      $('#app-details').append('<a id="details-read-more">Read More &gt;</a>');

    if (hash != null) {
      if (hash == "video") {
        launchVideo();
      }
      else if ($('#screenshot-' + hash).length == 1) {
        var index = $('#screenshots li').index($('#screenshot-' + hash));
        scrollScreens(index);
      }
    }
  }

  //-- scroll screenshots --//
  function scrollButtonClick(dir) {
    var dir = $(this).is('#screenshot-left') ? -1 : 1;

    if ($('#screenshots:not(:animated)').length == 1) {
      var width = $('#screenshots li:first').width();
      var ml = parseInt($('#screenshots').css('margin-left'), 10);
      var curindex = ml != 0 ? Math.abs(ml) / width : 0;
      scrollScreens(curindex + dir);
    }
  }

  function scrollScreens(index) {
    var width = $('#screenshots li:first').width();
    var ml = $('#screenshots').css('margin-left');
    var lis = $('#screenshots li').length;
    var sindex = index;

    if (index < 0)
      sindex = lis - 1;
    else if (index >= lis)
      sindex = 0;

    $('#screenshots').stop(false, false).animate({
      marginLeft: width * sindex * -1
    }, 500);

    $('#screenshot-control a').removeClass('on');
    $('#screenshot-control a:eq(' + sindex + ')').addClass('on');
  }

  //-- scroll enlarged screenshots --//
  function scrollEnlargedButtonClicked() {
    var dir = $(this).is('#screenshot-zoom-left') ? -1 : 1;

    if ($('#screenshot-zoom:not(:animated)').length == 1) {
      var curindex = $('#screenshot-zoom li.cur').index();

      scrollEnlargedScreens(curindex + dir);
      scrollScreens(curindex + dir);
    }
  }

  function scrollEnlargedScreens(index) {
    //-- remove current index --//
    $('#screenshot-zoom li.cur').removeClass('cur');

    var sindex = index;

    var lis = $('#screenshot-zoom li').length;

    if (index < 0)
      sindex = lis - 1;
    else if (index >= lis)
      sindex = 0;

    //-- set new index --//
    var sli = $('#screenshot-zoom li:eq(' + sindex + ')');
    sli.addClass('cur');

    //-- get id of new index --//
    var id = $('#screenshots li:eq(' + sindex + ')').attr('id').substr($('#screenshots li:eq(' + sindex + ')').attr('id').indexOf('-') + 1);

    //-- load image --//
    if ($('#enlarge-' + id + ' img').length == 0) {
      createEnlargedScreenshot(id);
    } else {
      resizeEnlargedContainer();
    }

    //-- calculate left margin --//
    var mleft = 0;

    for (var i = 0; i < sindex; i++) {
      var li = $('#screenshot-zoom li:eq(' + i + ')');
      var liw = parseInt(li.css('width'), 10) + parseInt(li.css('padding-left'), 10) + parseInt(li.css('padding-right'), 10);
      mleft += liw;
    }

    $('#screenshot-zoom-container ul').stop(false, false).animate({
      marginLeft: mleft * -1
    }, 0);
  }

  function createEnlargedScreenshot(id) {
    var url = $('#screenshot-' + id + ' img').attr('enlarged');

    var img = new Image();
    $(img).load(function () {
      $('#enlarge-' + id).width(this.width).height(this.height);
      $('#enlarge-' + id).append(this);

      resizeEnlargedContainer();
    }).attr('src', url);
  }

  function resizeEnlargedContainer() {
    var sli = $('#screenshot-zoom li.cur');

    //alert(sli.length);

    var width = parseInt(sli.css('width'), 10) + parseInt(sli.css('padding-left'), 10) + parseInt(sli.css('padding-right'), 10);
    var height = parseInt(sli.css('height'), 10) + parseInt(sli.css('padding-top'), 10) + parseInt(sli.css('padding-bottom'), 10);

    $('#screenshot-zoom-container').stop(false, false).animate({
      width: width,
      height: height
    }, 0);

    $('#screenshot-zoom').dialog({
      width: width + 100,
      height: height + 80
    });

    var mleft = 0;
    var sindex = $('#screenshot-zoom li.cur').index();

    for (var i = 0; i < sindex; i++) {
      var li = $('#screenshot-zoom li:eq(' + i + ')');
      var liw = parseInt(li.css('width'), 10) + parseInt(li.css('padding-left'), 10) + parseInt(li.css('padding-right'), 10);
      mleft += liw;
    }

    $('#screenshot-zoom-container ul').stop(false, false).animate({
      marginLeft: mleft * -1
    }, 0);

    //alert('width: ' + width + '\nheight: ' + height);
    //alert('modal width: ' + $('#screenshot-zoom').dialog('option', 'width') + '\nmodal height: ' + $('#screenshot-zoom').dialog('option', 'height'));

    $('#screenshot-zoom').dialog('option', 'position', 'center');
  }

  //-- scroll related apps --//
  function scrollRelatedApps(dir) {
    var width = parseInt($('#related-apps li:first').width(), 10) + parseInt($('#related-apps li:first').css('padding-right'), 10);
    var ml = parseInt($('#related-apps').css('margin-left'), 10);
    var lis = $('#related-apps li').length;
    var curindex = ml != 0 ? Math.abs(ml) / width : 0;
    var atatime = 6;
    var sindex = curindex + (dir * atatime);

    if (sindex < 0 || lis < atatime)
      sindex = 0;
    else if (sindex > lis - atatime)
      sindex = lis - atatime;

    $('#related-apps').stop(false, false).animate({
      marginLeft: width * sindex * -1
    }, 500);
  }

  //-- launch demo video --//
  function launchVideo() {
    if (videoFileUrl.length != 0) {
      var so = new SWFObject(modalityObjects.rootpath + 'videos/player.swf', 'demo-video-player', '500', '350', '9', '#ffffff');
      so.addParam('allowfullscreen', 'true');
      so.addParam('allowscriptaccess', 'always');
      so.addParam('wmode', 'opaque');
      so.addVariable('file', videoFileUrl);
      so.addVariable('autostart', 'true');
      so.write('video-replace');
    }

    $('#demo-video').dialog('open');
  }
});