var curprocess = 0;
var currot = 0;
var curclient = 1;
var curphoto = 1;
var imgnavs, arr;

window.addEvent('domready', function() {
  $$('#content1, #content2, #content3, #content4').set('tween', {transition: Fx.Transitions.Back.easeOut});

  //-- MooTools/Raphael compatibility fix --
  var aboutdivs = $$('.a');
  var clientdivs = $$('.cd');
  var clientlis = $$('.clientli');
  imgnavs = $$('.imgnav');
  // ---------------------------------------

  $('logo').addEvent('click', function(e) { resettabs(); });
  $('about').addEvent('click', function(e) { resettabs(); $('content1').tween('margin-top', '-100px'); });
  $('services').addEvent('click', function(e) { resettabs(); $('content2').tween('margin-top', '-100px'); });
  $('work').addEvent('click', function(e) { resettabs(); $('content3').tween('margin-top', '-100px'); });
  $('contact').addEvent('click', function(e) { resettabs(); $('content4').tween('margin-top', '-100px'); });

  var arrsrc = $('arrow').src;
  $('arrowcontainer').empty();
  var Raph = Raphael("arrowcontainer", 240, 240);
  arr = Raph.image(arrsrc, 60, 30, 126, 194);
  setTimeout(function(){Raph.safari();});

  $('am-1').addEvent('click', function(e) { $('arrowcontainer').fade('in'); curprocess = 1; aboutdivs.fade('out'); $('a-'+curprocess).fade('in'); movearrow(0); });
  $('am-2').addEvent('click', function(e) { $('arrowcontainer').fade('in'); curprocess = 2; aboutdivs.fade('out'); $('a-'+curprocess).fade('in'); movearrow(72); });
  $('am-3').addEvent('click', function(e) { $('arrowcontainer').fade('in'); curprocess = 3; aboutdivs.fade('out'); $('a-'+curprocess).fade('in'); movearrow(144); });
  $('am-4').addEvent('click', function(e) { $('arrowcontainer').fade('in'); curprocess = 4; aboutdivs.fade('out'); $('a-'+curprocess).fade('in'); movearrow(216); });
  $('am-5').addEvent('click', function(e) { $('arrowcontainer').fade('in'); curprocess = 5; aboutdivs.fade('out'); $('a-'+curprocess).fade('in'); movearrow(288); });
  aboutdivs.fade('out'); $('a-0').fade('in'); $('arrowcontainer').fade('out');

  $('c-1').addEvent('click', function(e) { curclient = 1; curphoto = 1; clientlis.tween('text-decoration', "none"); $('c-'+curclient).tween('text-decoration', "underline"); clientdivs.fade('out'); $('cd-'+curclient).fade('in'); setWorkImg(); });
  $('c-2').addEvent('click', function(e) { curclient = 2; curphoto = 1; clientlis.tween('text-decoration', "none"); $('c-'+curclient).tween('text-decoration', "underline"); clientdivs.fade('out'); $('cd-'+curclient).fade('in'); setWorkImg(); });
  $('c-3').addEvent('click', function(e) { curclient = 3; curphoto = 1; clientlis.tween('text-decoration', "none"); $('c-'+curclient).tween('text-decoration', "underline"); clientdivs.fade('out'); $('cd-'+curclient).fade('in'); setWorkImg(); });
  $('c-4').addEvent('click', function(e) { curclient = 4; curphoto = 1; clientlis.tween('text-decoration', "none"); $('c-'+curclient).tween('text-decoration', "underline"); clientdivs.fade('out'); $('cd-'+curclient).fade('in'); setWorkImg(); });
  $('c-5').addEvent('click', function(e) { curclient = 5; curphoto = 1; clientlis.tween('text-decoration', "none"); $('c-'+curclient).tween('text-decoration', "underline"); clientdivs.fade('out'); $('cd-'+curclient).fade('in'); setWorkImg(); });
  $('c-6').addEvent('click', function(e) { curclient = 6; curphoto = 1; clientlis.tween('text-decoration', "none"); $('c-'+curclient).tween('text-decoration', "underline"); clientdivs.fade('out'); $('cd-'+curclient).fade('in'); setWorkImg(); });
  $('c-1').tween('text-decoration', "underline"); clientdivs.fade('out'); $('cd-1').fade('in');

  $('w-p').addEvent('click', function(e) { curphoto--; if(curphoto < 1){ curphoto = 5; } setWorkImg(); });
  $('w-n').addEvent('click', function(e) { curphoto++; if(curphoto > 5){ curphoto = 1; } setWorkImg(); });
  $('w-1').addEvent('click', function(e) { curphoto = 1; setWorkImg(); });
  $('w-2').addEvent('click', function(e) { curphoto = 2; setWorkImg(); });
  $('w-3').addEvent('click', function(e) { curphoto = 3; setWorkImg(); });
  $('w-4').addEvent('click', function(e) { curphoto = 4; setWorkImg(); });
  $('w-5').addEvent('click', function(e) { curphoto = 5; setWorkImg(); });

  $('contactform').addEvent('submit', function(e){
    e.stop();
    this.set('send', {
      onComplete: function(response) {
        if(response == 0){
          $('contactres').set('html', 'You must prove you are not a robot!');
        }else{
          $('contactcontainer').set('html', response);
        }
      }});
    this.send();
  });

  preloader();
});

function resettabs(){
  $$('#content1, #content2, #content3, #content4').tween('margin-top', '-700px');
}
function movearrow(newpos){
  var curpos = currot % 360;
  var A = curpos - newpos;
  var B = newpos - curpos;
  if(A < 0){ A += 360; }
  if(B < 0){ B += 360; }
  if(A < B) //counter-clockwise
    currot -= A;
  else                                                      //clockwise
    currot += B;
  arr.animate({rotation: currot}, 1500, "bounce");
}
function setWorkImg(){
  $('workimg').src = "images/work/"+curclient+"-"+curphoto+".png";
  imgnavs.set('src', "images/selector0.png");
  $('w-'+curphoto).src = "images/selector1.png";
}
function preloader(){
  var img = new Image();
  var imgs = new Array();
  imgs[0]="images/work/1-1.png";
  imgs[1]="images/work/1-2.png";
  imgs[2]="images/work/1-3.png";
  imgs[3]="images/work/1-4.png";
  imgs[4]="images/work/1-5.png";
  imgs[5]="images/work/2-1.png";
  imgs[6]="images/work/2-2.png";
  imgs[7]="images/work/2-3.png";
  imgs[8]="images/work/2-4.png";
  imgs[9]="images/work/2-5.png";
  imgs[10]="images/work/3-1.png";
  imgs[11]="images/work/3-2.png";
  imgs[12]="images/work/3-3.png";
  imgs[13]="images/work/3-4.png";
  imgs[14]="images/work/3-5.png";
  imgs[15]="images/work/4-1.png";
  imgs[16]="images/work/4-2.png";
  imgs[17]="images/work/4-3.png";
  imgs[18]="images/work/4-4.png";
  imgs[19]="images/work/4-5.png";
  imgs[20]="images/work/5-1.png";
  imgs[21]="images/work/5-2.png";
  imgs[22]="images/work/5-3.png";
  imgs[23]="images/work/5-4.png";
  imgs[24]="images/work/5-5.png";
  imgs[25]="images/work/6-1.png";
  imgs[26]="images/work/6-2.png";
  imgs[27]="images/work/6-3.png";
  imgs[28]="images/work/6-4.png";
  imgs[29]="images/work/6-5.png";
  for(var i=1; i<=29; i++){
    img.src=imgs[i];
  }
}