/*
  Cosmobile (http://www.cosmobile.net), IPROV (http://www.iprov.com), NETCOMM (http://www.netcomm.it)
 * and Nunzio Fiore (http://www.moonkiki.com) are the creator of iMoogle.
 * 
 * Script: iMoogle.js
 * inspirate by iGoogle structure MooTools based
 * License:
 *    MIT-style license.
 * Copyright:
 * Copyright  2009-2010 [Nunzio Fiore](http://www.moonkiki.com).
 * Code & Documentation:
 *  (http://www.moonkiki.com/iMoogle).
 *  
 *  the code read a json on startup formed like this:
 * 
 *  
 *  
{
"cols":n,//where n is the numbers of cols the user asked for the home page
"portlets":[// an id for a list of portlet 
            //(we have two kind of portlet: graphic portlet and list portlet)


    {
        "id":n// an id useful to retrieve the portlet
        ,"col":"n"// the columns [from  1 to n ] where user wants to put the portlet
        ,"title":"A TITLE"//the title of the portlet
        ,"body": "<div>...</div>"//a graphic content for the portlet
    },
    {
        "id":n// an id useful to retrieve the portlet
        ,"col":"n"// the columns [from  1 to n ] where user wants to put the portlet
        ,"title":"A TITLE"//the title of the portlet
        ,"list":{//a list portlet is identified by the attribute list and NOT body
            "baseUrl":"scripts/index.html"//the base url where we wants the portlet go (with the complete list)
            "limit":m,//a number limit for the little portlet display (when maximiezed, list are complete)
            "els":[//the elements of the list
                {
                 "id":n,//an id for the list's element
                 "title":"Calendar",    //the title for the list's element, COMPULSORY: if omitted it won't be the possibility to expand and collapse the row
                 "text":"a script for calendar",    //the text for the list's element
                 "link":"script/scriptLink.html"//link associeted
                },
                ...                                
            ]}
        
    },
    ...
    ]
}
 *  
 * @authors: nunzio fiore (tempozero@gmail.com), emanuele crescentini (ema@cosmobile.net)
 */

