// create app namespace
WZ = SC.Application.create();

/* model */
WZ.PanelModel = SC.Object.extend({
  guid: null,
  title: null,
  teaser: null,
  gallery: null,
  img: null,
  listLeft: null,
  txt: null,
  action: null,
  footer: null,
  
  index: function() {
    return this.get('guid') + 1;
  }.property('guid'),
  
  text: function() {
    return '<div class="txt">'+this.get('txt')+'</div>';
  }.property('txt')
});

WZ.GalleryModel = SC.Object.extend({
  id: null,
  panels: null
});


/* controllers */
WZ.PanelsController = SC.ArrayProxy.create({
  currentPosition: 0,
  slideWidth: 768,
  slideHeight: 1014,
  isSlidingTo: NO,
  content: [
    // splasher
    WZ.PanelModel.create({
      guid: 0,
      img: {url: 'assets/img/splasher.png', pos: 'center top'},
      txt: 'coming soon'
    })
  ],
  
  maxPosition: function() {
    return this.get('length');
  }.property('@each')
});

/* views */
WZ.PanelsView = SC.CollectionView.extend({
  contentBinding: "WZ.PanelsController",
  currentPositionBinding: "WZ.PanelsController.currentPosition",
  maxPositionBinding: "WZ.PanelsController.maxPosition",
  isSlidingToBinding: "WZ.PanelsController.isSlidingTo",
  slideWidthBinding: "WZ.PanelsController.slideWidth",
  slideHeightBinding: "WZ.PanelsController.slideHeight",
  
  sliding: function() {
    var sTo = this.get('isSlidingTo');
    var that = this;
    if(sTo == 'up' || sTo == 'down') { 
      mTop = ((sTo == 'up') ? '+=' : '-=') + this.get('slideHeight');        
      this.$().animate({'margin-top':  mTop}, 1000, function() {
        that.set('isSlidingTo', NO);
      });
    } 
  }.observes('isSlidingTo'),
  
  didInsertElement: function() {
    that = this;
    // navigation points on splasher pane
    $('#w4u, #w4e, #w4m').click(function() {
      var id = this.id;
      max = WZ.PanelsController.get('length');
      if(max > 1) WZ.PanelsController.removeAt(1, max-1);
      WZ.PanelsController.pushObjects(eval(id));
      that.set('isSlidingTo', 'down');
      that.set('currentPosition', 1);
    });
  }
});

WZ.PanelView = SC.View.extend({
  classNames: ['slide'],
  titleBinding: 'parentView.content.title',
  teaserBinding: 'parentView.content.teaser',
  txtBinding: 'parentView.content.txt',
  textBinding: 'parentView.content.text',
  actionBinding: 'parentView.content.action',
  imgBinding: 'parentView.content.img',
  galleryBinding: 'parentView.content.gallery',
  listLeftBinding: 'parentView.content.listLeft',
  footerBinding: 'parentView.content.footer',
  
  listLeftHtml: function() {
    var out = "<ul>";
    this.get('listLeft').forEach(function(item) {
      out = out + "<li>" + item + "</li>";
    });
    return out + "</ul>";
  }.property('listLeft'),
  
  image: function() {
    var out = '<div class="main-img '+ this.get('img').pos +'">'
    out += '<img src="' +this.get('img').url +'" />';
    return out + '</div>';
  }.property('img'),
  
  actionHtml: function() {
    var act = this.get('action');
    var ret = '<div class="action-arrow-1" id="action-'+act.id+'-arrow-1">&nbsp;</div>';
    ret += '<div class="action-arrow-2" id="action-'+act.id+'-arrow-2">&nbsp;</div>';
    ret += '<div class="action-img" id="action-'+act.id+'-img"><img src="'+act.loupe+'" /></div>';
    ret += '<div class="action-btn"><a href="#" class="action-link" id="action-'+act.id+'">'+act.buttonLabel+'</a></div>';
    if(act.overlay) ret += '<div class="action-overlay-img" id="action-'+act.id+'-overlay-img"><img src="'+act.overlay+'" /></div>';
    return ret;
  }.property('action'),
  
  galleryHtml: function() {
    var gal = this.get('gallery');
    var width = gal.panels.length * 768;
    var ret = '<div class="gallery" id="gal-'+gal.id+'" style="width: '+width+'px;">';
    
    
    gal.panels.forEach(function(item, index) {
      ret += '<div id="tab-'+gal.id+'-'+index+'" class="tab">';
      // render pics right
      ret += '<div class="main-img right"><img src="'+ item.url +'" /></div>';
      // render text left
      ret += '<div class="list-left"><ul>';
      item.listLeft.forEach(function(item, index) {
        if(item.green) {
          ret += '<li class="green">' + item.txt + '</li>';
        } else {
          ret += "<li>" + item.txt + "</li>";
        }
      });
      ret += "</ul></div>";
      // render footer
      ret += '<div class="footer">'+item.footer+'</div>';
      ret += '</div>';
    });

    // render controls
    var ctrl = '<ul class="controls" id="controls-gal-'+gal.id+'">';
    gal.panels.forEach(function(item, index) {
      if (index == 0) {
        ctrl += '<li><a href="#" id="tab-'+gal.id+'-'+index+'" class="tab-link active">&nbsp;</a></li>'; 
      } else {
        ctrl += '<li><a href="#" id="tab-'+gal.id+'-'+index+'" class="tab-link">&nbsp;</a></li>'; 
      }
    });
    ctrl += '</ul>';
    
    return ctrl + ret;
  }.property('gallery'),
  
  didInsertElement: function() {
    var gal = this.get('gallery');
    if(gal) {      
      $('.tab-link').click(function() {
        var id = this.id;
        var galId = $(this).parent().parent().attr('id').substr(9);
        $('#controls-'+galId).find('a').removeClass('active');
        $(this).addClass('active');
        var marginLeft = id.substr(-1) * -768;  
        $('#'+galId).animate({'margin-left': +marginLeft}, 1000);
        return false;
      });
    }
    
    if(this.get('action')) {
      $('.action-link').click(function() {
        // animation chain
        var id = this.id;
        $('#'+id+'-arrow-1').fadeIn("slow", function() {
          $('#'+id+'-img').delay(0).fadeIn(1000, function() {
            $('#'+id+'-arrow-2').delay(3000).fadeIn("slow", function() {
              $('#'+id+'-overlay-img').delay(0).fadeIn(1000);
            });
          });
        });
      });
    }
  }
});

