function getHelp() {
  var help = document.getElementById('help');

  help.innerHTML = '&nbsp;&nbsp;<b>1.</b> Click on the particular frame in which you wish to upload a photo. Then select the photo file and press \'Upload\'. The loaded photo will then be shown in the frame.<br>&nbsp;&nbsp;<b>2.</b> Follow instruction 1 for the rest of your 5 photos (for an animation you need at least 2).<br>&nbsp;&nbsp;<b>3.</b> Give the title of the piece in the field \'Name\'.<br>&nbsp;&nbsp;<b>4.</b> Press the \'Collage\' key to make a photo collage or the \'Animation\' key for an animated GIF.<br>&nbsp;&nbsp;<a href="javascript://" onclick="closeHelp();">close</a>';
  help.style.padding = '5px 0 0 7px';
  help.style.borderTop = '1px solid #02d6fe';
  help.style.borderLeft = '1px solid #02d6fe';
}

function closeHelp() {
  var help = document.getElementById('help');

  help.innerHTML = '<a href="javascript://" onclick="getHelp();"><b>help+</b></a>';
  help.style.padding = '';
  help.style.border = '';
}

function emptyName() {
  document.getElementById('name').value = '';
}

function setTitle() {
  document.getElementById('title').innerHTML = '<b>'+document.getElementById('name').value+'</b>';
}

function getUploadForm(id) {
  var upload = document.getElementById('upload');
  switch(id) {
    case 1: var title = 'Surprise'; break;
    case 2: var title = 'Joy'; break;
    case 3: var title = 'Sad'; break;
    case 4: var title = 'Fear'; break;
    case 5: var title = 'Disgust'; break;
    case 6: var title = 'Anger'; break;
  }

  upload.innerHTML = '<table id="upload_form"><tr valign="top"><td><img src="img/corner_tl.gif"></td><td rowspan="2" class="body"><div class="title"><b>'+title+'</b></div><form action="" method="post" enctype="multipart/form-data" onsubmit="return false;"><input type="hidden" id="id" value="'+id+'"><b>Choose photo:</b>&nbsp;<input type="file" name="file"><div class="submit"><input type="submit" value="Upload!" onclick="uploadFile(this.form.file);"></div></form></td><td><img src="img/corner_tr.gif"></td></tr><tr valign="bottom"><td><img src="img/corner_bl.gif"></td><td><img src="img/corner_br.gif"></td></tr></table>';
  upload.style.display = 'block';

  var form = document.getElementById('upload_form');
  switch(id) {
    case 1: form.style.backgroundColor = '#f7941c'; break;
    case 2: form.style.backgroundColor = '#ec008c'; break;
    case 3: form.style.backgroundColor = '#0071bc'; break;
    case 4: form.style.backgroundColor = '#fff200'; break;
    case 5: form.style.backgroundColor = '#ed1b23'; break;
    case 6: form.style.backgroundColor = '#662c91'; break;
  }
}

function uploadFile(file,max) {
  var id = document.getElementById('id').value;

  JsHttpRequest.query(
    'include/upload.php',
    {
      'id': id,
      'file': file
    },
    function(result,errors) {
      if(result['img'] != 0) {
        if(result['img'] != 1) {
          switch(id) {
            case '1': var alt = 'Surprise'; break;
            case '2': var alt = 'Joy'; break;
            case '3': var alt = 'Sad'; break;
            case '4': var alt = 'Fear'; break;
            case '5': var alt = 'Disgust'; break;
            case '6': var alt = 'Anger'; break;
          }

          document.getElementById('section'+id).innerHTML = '<a href="javascript://" class="alt" onclick="getUploadForm('+id+');"><span><b>'+alt+'</b></span><img src="upload/'+result['img']+'" alt="'+alt+': click to upload photo"></a>';

          var upload = document.getElementById('upload');
          upload.innerHTML = '';
          upload.style.display = 'none';

          document.getElementById('error').style.display = 'none';
        } else alert('Bad file type! Your photo must be in one of the following formats: JPEG/JPG, GIF, BMP and PNG.');
      } else alert('Your file is too big! The maximum size is 5 Mb.');
    },
    true
  );
}

function submitForm(type) {
  var name = document.getElementById('name').value;
  var check = new RegExp("^[a-zA-Z0-9 ]{3,10}$");

  if(!name.match(check)) {
    alert('Incorrect input in \'Name\' field! It must contain only letters from the English alphabet (A-Z), numerals (0-9) and spacebars. The minimum length is 3 characters and the maximum is 10.');
    return false;
  } else {
    JsHttpRequest.query(
      'include/submit.php',
      {
        'type': type,
        'name': name
      },
      function(result,errors) {
        if(errors != '') {
          var error = document.getElementById('error');
          error.innerHTML = '<b>'+errors+'</b>';
          error.style.display = 'block';
        } else {
          if(result['res'] == 1) document.location = 'gallery.php?item='+result['id'];
        }
      },
      true
    );
  }
}

function sendLink() {
  var id = document.getElementById('id').value;
  var email = document.getElementById('email');
  var name = document.getElementById('name').value;
  var check = new RegExp('^[a-z0-9._-]+@[a-z0-9.-]+[.][a-z]{2,4}$','gi');

  if(!email.value.match(check)) {
    email.style.border = '1px solid #ff0000';
    return false;
  } else {
    email.style.border = '';

    JsHttpRequest.query(
      'include/send.php',
      {
        'id': id,
        'email': email.value,
        'name': name
      },
      function(result,errors) {
        if(result['res'] == 1) {
          var result = document.getElementById('result');
          result.innerHTML = '<b>The message was sent!</b>';
          result.style.display = 'block';
        }
      },
      true
    );
  }
}