var article_id = null;
var selected_photo_type = null;
var photo_note_container = null;
var active_photo_note_element = null;
var active_photo_note = null;
var photo_note_form = null;
var tooltip_handler = null;

function open_popup(div, url, width, height, title) {
  $('#'+div).dialog({ width:width, height:height, resizable:false, zIndex:3000, modal:true, title:title, show:'blind', hide:'blind', buttons: {} });
  $('#'+div).dialog();
  $('#'+div).load(url, { query: 'test' }, function() { });
}

function close_popup(div) {
  $('#'+div).dialog('close');
}

function open_preview_popup(div, url, width, height, popup_title, file_name, title, body, tags, copyright) {
	
  $('#'+div).dialog({ width:width, height:height, resizable:true, zIndex:3100, modal:true, title:popup_title, show:'blind', hide:'blind'  });
  $('#'+div).dialog();
  $('#'+div).load(url, { filename: file_name, selected_photo_type: selected_photo_type, title: title, body: body, tags: tags, copyright: copyright }, function() { });
}

function select_photo_type(url, title, error, server_date, message) {
  var photo_portrait = document.getElementById('photo_portrait');
  var photo_landscape = document.getElementById('photo_landscape');
  var popup_header = "<div class='date_time'><div class='date_time_content'><span class='time'>"+server_date+"</span></div></div><img src='/images/add_your_fashion.png' alt='Add Your Fashion' class='popup_header_image' />"; 
  popup_header += message;
  if(photo_portrait.checked || photo_landscape.checked){
	if(photo_portrait.checked){
	  selected_photo_type = photo_portrait.value;
	}else{
	  selected_photo_type = photo_landscape.value;
	}
    close_popup("popup_photo_select");
    open_popup("popup_add_article", url, 721, 660, popup_header);
  }else{
	show_form_error(title, '<div class="error_content"><p><span>'+error+'</span></p></div>');
  }
}

function add_photo_note(url, title) {
  close_popup("popup_add_comment");
  if($('#popup_add_photo_note_notice')){
    $('#popup_add_photo_note_notice').dialog( "destroy" );
  }
  active_photo_note_element = $('#active_photo_note');
  $('#popup_add_photo_note').dialog({ dialogClass: 'photo_note_popup', width:395, height:820, resizable:false, zIndex:3000, modal:false, title:title, show:'blind', hide:'blind', close: function(event, ui) { document.getElementById('active_photo_note').style.display = 'none'; }});
  $('#popup_add_photo_note').dialog();
  $('#popup_add_photo_note').load(url, { query: 'test' }, function() { });
  
  photo_note_container = document.getElementById('photo_annotations');
  
  var apn = active_photo_note_element;
  var apn_wh = {'w':65,'h':75};
  
  var apn_parent = apn.parent().parent();
  var apn_parent_xy = apn_parent.offset();
  var apn_parent_wh = {'w':apn_parent.width(),'h':apn_parent.height()};
  
  var containment = [apn_parent_xy.left,
                     apn_parent_xy.top,
                     apn_parent_xy.left + (apn_parent_wh.w - apn_wh.w),
                     apn_parent_xy.top + (apn_parent_wh.h - apn_wh.h)];
  
  active_photo_note = apn.draggable({'containment':containment, stop: function(event, ui) { move_photo_note(); }});
  active_photo_note_element.css({'display':'block',
								 'left': Math.round((apn_parent_wh.w/2)-(apn_wh.w/2))+'px',
								 'top': Math.round((apn_parent_wh.h/2)-(apn_wh.h/2))+'px'});
  setTimeout(move_photo_note,1000);
}
function move_photo_note() {
  var position = active_photo_note.position();
  var offset = active_photo_note.offset();
	
  photo_note_form.elements[3].value = parseInt(position.left);
  photo_note_form.elements[4].value = parseInt(position.top);

  var popup_xy = [offset.left + 65, offset.top - 110 - $(window).scrollTop()];
  $('#popup_add_photo_note').dialog('option','position',popup_xy);
}