WZ.NavButtonView = SC.Button.extend({
  isDown: null,
  isVisible: YES,
  currentPositionBinding: "WZ.PanelsController.currentPosition",
  maxPositionBinding: "WZ.PanelsController.maxPosition",

  showArrows: function() {
    var pos = this.get('currentPosition');
    var max = this.get('maxPosition') - 1;
    
    if (pos == 0) {
      this.set('isVisible', NO);
    } else if (pos == max) {
      (this.isDown) ? this.set('isVisible', NO) : this.set('isVisible', YES);
    } else {
      this.set('isVisible', YES);
    }
  }.observes('currentPosition', 'maxPosition'),

  mouseDown: function(evt) {
    this._super(evt);
    var cp = WZ.PanelsController.get('currentPosition');
    if(this.get('isDown')) {
      WZ.PanelsController.set('currentPosition', ++cp);
      WZ.PanelsController.set('isSlidingTo', 'down');
    } else {
      WZ.PanelsController.set('currentPosition', --cp);
      WZ.PanelsController.set('isSlidingTo', 'up'); 
    }
    //console.log('cp: '+cp);
  },
  
  // remove touch events
  touchStart: function(touch) {},
  touchEnd: function(touch) {}
});


WZ.BackgroundView = SC.View.extend({
  classNames: ['background-view'],
  currentPositionBinding: "WZ.PanelsController.currentPosition",
  width: 1500,
  height: 1071,
  srcs: {
    tile: "assets/img/bg_tile.jpg",
    radial: "assets/img/bg_radial.png"
  },
  
  willInsertElement: function() {
    marginLeft = Math.round(this.width / -2) + "px";
    marginTop = Math.round(this.height / -2) + "px";
    this.$().css({
      'position': 'absolute',
      'top': '50%',
      'left': '50%',
      'marginLeft': marginLeft,
      'marginTop': marginTop,
      'width': this.width,
      'height': this.height,
      'background': 'url('+ this.srcs.tile +') top left repeat'
    });
    this.$().append('<img src="'+ this.srcs.radial +'" style="position:absolute; z-index:10; left:0; top: 0; width:'+ this.width +'px; height:'+ this.height +'px; opacity:0.9;" />');
  },
  
  <!--changeBg: function() {
    <!--var pos = this.get('currentPosition');
    <!--if(pos === 0) {
     <!-- $('body').addClass('black-bg');
     <!-- this.set('isVisible', NO);
    <!--} else if(pos == 1 && (WZ.PanelsController.get('isSlidingTo'))) {

    <!--} else {
     <!-- $('body').removeClass('black-bg');
     <!-- this.set('isVisible', YES);
    <!--}
  <!--}.observes('currentPosition','WZ.PanelsController.isSlidingTo')
});