var Manager = {};

(function($) {

  $(function() {

    function getClasses() {
      var params = [ 'q=*:*', 'facet=true', 'indent=true', 'facet.field=class','wt=json', 'rows=0', 'json.nl=map' ];
      jQuery.ajax({
      	url:Manager.solrUrl+'select?' + params.join('&') + '&json.wrf=?',
      	dataType:"jsonp",
      	data:{"jsonp":"json.wrf"},
      	success:function(response){
      	  var classes = response.facet_counts.facet_fields['class'];
    	  // store available classes in the manager
    	  var orderableClasses = [];
        
        
        for (clazz in classes) {
        	orderableClasses.push([clazz.toString()]);
        }
    
        orderableClasses.sort();
        // TODO: pass it as configuration !!!
        // !!! hardcoded ordder
        orderableClasses = ["Compound","Assay","Activity", "Target","Gene"];
        
        Manager.classes = {};
        for(var i=0;i<orderableClasses.length;i++){
        	Manager.classes[orderableClasses[i]] = [];
        }
        
        getFields();
      		
      	}
      });

      /*
      jQuery.getJSON(Manager.solrUrl + 'select?' + params.join('&')
          + '&json.wrf=?', {}, function(response) {
        	  var classes = response.facet_counts.facet_fields['class'];
        	  // store available classes in the manager
        	  var orderableClasses = [];
	        
	        
	        for (clazz in classes) {
	        	orderableClasses.push([clazz.toString()]);
	        }
        
	        orderableClasses.sort();
	        // TODO: pass it as configuration !!!
	        // !!! hardcoded ordder
	        orderableClasses = ["Compound","Assay","Activity", "Target","Gene"];
	        
	        Manager.classes = {};
	        for(var i=0;i<orderableClasses.length;i++){
	        	Manager.classes[orderableClasses[i]] = [];
	        }
	        
	        getFields();
	      });
	  */    
    };

    function getFields() {
      var classes = Object.keys(Manager.classes).map(function(value) {
        return 'id:' + value;
      });
      var params = [ 'q=' + classes.join(" OR "), 'indent=true', 'wt=json',
          'json.nl=map' ];
      
      jQuery.ajax({
        	url:Manager.solrUrl+'select?' + params.join('&') + '&json.wrf=?',
        	dataType:"jsonp",
        	data:{"jsonp":"json.wrf"},
        	success:function(response){
        		for ( var i = 0; i < response.response.docs.length; i++) {
        	          var doc = response.response.docs[i];
        	          Manager.classes[doc.id] = doc.class_properties;
        	        }
        	    initializeUI();
        	}
      });
      /*
      jQuery.getJSON(Manager.solrUrl + 'select?' + params.join('&')+ '&json.wrf=?', {}, function(response) {
        for ( var i = 0; i < response.response.docs.length; i++) {
          var doc = response.response.docs[i];
          Manager.classes[doc.id] = doc.class_properties;
        }
        initializeUI();
      });
      */
    }
    ;

    // Initialize the manager with the url to solr
    Manager = new AjaxSolr.Manager({
    	solrUrl : "http://hcls.sindicetech.com/faceted/proxy/"	
    });

    // use the hash parameter store to keep current state in URL
    Manager.setStore(new AjaxSolr.ParameterHashStore());
    Manager.store.exposed = [ 'fq', 'q', 'start', 'ff' ];

    // TODO clean implementation in store
    Manager.store.isMultiple = function(name) {
      if (Manager.classes[name] !== undefined) {
        return true;
      } else {
        return name
            .match(/^(?:bf|bq|facet\.date|facet\.date\.other|facet\.date\.include|facet\.field|facet\.pivot|facet\.range|facet\.range\.other|facet\.range\.include|facet\.query|fq|group\.field|group\.func|group\.query|pf|qf)$/);
      }
    };

    Manager.setFocus = function(classes, focus) {
       // set facet focus parameter for solr
      Manager.store.addByValue('ff', focus);
      // remove all facet.field params
      Manager.store.remove('facet.field');
      Manager.store.remove('start');
      // add facet.field params matching the current focus
      Manager.store.addByValue('facet.field', classes[focus]);
      Manager.store.addByValue('facet.field', 'class'); // hardcode focus facet
      // field for now
      Manager.doRequest();
    };

    getClasses();

    function initializeUI() {

      Manager.addWidget(new AjaxSolr.FocusFacetWidget({
        id : 'focus_facet',
        target : '#tabs',
        focus_field : 'class' // use the 'class' field to get the values to
                              // focus on
      }));

      var tooltips = 
    	'<div style="display:none;" id="t1-tooltip-focused-class" >(1) Class you are restricting on</div>'+
    	'<div style="display:none;" id="t2-tooltip-tabs" >(2) Click to focus on another class</div>'+
    	'<div style="display:none;" id="t3-tooltip-facets" >(5) Limit your results here</div>'+
    	'<div style="display:none;" id="t4-tooltip-navigation" >(4) Results are paginated</div>'+
    	'<div style="display:none;" id="t5-tooltip-single-result" >(6) Single result with properties</div>'+
    	'<div style="display:none;" id="t6-tooltip-current-selection" >(3) Currently applied filters</div>';

      $("#sindice-pivot-browser").append('<div id="tabs" style="clear:both;" class="sindice-pivot-browser"><ul></ul></div>');
      $("#sindice-pivot-browser").append(tooltips);
      
      
      for ( var clazz in Manager.classes) {
        // expose class filter parameters in URL for persistence
        Manager.store.exposed.push(clazz);

        // add the tab header for this class
        // var focus_link = $('<a href="#ff=' + clazz + '"/>').text(clazz);
        // $('#tabs > ul').append($('<li>').append(focus_link));

        // add a new div containing facets and result for a class
        var template = 
        '<div id="content_template">'+
		'<div class="help-content" style="display: none;">'+
			'Welcome to the ChEMBL Faceted Browser. Below is the main page which displays information for a current class (1).'+
			'Use the tabs above to switch between classes (2) of'+
			'compound, assay, activity, target, and gene. You can restrict information seen from each class by selecting a filter of that class (3).'+
			'Applying a filter updates results for all the classes.'+
		'</div>'+
		
		'<div class="left">'+
			'<div class="left-help-content">'+
				'<h2 class="collapse">Info</h2>'+
				'<div class="content bordered">'+
				'ChEMBL is a database of bio-active small molecules produced and curated by EMBL-EBI(https://www.ebi.ac.uk/chembl/).'+
				'It contains information on chemical properties (e.g. molecular weight, logP, pKa, etc.)'+
				'and referenced bioactivities (e.g. binding constants, ADMET data, and pharmacology).'+
				'</div>'+
			'</div>'+
			
			'<div class="x">'+
				'<h2>Current Selection</h2>'+
				'<ul class="selection"></ul>'+
			'</div>'+

			'<div class="facets"></div>'+

			'<div class="clear"></div>'+
		'</div>'+
		
		'<div class="right">'+
			'<div class="result">'+
				'<div class="navigation">'+
					'<ul class="pager"></ul>'+
					'<div class="pager_header"></div>'+
				'</div>'+
				'<div class="docs"></div>'+
				'<div class="navigation">'+
					'<ul class="pager"></ul>'+
					'<div class="pager_header"></div>'+
				'</div>'+
			'</div>'+
		'</div>'+
		
		'<div class="clear"></div>'+
	'</div>';
        	
        
        
        
        var tab_content = $(template).attr('id', clazz);
        
        
        // below was commented out - needed if we want to fire 
        // pager currensearch and result widget multiple times for each tab
        // for the results this might be actually needed 
        // once I figure out how to fire different requests for different focus 
        // so when user just switching tab the results would be already there
        
		
        tab_content.find('.docs').attr('id', clazz + '_docs');
        tab_content.find('.pager:eq(0)').attr('id', clazz + '_pager1');
        tab_content.find('.pager:eq(1)').attr('id', clazz + '_pager2');
        tab_content.find('.selection').attr('id', clazz + '_selection');
        
        tab_content.find('.pager_header').attr('id', clazz + '_pager_header');
        tab_content.find('.facets').attr('id', clazz + '_facets');
        tab_content.appendTo('#tabs');

        // initialize the result widget
        
        Manager.addWidget(new AjaxSolr.ResultWidget({
          id : clazz,
          target : '#' + clazz + '_docs' // html target id for positioning
        }));
        
        // add paging capabilities to results
        Manager.addWidget(new AjaxSolr.PagerWidget({
          id : clazz + '_pager1',
          target : '#' + clazz + '_pager1',
          prevLabel : '&lt;',
          nextLabel : '&gt;',
          innerWindow : 3,
          renderHeader : function(perPage, offset, total) {
            $(this.target + '_header').html(
                $('<span/>').text(
                    'displaying ' + Math.min(total, offset + 1) + ' to '
                        + Math.min(total, offset + perPage) + ' of ' + total));
          }
        }));
        
        Manager.addWidget(new AjaxSolr.PagerWidget({
            id : clazz + '_pager2',
            target : '#' + clazz + '_pager2',
            prevLabel : '&lt;',
            nextLabel : '&gt;',
            innerWindow : 3,
            renderHeader : function(perPage, offset, total) {
              $(this.target + '_header').html(
                  $('<span/>').text(
                      'displaying ' + Math.min(total, offset + 1) + ' to '
                          + Math.min(total, offset + perPage) + ' of ' + total));
            }
          }));
		
        
        Manager.addWidget(new AjaxSolr.CurrentSearchWidget({
          id : clazz + '_currentsearch',
          target : '#' + clazz + '_selection'
        }));
        
        
        
        if(Manager.classes[clazz]){
        	var fields = Manager.classes[clazz];
        	for ( var i = 0, l = fields.length; i < l; i++) {
                 // create facet widget containers
                 $('#' + clazz + '_facets').append(
                     $('<h2>').text(fields[i]).after(
                         $('<div>').attr("id", clazz + '_' + fields[i])));

                 var facet_id = clazz + '_' + fields[i];

                 // create facet widgets
                 Manager.addWidget(new AjaxSolr.FacetWidget({
                   id : facet_id,
                   target : '#' + facet_id,
                   field : fields[i],
                   facet_focus : clazz,
                   'facet.limit' : 11
                 }));
               }
        }
      }

      // below few widgets which are the same on each tab 
      // they used classes from template
      
      /*
      Manager.addWidget(new AjaxSolr.ResultWidget({
          id : "documents",
          target : '.docs' // html target id for positioning
        }));

      
      Manager.addWidget(new AjaxSolr.PagerWidget({
          id : 'pager',
          target : '.pager',
          prevLabel : '&lt;',
          nextLabel : '&gt;',
          innerWindow : 3,
          renderHeader : function(perPage, offset, total) {
            $(this.target + '_header').html(
                $('<span/>').text(
                    'displaying ' + Math.min(total, offset + 1) + ' to '
                        + Math.min(total, offset + perPage) + ' of ' + total));
          }
        }));
        
        Manager.addWidget(new AjaxSolr.CurrentSearchWidget({
            id :'currentsearch',
            target : '.selection'
          }));
          
      */
      
      Manager.init();
      var params = {
        'qt' : 'siren-facet',
        facet : true,
        'facet.limit' : 10,
        'facet.mincount' : 1,
        // 'f.topics.facet.limit': 50,
        'json.nl' : 'map',
        'indent' : true,
      };
      for ( var name in params) {
        Manager.store.addByValue(name, params[name]);
      }
      
      // set focus from url "ff" param or first one if no ff param in url 
      var focused = Object.keys(Manager.classes)[0];
      if(document.location.hash){
    	  var a  = document.location.hash.split("=");
    	  if(a.length==2){
    		  focused = a[1];
    	  }
      }
      Manager.setFocus(Manager.classes,focused);
      // also switch tab if needed (if it is not the first tab)
      $("#tabs").tabs('select',focused);
    }
  });

  $.fn.showIf = function(condition) {
    if (condition) {
      return this.show();
    } else {
      return this.hide();
    }
  };
  
  
})(jQuery);