var iMoogle = new Class({
  'version': '0.0.3',

  Implements: [Events, Options],

  options: {
    id: '',
    where: '',
    width: 280,
    height: 178,
    user: 'iMoogleUser',
    headerText: 'A complete list of portlets',
    waitImgSrc: 'img/wait.gif',
	portletsUrl:'data/portlet.json',
	memoPortletsUrl:'data/memoPanel.json'

  },

  initialize: function(options) {
	
    this.setOptions(options);
    this.id = this.options.id;
    this.imoogleContainer = $(this.options.where);
    this.wait = new Element('img', {
      'src': this.options.waitImgSrc
    });
    this.wait.setStyle('margin-left', '48%');
    this.body = $(document.body);

    this.buildBody();

    var obj = this;
	 this.closer = false;

    $('all_expand').fade(0);

    this.cnt = 1;
	
   var req = new Request.JSON({
      async: false,
      url: obj.options.portletsUrl+"?ma=" + Math.random(),
      onComplete: function(respJson) {

        obj.buildPage(respJson);

      },
	  onFailure: function(){
	  	$('sipario').set('html','some errors happened. while retreiving portlet data!');
	  }
    }).post({
      "user": obj.options.user
    });


    var leave_sipario = function() {
      $('sipario').fade(0);

      $('sipario').setStyle('display', 'none');

      var ef = new Fx.Morph($('container_all'), {
        duration: 1500,
        transition: 'quad:out'
      })
      ef.start({

        opacity: ['0', '1'],
        display: ['none', 'block']
      });

    };

    var set_sipario = function() {

      $('sipario').setStyle('display', 'block');

    };
	this.storedata();
    /*creato l'effetto che fa sparire il sipario, lo applico con un ritardo (delay) di un secondo (1000)*/
    leave_sipario.delay(1000);

  },
  
  getIdx: function(id){
  	if ($('portal_container' + id))
		return id;
	else return this.getIdx(id.toInt()-1);	
  },
  
  buildPage : function(respJson) {
	  var obj=this;
      obj.cnt = respJson.cols;
      for (var i = 2; i <= obj.cnt; i++) {
        var newTd = new Element('td', {
          'id': 'portal_container' + i
        });

        $('portal_container').grab(newTd);
        $('portal_container' + i).addClass('column');

      }

      $('portal_container1').set('html', '');

      respJson.portlets.each(function(p, index) {
		var idx = obj.getIdx(p.col);
		
        if (! (index % 14)) {
          obj.options.width = obj.options.width - 40;
          obj.options.height = obj.options.height - 40;

        }
		
        $('portal_container' + idx).grab(
        obj.buildPortlet((index + 1), p.id, p.title, p.body,p.list));

        var table = new Element('table', {
          'class': 'portlet_big',
          'id': 'big' + p.id
        });
        table.store('portl', p.id);
		var tbody = new Element('tbody');
		
        var tr = new Element('tr');
        var td = new Element('td');
        td.setProperty('width', window.screen.width - 10);
        td.setProperty('height', 'auto');
        td.setProperty('valign', 'top');
        var div = new Element('div', {
          'class': 'portlet_topper'
        });
        var span = new Element('span', {
          'id': 'bigtitle' + p.id,
          'class': 'titlebig'
        });
        span.store('portl', p.id);
        div.grab(span);
        span = new Element('span', {
          'class': 'controls'
        });
        var ref = new Element('a', {
          'href': '#reduce' + p.id,
          'class': 'reducer',
          'id': 'reduce' + p.id
        });
        ref.store('portl', p.id);
        var img = new Element('img', {
          'src': 'img/minus.png',
          'border': '0'
        });
        ref.grab(img);
        span.grab(ref);
        div.grab(span);
        obj.addEmptyLine(div, 1);
        td.grab(div);
        var div = new Element('div', {
          'class': 'portlet_content_big',
          'id': 'bigcontent' + p.id
        });
        td.grab(div);
        tr.grab(td);
		tbody.grab(tr);
        table.grab(tbody);
		
        $('container_all').grab(table);

      });

      obj.cnt = respJson.cols;

      $$('div.portlet').each(function(portlet, index) {
    	  if (portlet.retrieve("isAList")) {
	  			portlet.setStyles({
	  				width: '' + obj.options.width + 'px'
	  			});
	  		}
	  		else {
	  			portlet.setStyles({
	  				width: '' + obj.options.width + 'px',
	  				height: '' + obj.options.height + 'px'
	  			});
		}

        $('bigtitle' + (portlet.retrieve('portl'))).set('html', $('littletitle' + (portlet.retrieve('portl'))).get('html'));
        $('bigcontent' + (portlet.retrieve('portl'))).set('html', $('littlecontent' + (portlet.retrieve('portl'))).get('html'));
		if (portlet.retrieve('isAList')!= true)
        $('littlecontent' + (portlet.retrieve('portl'))).set('html', 
			$('littlecontent' + (portlet.retrieve('portl'))).get('html').substr(0, 130) + '...'
			);
		else{
			$$('#littlecontent'+ (portlet.retrieve('portl'))+' li').each(function(li,index){
				if (li.retrieve("break"))
					li.dispose();
				
				li.set('id', 'little_'+li.get('id'));
				li.getChildren().each(function(child){
					if (child.get('class')=='expanded')
						if (child.get('html').length>130) child.set('html', child.get('html').substr(0,130) + '...');
						
					child.set('id', 'little_'+child.get('id'));
				});

			});
		}
        $('big' + (portlet.retrieve('portl'))).fade(0);
        $('big' + (portlet.retrieve('portl'))).setStyles({
          margin: '10px 10px 10px 10px'
        });

      });

      $$('a.opener').each(function(opener, index) {

        opener.addEvent('click',
        function() {
          $('little' + opener.retrieve('portl')).fade(0);

          
          $('big' + ($('little' + (opener.retrieve('portl'))).retrieve('portl'))).setStyles({
            display: 'block'
          });
          $('big' + ($('little' + (opener.retrieve('portl'))).retrieve('portl'))).setStyles({
            margin: '10px 10px 10px 10px'
          });
          $('big' + ($('little' + (opener.retrieve('portl'))).retrieve('portl'))).fade(0.8);
          
          return false;

        });
      });

      $$('span.title').each(function(opener, index) {

        opener.addEvent('click',
        function() {
          $('little' + (opener.retrieve('portl'))).fade(0);

          $('big' + ($('little' + (opener.retrieve('portl'))).retrieve('portl'))).setStyles({
            display: 'block'
          });
          $('big' + ($('little' + (opener.retrieve('portl'))).retrieve('portl'))).setStyles({
            margin: '10px 10px 10px 10px'
          });
          $('big' + ($('little' + (opener.retrieve('portl'))).retrieve('portl'))).fade(0.8);

          return false;

        });
      });

      $$('a.collapser').each(function(collapser, index) {

          collapser.addEvent('click',
          function() {
        	  
        	obj.collapsePortlet($('little' + collapser.retrieve('portl')));
            
            return false;

          });
        });
      
      
      $$('a.expander').each(function(expander, index) {

    	  expander.addEvent('click',
          function() {
        	  
        	obj.expandPortlet($('little' + expander.retrieve('portl')));
            
            return false;

          });
        });
      
      $$('a.reducer').each(function(reducer, index) {

        reducer.addEvent('click',
        function() {
		
          $('little' + reducer.retrieve('portl')).fade(1);

          $('big' + reducer.retrieve('portl')).fade(0);

          return false;

        });
      });

      $$('.closer').each(function(closer, index) {

        closer.addEvent('click',
        function() {
		this.closer=true;		
          $('little' + closer.retrieve('portl')).dispose(0);
          $('big' + closer.retrieve('portl')).dispose(0);
			obj.storedata();
          return false;

        }.bind(this));
      });
	  
      $$('span.titlebig').each(function(reducer, index) {

        reducer.addEvent('click',
        function() {
          $('little' + reducer.retrieve('portl')).fade(1);
          $('big' + reducer.retrieve('portl')).fade(0);

          return false;

        });
      });
      
      $$('.exprow').each(function(expander, index) {

    	  expander.addEvent('click',
          function() {
        	  
        	obj.expandRow(expander);
            
            return false;

          });
        });
      
      $$('.collrow').each(function(collapser, index) {

    	  collapser.addEvent('click',
          function() {
        	  
        	obj.collapseRow(collapser);
            
            return false;

          });
        });

      $('all_expand').removeEvents();
      $('all_collapse').removeEvents();
      // Expand All Portlets
      $('all_expand').addEvent('click',
      function() {
        $('all_expand').fade(0);
        $('all_collapse').fade(1);

        $$('div.portlet').each(function(portlet, index) {
        	obj.expandPortlet(portlet);

        });
        $$('div.portlet_content').fade(1);

        return false;
      });

      // Collapse All Portlets
      $('all_collapse').addEvent('click',
      function() {

        $('all_expand').fade(1);
        $('all_collapse').fade(0);
        $$('div.portlet').each(function(portlet, index) {
        	obj.collapsePortlet(portlet);
        });
        $$('div.portlet_content').fade(0);

        return false;
      });
      
      //Key Events
      /*
      document.body.addEvent('keydown',function(event){
    	  console.log('sono dentro');
    	  if (event.key == 'esc') alert('Hai premuto esc');
      });*/
      
      

      // Controls Drag + Drop

      var sb = new Sortables($$('#columns td'), {
        clone: false,
        revert: false,
        /* initialization stuff here */
        initialize: function() {},
        
        /* once an item is selected */
        onStart: function(el) {

          el.setStyle('border', '2px dashed #ccc');
          el.fade(0.5);
          el.setStyle('background', '#FFFF99');
        },
        onComplete: function(el) {
          el.setStyles({
            background: '#ffffff',
            color: '#223333',
            border: '1px solid #66ff66',
            cursor: 'move',
            margin: '0 0 10px',

            overflow: 'hidden'
          });
          el.fade(1);
          /* when a drag is complete */
		  var del = function(){
		  	if (!obj.closer) 
		  		obj.storedata();
		  }
		  del.delay(1000);

        }
      });

    },

  storedata: function(){
  	//build a string of the order
          var serialized = '';
          for (var i = 1; i <= this.cnt; i++) {
            var founded = false;
            serialized += 'col' + i + '|';
            $$('#portal_container' + i + ' div.portlet').each(function(li) {
              serialized = serialized + li.retrieve('portl') + '|';
              founded = true;
            });
            if (!founded) {
              serialized += 'empty|';
            }
          }
		var obj=this;
          var req = new Request.JSON({
            url: obj.options.memoPortletsUrl,
            encoding: 'utf-8',
            onComplete: function(respJson2) {
				  if (respJson2.result=='ok')	
    		          serialized = '';
            	  else{
				  	  serialized = '';
					  alert('Some errors occurs, while storing data: '+respJson2.msg)
				  }
				  obj.closer=false;
			},
	  onFailure: function(){
	  	console.log('some errors happened while storing portlet\'s position data!');
		 obj.closer=false;
	  }
          }).post({
            "user":  obj.options.user,
			"r":$random(0,9999),
            "serialized": serialized
          });
  },
    
  collapsePortlet: function(portlet)
  {
    	portlet.setStyles({
            height: '25px'
          });
          $('big' + portlet.retrieve('portl')).setStyles({
            margin: '3010px 10px 10px 10px'
          });
          
          
        $('collapse'+portlet.retrieve('portl')).fade(0);
        $('collapse'+portlet.retrieve('portl')).setStyle('display','none');
        $('expand'+portlet.retrieve('portl')).setStyle('display','inline');
        $('expand'+portlet.retrieve('portl')).fade(1);
  },
    	
  expandPortlet: function(portlet)
  {
	  if (portlet.retrieve('isAList')) {
			portlet.setStyles({
				height: portlet.retrieve('height')
			});
		}
		else {
			portlet.setStyles({
				height: this.options.height + 'px'
			});
		}
	    $('big' + portlet.retrieve('portl')).setStyles({
	      margin: '4010px 10px 10px 10px'
	    });
	    
	    $('expand'+portlet.retrieve('portl')).fade(0);
        $('expand'+portlet.retrieve('portl')).setStyle('display','none');
        $('collapse'+portlet.retrieve('portl')).setStyle('display','inline');
        $('collapse'+portlet.retrieve('portl')).fade(1);
  },
  
  expandRow: function(expander)
  {
	  var row = expander.getParent();
	  expander.fade(0);
	  expander.setStyle('display','none');
	  
	  var coll = row.getChildren('div.collrow');
	  coll = $(coll[0]);
	  coll.setStyle('display','inline');
	  coll.fade(1);
	  
	  var div = row.getChildren('div.expanded');
	  div = $(div[0]);
	  div.setStyle('display','block');
	  div.fade(1);
	  
  },
  
  collapseRow: function(collapser)
  {
	  var row = collapser.getParent();
	  collapser.fade(0);
	  collapser.setStyle('display','none');
	  
	  var exp = row.getChildren('div.exprow');
	  exp = $(exp[0]);
	  exp.setStyle('display','inline');
	  exp.fade(1);
	  
	  var div = row.getChildren('div.expanded');
	  div = $(div[0]);
	  div.fade(0);
	  div.setStyle('display','none');
	  
	  
	  
  },
    
    
  addEmptyLine: function(div, num) {
    while (num >= 0) {
      div.grab(new Element('br'));
      num--;
    }

  },

  add: function(el) {
    this.imoogleContainer.grab(el);
  },

  buildControl: function(key) {
    var ref = new Element('a', {
      'href': '#all_' + key,
      'id': 'all_' + key
    });
    var img = new Element('img', {
      'src': 'img/' + key + '.png',
      'border': 0
    });
    ref.grab(img);
    return ref;
  },

  buildBody: function() {

    var sipario = new Element('div', {
      'id': 'sipario'
    });
    this.addEmptyLine(4, sipario);
    sipario.grab(this.wait);
    this.add(sipario);

    this.add(
    new Element('div', {
      'id': 'container_all'
    }).grab(
    new Element('div', {
      'id': 'container'
    })));

    $('container').grab(
    new Element('div').setStyle('text-align', 'center'));

    var header = new Element('div', {
      'id': 'header'
    });
    var headerText = new Element('span', {
      'id': 'headerText'
    });
    headerText.set('html', this.options.headerText);
    var spanControls = new Element('span', {
      'class': 'controls'
    });
    var refAllExpand = new Element('a', {
      'href': '#all_expand',
      'id': 'all_expand',
      'tilte': 'Expand'
    });
    var expandImg = new Element('img', {
      'src': 'img/expand.png',
      'border': 0
    });
    refAllExpand.grab(expandImg);
    spanControls.grab(this.buildControl('expand'));
    spanControls.grab(this.buildControl('collapse'));

    header.grab(headerText);
    this.addEmptyLine(header, 1);
    header.grab(spanControls);
    this.addEmptyLine(header, 1);
    $('container').grab(header);

    var columns = new Element('table', {
      'id': 'columns'
    });
	columns.setProperty('cellspacing', 0);
    var tb = new Element('tbody');
	var portalContainer = new Element('tr', {
      'id': 'portal_container'
    });
    var td = new Element('td', {
      'id': 'portal_container1',
      'class': 'column'
    });
    portalContainer.grab(td);
	tb.grab(portalContainer);
    columns.grab(tb);

    $('container').grab(columns);

  },

  buildPortlet: function(idx, id, title, content,list) {

    var el = new Element('div', {
      'class': 'portlet',
      'id': 'little' + id
    });
    el.store('portl', id);
    var elT = new Element('div', {
      'class': 'portlet_topper'
    });
    var spanTitle = new Element('span', {
      'id': 'littletitle' + id,
      'class': 'title'
    });
	spanTitle.store('portl',id);
    var refTitle = new Element('a', {
      'href': '#'
    });
    refTitle.set('html', title);
    spanTitle.set('html', idx + ' ');
    spanTitle.grab(refTitle);
    var spanCmd = new Element('span', {
      'id': 'cmd' + id,
      'class': 'controls'
    });
    spanCmd.setStyle('text-align', 'right');
    var refOpener = new Element('a', {
      'href': '#open' + id,
      'class': 'opener',
      'id': 'open' + id,
      'title': 'Open'
    });
    refOpener.store('portl', id);
    var imgPlus = new Element('img', {
      'src': 'img/plus.png',
      'border': '0'
    });
    refOpener.grab(imgPlus);
    var refCollapser = new Element('a', {
        'href': '#collapse' + id,
        'class': 'collapser',
        'id': 'collapse' + id,
        'title': 'Collapse'
      });
      refCollapser.store('portl', id);
      var imgColl = new Element('img', {
        'src': 'img/collapse.png',
        'border': '0'
      });
      refCollapser.grab(imgColl);
    var refExpander = new Element('a', {
          'href': '#expand' + id,
          'class': 'expander',
          'id': 'expand' + id,
          'title': 'Expand'
        });
    refExpander.store('portl', id);
        var imgExp = new Element('img', {
          'src': 'img/expand.png',
          'border': '0'
        });
    refExpander.grab(imgExp);
    refExpander.fade(0);
    refExpander.setStyle('display','none');
    var refCloser = new Element('a', {
      'href': '#close' + id,
      'class': 'closer',
      'id': 'close' + id,
      'title': 'Close'
    });
    refCloser.store('portl', id);
	  var imgClose = new Element('img', {
      'src': 'img/close.png',
      'border': '0'
    });
    refCloser.grab(imgClose);
	
    spanCmd.grab(refOpener);
    spanCmd.grab(refCollapser);
    spanCmd.grab(refExpander);
    spanCmd.grab(refCloser);
   
   var cnt = new Element('div', {
			'class': 'portlet_content',
			'id': 'littlecontent' + id
		});
		
	if (list) {
		el.store('isAList',true);
		
	    var ref = new Element('a', {
      'href': list.baseUrl,
      'class': 'link',
      'id': 'link' + id,
      'title': 'Link to the list\'s home page'
    	});
    ref.store('portl', id);
	  var img = new Element('img', {
      'src': 'img/link.png',
      'border': '0'
    });
    ref.grab(img);
    spanCmd.grab(ref);
	
		/*
		 * 	,"list":{//a list portlet is identified by the attribute list and NOT body
		    "baseUrl":"scripts/index.html"//the base url where we wants the portlet go (with the complete list)
			"limit":m,
			"els":[//the elements of the list
				{
				 "id":n,//an id for the list's element
			     "text":"a script for calendar",	//the text for the list's element
				 "link":"script/scriptLink.html"//link associeted
				},
				...								
			]}
		 */

		if (list.els.length > 4) {
			el.setStyle('height', 'auto');
		    el.store('height','auto')
		}
		else {
			el.setStyle('height', '' + this.options.height + 'px');
			el.store('height', '' + this.options.height + 'px');
		}
		var ul = new Element('ul',
							{'id':'list'+id
							});
							
		list.els.each(function(el,index){
			var elType="elsOdd";
			if (index%2) elType ="elEven"; else elType="elOdd";
			
			var li = new Element('li',{'id':'list_'+id+"_"+el.id,'class': elType});
			var content;
			var expandible;
			if (el.title)
			{
				content = el.title;
				expandible = true;
			}
			else
			{
				content = el.text;
				expandible = false;
			}
			 ref = new Element('a', {
			      'href': el.link,
			      
			      'id': 'el' + el.id,
			      'html': content
	     	});
			li.store('expandible', expandible);

			li.grab(ref);
			
			if (index>=list.limit)
				li.store('break',true);
			else		
				li.store('break',false);

			
			if (expandible)
			{
				var expand = new Element('div', {
			        'class': 'exprow',
			        'id': 'exprow_' + li.id,
			        'styles':{'margin-right': '5px', 'cursor':'pointer', 'display':'inline'}
			      });
				var imgEx = new Element('img', {
			          'src': 'img/expand.png',
			          'alt': 'Expand',
			          'border': '0'
			          
			        });
				expand.grab(imgEx);
				
				var collapse = new Element('div', {
			        'class': 'collrow',
			        'id': 'collrow_' + li.id,
			        'styles':{'margin-right': '5px', 'cursor':'pointer', 'display':'none'}
			      });
				var imgCol = new Element('img', {
			          'src': 'img/collapse.png',
			          'alt': 'Collapse',
			          'border': '0'
			          
			        });
				collapse.grab(imgCol);
				  var div = new Element('div',
						  {
							  'id':li.id+'_expand',
							  'html': el.text,
							  'class': 'expanded',
							  'styles':
							  {
						  		'display': 'none'
							  }
						  });
				
				  div.fade(0);
			    
				li.grab(expand, 'top');
				li.grab(collapse, 'top');
				li.grab(div);
			}
			
			ul.grab(li);	
		});
		cnt.grab(ul);
		
		
	}
	else {
		el.store('isAList',false);
		cnt.set('html', content);
		
	}
	 
    var br = new Element('br');

    refTitle.set('html', title);
    elT.grab(spanTitle);
    elT.grab(spanCmd);
    elT.grab(br);

    el.grab(elT);
	
	el.grab(cnt);
    return el;

  }

});