/* extend carousel */
UI.Vertical = Class.create(UI.Carousel, 
{
  initialize: function(element, options) {
    this.setOptions(options);
    this.element = $(element);
    this.id = this.element.id;
    this.container   = this.element.down(this.options.container).firstDescendant();
    this.elements    = this.container.childElements();
    this.previousButton = this.options.previousButton == false ? null : this.element.down(this.options.previousButton);
    this.nextButton = this.options.nextButton == false ? null : this.element.down(this.options.nextButton);
    this.posAttribute = "top";
    this.dimAttribute = "height";

    this.elementSize = this.computeElementSize();
    
    [ this.previousButton, this.nextButton ].each(function(button) {
      if (!button) return;
      var className = (button == this.nextButton ? "next_button" : "previous_button") + this.options.overButtonSuffix;
      button.clickHandler = this.scroll.bind(this, (button == this.nextButton ? -1 : 1)  * this.elementSize);
      button.observe("click", button.clickHandler)
            .observe("mouseover", function() {button.addClassName(className)}.bind(this))
            .observe("mouseout",  function() {button.removeClassName(className)}.bind(this));
    }, this);
    this.updateButtons();
  }
});
/* end caroursel */

function updateVideobar(url, type, specific_id, tagbarurl, cat) 
{
	$('videoThumbsUL' + type + specific_id).innerHTML = "";
	$('videoThumbsUL' + type + specific_id).setStyle({left: '0px'});
	
	initVideobar(url, type, specific_id, cat);
	
	if(tagbarurl != 'clean')
	{
		$('tagsUL' + type + specific_id).innerHTML = "";
		$('tagsUL' + type + specific_id).setStyle({top: '0px'});
		
		if(tagbarurl != 'clean')
			initTagbar(tagbarurl, type, specific_id);
	}
}

function initVideobar(url, type, specific_id, cat)
{
	tmp = new UI.Ajax.Carousel("hCarousel" + type + specific_id, {elementSize : 119,  url : url +'.json'})
		.observe("request:started", function() {
        		$('spinner' + type + specific_id).show().morph("opacity:0.9", {duration:0.5});
		})
		.observe("request:ended", function() {
        		$('spinner' + type + specific_id).morph("opacity:0", {duration:0.5, afterFinish: function(obj) { obj.element.hide(); }});
      	});
    
     
	Event.observe($('relatedVideos' + type + specific_id), 'click', function(event) {
  		var element = Event.element(event);
  		if(element.tagName == 'SPAN')
  		{
  			$$('#relatedVideos' + type + specific_id + ' li.on')[0].removeClassName('on');
  			element.parentNode.parentNode.addClassName('on');
  		}
	});
	
	Event.observe($('videoThumbsUL' + type + specific_id), 'mouseover', function(event) {
  		maxVideoFrame('hCarousel' + type + specific_id, 'videoThumbsArea' + type + specific_id, 'main');
	});
	
	Event.observe($('videoThumbsUL' + type + specific_id), 'mouseout', function(event) {
  		minVideoFrame('hCarousel' + type + specific_id, 'videoThumbsArea' + type + specific_id, 'main', cat);
	});
}

function initTagbar(url, type, specific_id)
{
	tmp =  new Ajax.Request(url +'.json', Object.extend({method: "GET", 
  												onSuccess : function(transport, json) {
	  												if (!json)
												      json = transport.responseJSON;
												    
												    $("tagsUL" + type + specific_id).insert({bottom: json.html}).childElements();
												    
												    tmp_carousel = new UI.Vertical("relatedVideosResults" + type + specific_id, {elementSize:20, direction: 'vertical', nbVisible : 4});
  												} }));

	Event.observe($('tagbar'), 'click', function(event) {
	
  		var element = Event.element(event);
  		
  		if(element.tagName == 'A')
  		{	
  			if($$('#tagbar li.on')[0])
  				$$('#tagbar li.on')[0].removeClassName('on');
  			
  			element.parentNode.addClassName('on');
  		}
	});
}

function initGallery(id)
{
	tmp = new UI.Carousel(id, {nbVisible : 4})
}


function initFacesbar(url, type)
{
		
	tmp = new UI.Ajax.Carousel(type + '_Outer', {direction: 'vertical', elementSize: 89, url: url+'.json'})
		.observe("request:started", function() {
			$('spinner' + type).show().morph("opacity:0.9", {duration:0.5});
	
		})
		.observe("request:ended", function() {
			
				$('spinner' + type).morph("opacity:0", {duration:0.5, afterFinish: function(obj) { obj.element.hide(); }});
	
			});
}

function updateFacesbar(url, type, filter)
{
	$(type + '_Elements').innerHTML = "";
	$(type + '_Elements').setStyle({top: '0px'});
	
	//remove active filters
	$$('#' + type + '_letter_filter a').each(function (e)
			{
				e.removeClassName('active');
			});
	$(type + '_filter_' + filter).addClassName('active');
	
	initFacesbar(url,type);
}


function setSearchType(searchID){
	
	
	// empty input field if standard text and set focus
	if($('searchInput').value == 'Search for ' + $('searchType').value)
		$('searchInput').value = '';
	$('searchInput').focus();
	$('searchInput').removeClassName('placeholderText');
	
	//set hidden field
	$('searchType').value = searchID;
		
	//set active class
	$$('#advancedSearch a').each(function (e) 
	{ 
		e.removeClassName('active'); 
	})
	$('search_' + searchID).addClassName('active');
	
	
//	inputValue = searchID.replace("_", " ");
//	if($('searchInput').value == "" || searchID == 'by_Videos' || searchID == 'by_Profiles' || searchID == 'by_Spots'){
//		$('searchInput').style.color = '#777777';
//		$('searchInput').value = inputValue;
//		
//	}
}
function checkSearchValue(action){
	if(action == 'blur' && $('searchInput').value == '')
	{
		$('searchInput').addClassName('placeholderText');
		$('searchInput').value = 'Search for ' + $('searchType').value;
	}
	
	if(action == 'focus' && $('searchInput').value == 'Search for ' + $('searchType').value)
	{
		$('searchInput').value = '';
		$('searchInput').removeClassName('placeholderText');
	}

}
function hideAdvancedSearch(){
	$('advancedSearch').removeClassName('advancedSearchClose');
}

function showAdvancedSearch(){
	$('advancedSearch').addClassName('advancedSearchClose');
}

function minVideoFrame(element1, element2, elementZIndex, cat){
	if(cat == 'channel')
		var height = '125px';
	else
		var height = '110px';
	
	$(element1).setStyle({height: height});
	$(element2).setStyle({height: height});
	if(elementZIndex){		
		$(elementZIndex).setStyle({zIndex: '10'});
	}
}

function maxVideoFrame(element1, element2, elementZIndex){
	$(element1).setStyle({height: '250px'});	
	$(element2).setStyle({height: '250px'});
	if(elementZIndex){		
		$(elementZIndex).setStyle({zIndex: '300'});
	}
}