var filtered_by = "*";
var filtered_obj = [];


function _activate_clients() {

  dojo.query('.dialog').addClass('hidedialog');

  var portfolio = dojo.query('#portfolio li');
  var dialogs = dojo.query('.dialog');
  var filterlist = filterList.initObj(portfolio, dialogs);

  // make a pointable area over the image as well
  dojo.query('#portfolio li a').closest('div').style('cursor', 'pointer');

  dojo.behavior.add({
    '#filter span a' : {
      onclick: function(e) {
        e.preventDefault();
        var data = filterlist.refilter(dojo.attr(dojo.query(this)[0],'data-filter'));
        show_new_order(data);
      }
    }
 }); // behaviour

  dojo.behavior.apply();

  // assign popup links
  fwdCreateDialog('#portfolio li');


  function show_new_order(filtered_data){
    var showOut = dojo.fadeOut({node: dojo.byId('portfolio'), duration:100}).play();

    dojo.connect(showOut, "onEnd", function() {
      var page = dojo.create("ul", {id: 'portfolio'}, "portfolio");
      dojo.place(page, 'portfolio', 'replace');

      dojo.forEach(filtered_data[0], function(item){
        dojo.place(item, 'portfolio', 'last');
      });

      var dlg = dojo.create("div", {id: 'popups'}, "popups");
      dojo.place(dlg, 'popups', 'replace');

      dojo.forEach(filtered_data[1], function(item){
        dojo.place(item, 'popups', 'last');
      });

      var showIn = dojo.fadeIn({node: dojo.byId('portfolio'), duration:100}).play();

      dojo.connect(showIn, "onEnd", function() {
        dojo.parser.parse(dojo.byId('portfolio'));
        dojo.parser.parse(dojo.byId('popups'));
        // need to reactivate dom events
        fwdCreateDialog('#portfolio li');

      });
    });

  }

} // clients


