dojo.provide("ff0000.Flipper"); 
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit.form.Button");

/**
 * TODO : Factor common methods between this and Page Form into 
 *        super class called Conent From
 */

dojo.declare(
  "ff0000.Flipper", 
  [dijit._Widget, dijit._Templated], 
  {
    activeElement : null,
    widgetsInTemplate:true,
    name : '',
    format : '',
    list : [],
    list_index : 0,
    data_source : '',
    templatePath: "/javascripts/ff0000/templates/Flipper.html", 
    constructor : function() {},
    postMixInProperties: function() {},
    postCreate: function() {
      this.dialog = new dijit.Dialog({});
      this.dialog.startup();
      this.dialog.domNode.style.minHeight = "384px";
      
      this.highId = 0;
      dojo.connect(dojo.byId( this.name + '_flip_left'), 'click', this, 'shift_left');
      dojo.connect(dojo.byId( this.name + '_flip_right'), 'click', this, 'shift_right');
      this.list = []
      this.node = dojo.byId( this.name + '_flipper');
      this.thumbs =  dojo.byId( this.name + '_thumbs');
      this.get_data();
    },
    startup: function() {
        //this.hide();
    },
    get_data : function() {
        var ds = this.data_source;
        dojo.xhrGet ({
          url: ds,
          handleAs: "json",
          load: dojo.hitch( this,  function (data) {
            
            if (data.success) {
              tmp_list = data.objects;
              for (var i=0; i<tmp_list.length; i++) {
                
                li = document.createElement('li')
                dojo.addClass(li, 'thumb');
                li.style.display = 'none';
                
                if ( this.format == 'photos') {
                  this.list[i] = this.construct_image(tmp_list[i]);
                } else {
                  this.list[i] = this.construct_video(tmp_list[i],i+1);
                }
                li.innerHTML = this.list[i][0];
                dojo.connect( li, 'click', this, 'magnify');
                this.thumbs.appendChild( li );
                this.thumbs.childNodes[0].style.display = 'block'
                dojo.byId(this.name + '_count_current').innerHTML = 1;
                dojo.byId(this.name + '_count_total').innerHTML = this.thumbs.childNodes.length;
              }
              
              if ( tmp_list.length > 0) {
                dojo.byId(this.name + '_flipper').style.display = 'block';
                dojo.animateProperty({
                    node:  dojo.byId(this.name + '_flipper'),
                    duration: 1000,
                    properties: { 
                      opacity: 1,
                      height: 110
                    }
                }).play();
              }
            
            }
          }),
          error: function (data) {
            console.error('Error: ', data);
          }
        });
    },
    construct_image : function(img_obj) {
      img_array = []
      //preload images
      img = new Image();
      img.src = img_obj.display_url;
      img = new Image();
      img.src = img_obj.thumb_url;
      img_array[0] = '<img src="' + img_obj.thumb_url + '"  width="72" height="72" alt="image thumbnail"  />'
      img_array[1] = '<img src="' + img_obj.display_url + '"  width="' + img_obj.display_width + '" height="' + img_obj.display_height + '"  />'
      return img_array;
    },
    construct_video : function(vid_obj, i){
      vid_array = []
      vid_array[0] = '<div id="thumb_' + i + '" class="vid_thumb"></div>';
      vid_array[1] = vid_obj;
      
      return vid_array;
    },
    magnify : function() {
      if ( this.format == 'photos') {
        this.dialog.attr('content', this.list[this.list_index][1]) ;
      } else {
        this.dialog.attr('content', vid_node );
        var vid_params = { allowScriptAccess: "always" };
        var vid_atts = { id: "player" };
        swfobject.embedSWF("http://www.youtube.com/v/" + this.list[this.list_index][1] + "&enablejsapi=1", "vid_node", "425", "344", "8", null,null, vid_params, vid_atts);
      }
      this.dialog.show();
    },
    shift_left : function() {
      index = this.list_index;
      next = ( this.list_index == 0 ) ? this.thumbs.childNodes.length -1 : this.list_index - 1;
      this.thumbs.childNodes[index].style.display = 'none'
      this.thumbs.childNodes[next].style.display = 'block'
      this.list_index = next;
      dojo.byId(this.name + '_count_current').innerHTML = next +1;
    },
    shift_right : function() {
      index = this.list_index;
      next = ( this.list_index == this.thumbs.childNodes.length - 1 ) ? 0 : this.list_index + 1;
      this.thumbs.childNodes[index].style.display = 'none'
      this.thumbs.childNodes[next].style.display = 'block'
      this.list_index = next;
      dojo.byId(this.name + '_count_current').innerHTML = next +1;
    }
  }
);