// below code for showing tooltips


var tooltips =[];
var showTooltips = false;

function destroyTooltips(){
	jQuery(".help-content").hide();
	for(var i=0;i<tooltips.length;i++){
		tooltips[i].tipsy("hide");
		tooltips[i].removeClass("bordered");
	}
	jQuery(".tipsy").remove();
	tooltips=[];
	closeLeftHelpBox();
}

function closeLeftHelpBox(){
	jQuery(".left-help-content h2").removeClass("collapse");
	jQuery(".left-help-content div.content").hide();
}
function showLeftHelpBox(){
	jQuery(".left-help-content h2").addClass("collapse");
	jQuery(".left-help-content div.content").show();
}


function destroyHelpButton(){
	jQuery("#tabs ul.ui-tabs-nav li.help-button").remove();
}

function showHelpButton(callback){
	// here check that ui was rendered and display help
	if(jQuery("div.docs:eq(0) div").size()==0 || jQuery("#tabs ul li.ui-state-active")==0 ){
		setTimeout(function(){
			showHelpButton(callback);
			},100);
		return;
	}	
	
	var html = '<li class="help-button ui-corner-top" style="float:right;">'+
		'<span href="">Help</span>'+
	'</li>';

	if(jQuery("#tabs ul.ui-tabs-nav li.help-button").size()==0){
		jQuery("#tabs ul.ui-tabs-nav").append(html);
		jQuery(".help-button").click(function(e){
			e.preventDefault();
			if(jQuery(this).hasClass("active")){
				jQuery(this).removeClass('active');
				destroyTooltips();
				showTooltips = false;
			}else{
				jQuery(this).addClass('active');
				showTooltips = true;
				destroyTooltips();
				displayTooltips();
			}
		});
	}
	
	if(callback){
		callback();
	}
}



