var formUrl = 'form.php';

Pexeso = function(_sources,_src) {
  
  this.sources = _sources;
  this.src = _src;
  this.slides = new Array();
  this.turned = new Array();
  this.matched = new Array();
  
  this.init = function() {
    for (i=0;i<this.sources.length;i++) {
      p = new Slide(this.sources[i],this.src);
      this.slides[this.slides.length] = p;
      q = new Slide(this.sources[i],this.src);
      this.slides[this.slides.length] = q;
    }
    this.shuffle();
    for (i=0;i<this.slides.length;i++) {
      x = function(index,self) {
        self.slides[index].init();
        var that = self;
        self.slides[index].elm.bind("click",function() { that.turn(index); });
      }(i,this);
    }
  }
  
  this.turn = function(index) {
    if (this.slides[index].opened) {
      return false;
    }
    if (this.slides[index].opening) {
      return false;
    }

    if (this.turned.length>=2) {
      return false;
    }
    for (i=0;i<this.matched.length;i++) {
      if (this.matched[i] == index) {
        return false;
      }
    }
    for (i=0;i<this.turned.length;i++) {
      if (this.turned[i]==index) {
        return false;
      }
    }
    
    var callback = function(slide) {;}
    
    this.turned[this.turned.length] = index;
    if (this.turned.length == 2) {
      if (!this.isMatch()) {
        var that = this;
        window.setTimeout(function() { that.close(); }, 2000);
      } else {
        
        $('div.slogan[rel="'+this.slides[index].source+'"]').css('display','block');
        $('#slogans').append(
          $('div.slogan[rel="'+this.slides[index].source+'"]')
        );
        $('#bubble').html($('div.slogan[rel="'+this.slides[index].source+'"]').html());
        
        $('#bubblewrap').show(0).delay(5000).hide(0);
        
        
        for (i=0;i<this.turned.length;i++) {
          this.matched[this.matched.length] = this.turned[i];
        }
        this.turned = Array();
        if (this.matched.length == this.slides.length) {
          // all matched
          callback = function() {
            setTimeout(function() { 
             $('#window').jqm({ajax: formUrl,modal: true, target:'#win'});
             $('#window').jqmShow();
             },4000);
          }
        }
      }
    }
    
    this.slides[index].turn(callback);
  }
  
  this.isMatch = function() {
    if (this.turned.length != 2) {
      return false;
    }
    return this.slides[this.turned[0]].front.src == this.slides[this.turned[1]].front.src;
  }
  
  this.close = function() {
    for (i=0;i<this.turned.length;i++) {
      this.slides[this.turned[i]].turn();
    }
    this.turned = Array();
  }
    
  this.shuffle = function() {
    var i = this.slides.length;
    if ( i == 0 ) return false;
    while ( --i ) {
       var j = Math.floor( Math.random() * ( i + 1 ) );
       var tempi = this.slides[i];
       var tempj = this.slides[j];
       this.slides[i] = tempj;
       this.slides[j] = tempi;
     }
  }
  
}

var bg = new Image();
bg.src = 'img/backside.png';

Slide = function(_img, _src) {

  this.front = new Image();
  this.front.src = _img;
  
  this.source = _img;
  
  this.src = _src;
  
  this.opened = false;
  
  this.open = function() {
    this.elm.attr('src',this.front.src);
    this.opened = true;
  }
  
  this.close = function() {
    this.elm.attr('src',bg.src);
    this.opened = false;
  }
  
  this.turn = function(onfinish) {
    var that = this;
    this.elm.animate({width: '0'},500,function() {that.opened ? that.close() : that.open()}).animate({width: '100%'},500,onfinish);
  }
  
  this.init = function() {
    this.elm = jQuery('<img src="'+bg.src+'" alt="" />');
    $(this.src).append(this.elm);
    this.elm.wrap("<div></div>");
  }

}

var turn = function(e) {
  e.data.turn();
}