function show_form_error(title, error) {
  document.getElementById('popup_form_error').innerHTML = error;
  $('#popup_form_error').dialog({ width:200, height:'auto', resizable:false, zIndex:3010, modal:true, title:title, show:'blind', hide:'blind'  });
  $('#popup_form_error').dialog();
  
}

function show_info(info) {
  document.getElementById('popup_info').innerHTML = info;
  $('#popup_info').dialog({ width:200, height:200, resizable:false, zIndex:3010, modal:true, title:'info', show:'blind', hide:'blind'  });
  $('#popup_info').dialog();  
}

function change_value_article_id(new_value)
{
  article_id = new_value;
}

function highlight_photonote(photonote_id){
  var note = document.getElementById('photonote_item_'+photonote_id);
  note.firstChild.style.backgroundImage = 'url(/../images/plus_icon_hover.png)';
  
  var marker = document.getElementById('photonote_marker_'+photonote_id);
  marker.style.backgroundImage = 'url(/../images/popup_reaction_plus_icon.png)';
  
  tooltip_open(photonote_id);
}

function dim_photonote(photonote_id){
  var note = document.getElementById('photonote_item_'+photonote_id);
  note.firstChild.style.backgroundImage = 'url(/../images/plus_icon.png)';
  
  var marker = document.getElementById('photonote_marker_'+photonote_id);
  marker.style.backgroundImage = 'url(/../images/annotation_icon.png)';

  tooltip_close();
}

function highlight_marker(photonote_id){
  var note = document.getElementById('photonote_marker_'+photonote_id);
  note.style.backgroundImage = 'url(/../images/popup_reaction_plus_icon.png)';
  
  tooltip_open(photonote_id);
}

function dim_marker(photonote_id){
  var note = document.getElementById('photonote_marker_'+photonote_id);
  note.style.backgroundImage = 'url(/../images/annotation_icon.png)';
  
  tooltip_close();
}

function tooltip_open(photonote_id){
  var marker = $('#photonote_marker_'+photonote_id).position();
  var parent = $('#photo_annotations').parent();
  
  var tooltip = $('<div>').addClass('tool_tip');
  var tooltip_w = 209;
  var is_left = is_top = false;
  if(tooltip_w < (parent.width()-(marker.left - 15)))
    is_left = true;
  if(marker.top < Math.ceil(parent.height() / 2))
    is_top = true;

  if(is_left && is_top){
    tooltip.addClass('q1');
    tooltip.css({'top':(marker.top + 55) + 'px','left':(marker.left + 5) + 'px'});
  }
  else if(!is_left && is_top){
    tooltip.addClass('q2');
    var left = (marker.left - 139);
        left = left<=0?5:left;
    tooltip.css({'top':(marker.top + 55) + 'px','left':left + 'px'});
  }
  else if(is_left && !is_top){
    tooltip.addClass('q3');
    var bottom = parent.height() - marker.top - 20;
    var left = marker.left;
        left = left<=0?5:left;
    tooltip.css({'bottom':bottom + 'px','left':left + 'px'});
  }
  else if(!is_left && !is_top){
    tooltip.addClass('q4');
    var bottom = parent.height() - marker.top - 20;
    var left = (marker.left - 139);
        left = left<=0?5:left;
    tooltip.css({'bottom':bottom + 'px','left':left + 'px'});
  }
  
  tooltip.append($('<div>').html('<p><img src="/images/ajax-loader-tooltip.gif" style="margin:0px 87px; width:auto; height:auto;" /></p>'));
  
  parent.prepend(tooltip);
  
  parent
  .find('> .tool_tip > div > p')
  .load('/comment/photonotetooltip/'+photonote_id,
        {},
        function(data){
          var p = $(this).find('.reactions_content .reaction_content > p');
          var text = p.html();
          if(text.length > 100){
            text = text.substr(0,97);
            while(/[a-z]/.test(text.substr(text.length-1,1))){
              text = text.substr(0,text.length-2);
            }
            p.html($.trim(text) + '&hellip;');
          }
        });
 
}

function tooltip_close(){
  $('#photo_annotations').parent().find('.tool_tip').remove();
}

function doConfirm(url,txt)
{
  doCheck = confirm(txt);
  if (doCheck == true)
    location.href = url;
}