function displayTooltips(){
	showTooltips = true;
	//make sure that help button is active
	jQuery("#tabs ul.ui-tabs-nav li.help-button").addClass("active");
	jQuery("#tabs ul.ui-tabs-nav li.help-button span").text("Turn off Help").css({color:"red"});
	
	jQuery(".help-content").show();
	
	var $t1 = jQuery("#tabs ul li.ui-state-active");
	if($t1.size()>0){
		$t1.tipsy({
			title:function(){
				return jQuery("#t1-tooltip-focused-class").text();
			},
			trigger: 'manual',
			gravity: 's',  
			fade: true,
			opacity:1
		});
		$t1.tipsy('show');
		tooltips.push($t1);
	}	
	
	
	var $t2 = jQuery("#tabs ul");
	if($t2.size()>0){
		$t2.tipsy({
			title:function(){
				return jQuery("#t2-tooltip-tabs").text();
			},
			trigger: 'manual',
			gravity: 'n',
			fade: true,
			opacity:1
		});
		$t2.tipsy('show');
		tooltips.push($t2);
	}
	
	var $t3 = jQuery("#tabs div:visible div.left div.facets div:eq(0)");
	if($t3.size()>0){
		$t3.tipsy({
			title:function(){
				return jQuery("#t3-tooltip-facets").text();
			},
			trigger: 'manual',
			gravity: 'n',  
			fade: true,
			opacity:1
		});
		$t3.tipsy('show');
		$t3.addClass("bordered");
		tooltips.push($t3);
	}
	
	var $t4 = jQuery("#tabs div:visible div.right div.result div.navigation:eq(0)");
	if($t4.size()>0){
		$t4.tipsy({
			title:function(){
				return jQuery("#t4-tooltip-navigation").text();
			},
			trigger: 'manual',
			gravity: 's',  
			fade: true,
			opacity:1
		});
		$t4.tipsy('show');
		$t4.addClass("bordered");
		tooltips.push($t4);
	}
	
	var $t5 = jQuery("#tabs div:visible div.right div.docs div:first-child");
	if($t5.size()>0){
		$t5.tipsy({
			title:function(){
				return jQuery("#t5-tooltip-single-result").text();
			},
			trigger: 'manual',
			gravity: 'n',  
			fade: true,
			opacity:1
		});
		$t5.tipsy('show');
		$t5.addClass("bordered");
		tooltips.push($t5);
	}
	
	var $t6 = jQuery("#tabs div:visible > div.left > div.x");
	if($t6.size()>0){
		$t6.tipsy({
			title:function(){
				return jQuery("#t6-tooltip-current-selection").text();
			},
			trigger: 'manual',
			gravity: 'n',
			fade: true,
			opacity:1
		});
		$t6.tipsy('show');
		$t6.addClass("bordered");
		tooltips.push($t6);
	}
}