function _window_position() {
  return window.pageYOffset ? window.pageYOffset :
               (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}


/* *********************************************************** */
/* FILTER LIST                                                 */
/* *********************************************************** */


var filterList = { // both lists [ data, dialogs ]
    _orig_coords: [],
    _filtered_objs: [],
    _filtered_dialogs: [],
    _default_filter_type: "*",
    filter_type: "*",
    data_obj: {},
    dialog_obj: {},

  initObj : function(domNodeList, dialogList) {
    this.data_obj = domNodeList;
    this.dialog_obj = dialogList;
    var array = [];

    dojo.forEach(domNodeList, function(item, indx){
      array.push( dojo.query(item).coords() );
    });

    this._orig_coords = array;
    return this;
  },

  _filter_data : function() {
    var arr = '', filtered_dlg_id = [], filtered = [];
    var type = this.filter_type;
    var objs = this.data_obj;

    dojo.forEach(objs, function(item, indx){
      arr = dojo.attr(dojo.query(item)[0], 'data-category');
      if(arr.indexOf(type) != (-1)){
        filtered.push(item);
        filtered_dlg_id.push(indx);
      }
    });
    this._filtered_objs = filtered;

    filtered = [];
    var dlg_obj = this.dialog_obj;

    dojo.forEach(filtered_dlg_id, function(item_no, indx){
      dojo.attr(dlg_obj[item_no], 'data-attribute', 'filtered');
      // set correct dialog ids on data-attributes
      if(indx===0){
        dojo.attr(dlg_obj[item_no], 'data-prev', "#"+dlg_obj[filtered_dlg_id[filtered_dlg_id.length-1]].id);
        dojo.attr(dlg_obj[item_no], 'data-next', "#"+dlg_obj[filtered_dlg_id[indx+1]].id);
      } else if(filtered_dlg_id.length-1 == indx){
        dojo.attr(dlg_obj[item_no], 'data-prev', "#"+dlg_obj[filtered_dlg_id[indx-1]].id);
        dojo.attr(dlg_obj[item_no], 'data-next', "#"+dlg_obj[filtered_dlg_id[0]].id);
      } else {
        dojo.attr(dlg_obj[item_no], 'data-prev', "#"+dlg_obj[filtered_dlg_id[indx-1]].id);
        dojo.attr(dlg_obj[item_no], 'data-next', "#"+dlg_obj[filtered_dlg_id[indx+1]].id);
      }

      filtered.push(dlg_obj[item_no]);
    });

    this._filtered_dialogs = filtered;
  },

  refilter: function(type){
    if(type == this._default_filter_type) {
      return [this.data_obj, this.dialog_obj];
    } // view all

    this.filter_type = type;
    this._filter_data();

    var coords = this._orig_coords;
    // set new coords to filtered items
    dojo.forEach(this._filtered_objs, function(obj_node, indx){
      dojo.query(obj_node).coords().x = coords[indx].x;
      dojo.query(obj_node).coords().y = coords[indx].y;
    });

    return [this._filtered_objs, this._filtered_dialogs];
  }
};



/* *********************************************************** */
/* MODAL DIALOG POPUPS                                         */
/* *********************************************************** */


var fwdModalDialog;
var fwdModalDialogHandle;

fwdCreateDialog = function(linkSelector) {

  dojo.forEach(dojo.query(linkSelector), function(obj) {

    dojo.connect(obj, 'onclick', function(e) {
      e.preventDefault();

      var pops = dojo.query('.dialog'); //#popups
      var src, dlg;

      var is_filtered = dojo.attr(pops[0], 'data-attribute');
      if(is_filtered && dojo.hasClass(obj, 'internal-dialog-link')){

        var linkid = dojo.query(obj)[0].hash;

        linkid = parseInt(linkid.replace('#dialog', ''), 10);

        if(dojo.hasClass(obj.parentNode, 'left')){
          if(linkid >= pops[pops.length-1].id.replace('dialog','')) {
            src = pops[pops.length-1].id;
          } else {
            // if left, our id is src-1
            dojo.forEach(pops, function(item, indx){
              if(('dialog'+(linkid+1)) == item.id){
                if(pops[indx-1]){src = pops[indx-1].id;} else {src = pops[pops.length-1].id; }
              }
            });
          }
        }

        if(dojo.hasClass(obj.parentNode, 'right')){
         if(linkid == 1) {
            src = pops[0].id;
          } else {
            // if right, our id is src+1
            dojo.forEach(pops, function(item, indx){
              if(('dialog'+(linkid-1)) == item.id){
                if(pops[indx+1]){src = pops[indx+1].id;} else {src = pops[0].id; }
              }
            });
          }
        }

      } else {
        src = dojo.attr(obj, 'href');
        if(!src) {
          src = dojo.attr(dojo.query(this).query('a')[0], 'href');
        }
        if(src.indexOf('#')==(-1)) {
          return;
        }
        src = src.substr((src.lastIndexOf('#')+1));

        if(!dojo.byId(src)) {
          throw('Object ID \''+src+'\' not found');
          return;
        }
      }
      if(fwdModalDialog) {
        dojo.disconnect(fwdModalDialogHandle);
        fwdModalDialog.destroy();
      }

      fwdModalDialog = new dijit.Dialog({
        id: 'dialog_modal',
        style: "width: 800px; overflow:visible !important",
        region: 'center',
        content: dojo.byId(src).innerHTML
      });

      dojo.connect(fwdModalDialog, 'onShow', function() {
        dojo.query('.dijitDialogUnderlayWrapper').addClass('dialog_modal');
      });

      fwdModalDialog.show();

      dojo.query("a[rel*='external']").onclick(function(e) {
        this.target = "_blank";
      });

      // keep the underlay at top
      dojo.byId('dialog_modal_underlay').style.top = _window_position() +'px';

      dojo.disconnect(fwdModalDialog._modalconnects[0]);
      fwdModalDialogHandle = dojo.connect(window, 'onscroll', function() {
        dijit._underlay.layout();// -- this doesn't work, so using next line below for now!!!
        dojo.byId('dialog_modal_underlay').style.top = _window_position() +'px';
      });

      dojo.query('#dialog_modal .btn-close, #dialog_modal_underlay').onclick(function(e) {
        e.preventDefault();
        dojo.disconnect(fwdModalDialogHandle);
        setTimeout(dojo.hitch(fwdModalDialog, 'destroyRecursive'), dijit.defaultDuration);
      });

      fwdCreateDialog('#dialog_modal .internal-dialog-link');
    });
  });

};