jQuery(document).ready(function(){
	showHelpButton(function(){
		setTimeout(displayTooltips,500);
	});
	
	// this listener is fired before anything else 
	// see: 
	// http://stackoverflow.com/questions/6157486/jquery-trap-all-click-events-before-they-happen
	
	document.addEventListener('click', function(e) {
		if(showTooltips==true){
			showTooltips = false;
			destroyTooltips();
        	destroyHelpButton();
        	
        	setTimeout(function(){
            	showHelpButton();
        	},500);
		}
	}, true);
	
	var waitForFinalEvent = (function () {
		  var timers = {};
		  return function (callback, ms, uniqueId) {
		    if (!uniqueId) {
		      uniqueId = "Don't call this twice without a uniqueId";
		    }
		    if (timers[uniqueId]) {
		      clearTimeout (timers[uniqueId]);
		    }
		    timers[uniqueId] = setTimeout(callback, ms);
		  };
	})();
	
	jQuery(window).resize(function () {
	    waitForFinalEvent(function(){
	    if(showTooltips==true){
	    	destroyTooltips();
	        displayTooltips();
	    }  
	    }, 500, "some unique string");
	});
	
	jQuery(".left-help-content h2").live('click',function(e){
		if(jQuery(this).hasClass("collapse")){
			// collapse
			// do it this way DO NOT USE $(this) as the box has to be flipped on all tabs
			closeLeftHelpBox();
		}else{
			showLeftHelpBox();
		}
	});
});