var RadioButton = function(el, siblings){
	this.raw = el;
	this.el = $(el);
	this.siblings = siblings;
	this.init();
};
RadioButton.prototype = {
	selectedClass: "radio-selected",
	init: function(){
		this.button = $("<div class=\"js-radio\" />");
		this.button.addEvent("click", this.click, this);;
		this.label = $("label[for=" + this.el.attr("id") + "]");
		this.raw.$el = this.button;
		this.raw.$label = this.label;
		this.el.before(this.button);
		this.el.css("display", "none");
		this.el.addEvent("change", this.change, this);
		this.change();
	},
	click: function(){
		if(!this.el.attr("checked")){
			this.el.attr("checked", this.el.attr("checked") ? false : true);
			this.el.trigger("change");
		}
	},
	change: function(){
		this.siblings.loop(function(el){
			if(el.$el){
				if(!$(el).attr("checked")){
					el.$el.removeClass(this.selectedClass);
					el.$label.removeClass(this.selectedClass);
				}
			}
		}, this);
		if(this.el.attr("checked")){
			this.button.addClass(this.selectedClass);
			this.label.addClass(this.selectedClass);
		}
	}
};

var DropDown = function(el){
	this.el = $(el);
	this.items = [];
	this.timer = 0;
	this.options = this.el.find("option");
	this.wrapper = $("<div class=\"js-dropdown\" />").append(
		//this.header = $("<p>" + $("label[for=" + this.el.attr("name") + "]").text() + "</p>"),
		this.header = $("<p>" + $(this.options[0]).text()+ "</p>"),
		this.list = $("<ul />").hide()
	).addEvent("click", this.open, this).addEvent("mouseenter", this.enter, this).addEvent("mouseleave", this.leave, this);
	this.options.loop(function(el){
		var li = $("<li>" + $(el).text() + "</li>");
		li.option = el;
		li.appendTo(this.list);
		li.hover(this.hover, this.hover).addEvent("click", function(){ this.select(li, this); return false; }, this);
	}, this);
	this.items = this.list.find("li");
	this.el.after(this.wrapper);
};
DropDown.prototype = {
	select: function(el, bind){
		var option = $(el.option);
		option.attr("selected", true);
		bind.header.text(el.text());
		bind.close();
		option.parent().trigger("change");
	},
	selectByValue: function(val) {
	    var text = "";
	    this.options.loop(function(el){
	        if ($(el).val() == val) {
	            text = $(el).text();
	            return false;
	        }
	    });
	    this.list.find("li").each(function() {
		    var el = $(this);
		    if (el.text() == text) {
		        el.trigger("click");
		        return false;
		    }
		});
	},
	close: function(){
		this.list.slideUp();
	},
	open: function(){
		this.list.slideDown();
	},
	enter: function(){
		clearTimeout(this.timer);
	},
	leave: function(){
		clearTimeout(this.interval);
		this.timer = $.timeout(this.close, 500, this);
	},
	hover: function(e){
		$(e.target).toggleClass("over");
	}
};
var RadioButtonList = function(el){
	this.el = $(el);
	this.items = [];
	this.list = $("<ul class=\"radiobuttons\" />");
	this.options = this.el.find("option");
	this.options.loop(function(el){
		var li = $("<li>" + $(el).text() + "</li>");
		li.option = el;
		li.appendTo(this.list);
		li.addEvent("click", function(){ this.select(li, this) }, this);
	}, this);
	this.items = this.list.find("li");
	this.selected = $(this.items[0]);
	this.selected.addClass("sel");
	this.el.after(this.list);
};
RadioButtonList.prototype = {
	select: function(el, bind){
		var option = $(el.option);
		option.attr("selected", true);
		option.parent().trigger("change");
		bind.selected.removeClass("sel");
		bind.selected = el;
		bind.selected.addClass("sel");
	},
	selectByValue: function(val) {
	    var text = "";
	    this.options.loop(function(el){
	        if ($(el).val() == val) {
	            text = $(el).text();
	            return false;
	        }
	    });
	    this.list.find("li").each(function() {
		    var el = $(this);
		    if (el.text() == text) {
		        el.trigger("click");
		        return false;
		    }
		});
	}
	
};
var TagCloud = function(el){
	this.el = $(el);
	this.items = [];
	this.list = $("<ul class=\"genres\" />");
	this.options = this.el.find("option");
	this.options.loop(function(el){
		var $el = $(el);
		var li = $("<li>" + $el.text() + "</li>");
		if($el.attr("selected")){
			li.addClass("sel");
		}
		li.addClass($el.attr("class"));
		li.option = el;
		li.appendTo(this.list);
		li.addEvent("click", function(){ this.select(li, this) }, this);
	}, this);
	/*this.items = this.list.find("li");
	this.selected = $(this.items[0]);
	this.selected.addClass("sel");*/
	this.el.after(this.list);
};
TagCloud.prototype = {
	select: function(el, bind){
		var option = $(el.option);
		option.attr("selected", option.attr("selected") && !Filter.isInit ? false : true);
		option.parent().trigger("change");
		if (Filter.isInit)
		    el.toggleClass("sel",true);
	    else
	        el.toggleClass("sel");
	},
	selectByValue: function(val){
		this.list.find("li").each(function() {
		    var el = $(this);
		    if (el.text() == val) {
		        el.trigger("click");
		        return false;
		    }
		   
		});
	}
};
var Filter = {
    isInit: true,
    currentPage: 1,
    filterLetter: "",
    address: new Adress(),
	init: function(){
	    Filter.resultsContainer = $("ul#search-results");
		Filter.form = $("div.filter form").addClass("js-active");
		Filter.searchBox = Filter.form.find("input#filter-search");
		Filter.pagingContainers = $("ul.paging");
		
		Filter.ajaxUrl =  $("#ajax-url").val() || "/functions/ReleaseArchive.ashx";
		
		Filter.form.find("select.select").each(function(){
		    var dd = new DropDown(this);
		    if (this.id == "filter-label")
			    Filter.labels = dd;
			else if (this.id == "filter-format")
			    Filter.formats = dd;
		}).change(Filter.change);
		
		Filter.form.find("select.radio").each(function(){
			Filter.sorts = new RadioButtonList(this);
		}).change(Filter.change);
		Filter.form.find("select.tagcloud").each(function(){
			Filter.genres = new TagCloud(this);
		}).change(Filter.change,1);
		

		Filter.form.find("input.field").keyup(function(){
		    if ($(this).val().length > 0) {
		        $("ul.alpha").hide();
		          Filter.filterLetter = "";  
		    }
		    else {	        
		        if (Filter.address.getValue("fsearch") == "")
		            $("ul.alpha").show();
		    }
		        
			/*if($(this).val().length > 3){
				Filter.change(1);
			}*/
		});
		
		Filter.form.bind("submit", function(e) {
            e.preventDefault();        
             
            //if ( Filter.searchBox.val().length <= 3)
			Filter.change(1);
        });
        
        $("ul.alpha").find("li a").each(function(){
		    var $el = $(this);
		    $el.bind("click",function(e) {
		        e.preventDefault();
		        var str = $(this).text();
		        Filter.filterLetter = str == "Alla" ? "" : str;
		        Filter.change(1);
			});
		});

        if (!Filter.initSearch()) {
            Filter.applyPaging();
            Filter.isInit = false;    
        }
        else {
            Filter.isInit = false;
            Filter.change(Filter.currentPage);   
        }
        
        if (Filter.searchBox &&
		     Filter.searchBox.val() &&
		     Filter.searchBox.val().length > 0 &&
		     Filter.searchBox.val() !=  Filter.searchBox.attr("title"))
		    $("ul.alpha").hide();
        
	},
	initSearch: function() {
	    var search = Filter.address.getValue("fsearch");
		var genres = Filter.address.getValue("fgenres");
		var label = Filter.address.getValue("flabel");
		var format = Filter.address.getValue("fformat");
		var sort = Filter.address.getValue("fsort");
		var page = Filter.address.getValue("page");
		var letter = Filter.address.getValue("fletter");
		var isInit = false;
		
		if (search.length > 0) {
		     Filter.searchBox.val(search);
		     isInit = true;
		}
		if (genres.length > 0) {
		    var arrGenres = genres.split(",");
		    for (var i = 0;i < arrGenres.length;++i)
		        Filter.genres.selectByValue(arrGenres[i]);
		    isInit = true;
		}
		if (label.length > 0) {
		    Filter.labels.selectByValue(label);
		    isInit = true;
		}
		if (format.length > 0) {
		    Filter.formats.selectByValue(format);
		    isInit = true;
		}
		if (sort.length > 0) {
		    Filter.sorts.selectByValue(sort);
		    isInit = true;
		}
		
		if (letter.length > 0) {
		    Filter.filterLetter = letter;
		    isInit = true;
		}
		
		if (page.length > 0 && !isNaN(page)) {
		    Filter.currentPage = parseInt(page);
		    isInit = true;
		}
		return isInit;
	},
	applyPaging: function() {
	    var i = 1;
	    
	    Filter.pagingContainers.find("li a").loop(function(el){
	        var $el = $(el);
	        $el.bind("click",function(e) {
	            e.preventDefault();
	            var page = $(this).text().replace("...","");
	            if (isNaN(page)) 
	                $(this).hasClass("prev") ?  Filter.change(Filter.currentPage-1) :  Filter.change(Filter.currentPage+1);
	            else
	                Filter.change(parseInt(page));
	        });
		});
	},
	change: function(page){
	    if (Filter.isInit)
	        return;
	        
	    if (Filter.ajaxCall != undefined)
            Filter.ajaxCall.abort();   
	        
	    Filter.resultsContainer.empty();
	    Filter.pagingContainers.empty();
	    
		var search =  Filter.searchBox.val();
		var genres = Filter.form.find("select#filter-genre").val();
		var label = Filter.form.find("select#filter-label").val();
		var format = Filter.form.find("select#filter-format").val();
		var sort = Filter.form.find("select#filter-sort").val();
		var artist = Filter.form.find("#artist").val();
        var upc = Filter.form.find("#upc").val();
        
		if (search != "" && search == Filter.searchBox.attr("title"))
		    search = "";
		if (genres == null)
		    genres = "";

		var data = {};
		data["filter-search"] = search;
		
		if (sort)
		    data["filter-sort"] = sort;
		
		if (Filter.filterLetter)
		    data["filter-letter"] = Filter.filterLetter;
		
		if (artist)
		    data["artist"] = artist;
		    
		if (upc)
		    data["upc"] = upc;
		    
		if (genres) {
            data["filter-genre"] = genres;
        }
            
        if (format) {
            data["filter-format"] = format;
        }

        if (label) {
            data["filter-label"] = label; 
        }
            
        if (page && !isNaN(page)) {
            Filter.currentPage = page;
            data["page"] = page;
        }
        else {
            Filter.currentPage = 1;
            data["page"] = 1;
        } 
        
        if (!artist) {
            Filter.address.setValue("fsearch",search);
		    Filter.address.setValue("fsort",sort);
		    Filter.address.setValue("fgenres",genres);
		    Filter.address.setValue("fformat",format);
		    Filter.address.setValue("flabel",label);
		    Filter.address.setValue("fletter",Filter.filterLetter);
            Filter.address.setValue("page",Filter.currentPage + "");
        }
 
		Filter.ajaxCall = $.ajax({
			 "url": Filter.ajaxUrl
			,"type": "GET"
			,"data": data
			,"dataType": "html"
			,"success": Filter.success
			,"error": Filter.error
		});
	},
	success: function(html, text){

	    var results = html.substring(0,html.indexOf(";#;"));
	    var paging = html.substring(html.indexOf(";#;")+3);
	    
	    Filter.resultsContainer.append(results);
	    Filter.pagingContainers.append(paging);
	    
	    Filter.applyPaging();
	    
	    Filter.resultsContainer.find("a").loop(function(el){
	        var $el = $(el);
	        var url = $el.attr("href");
			var rel = $el.attr("rel");
			
			if (rel == "external") {
	            $el.bind("click",function(e) {
    	            e.preventDefault();
					window.open(url);
	            });
	        }
	    });
	    
	    Filter.ajaxCall = undefined;
	},
	error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus + " "+ errorThrown);
         Filter.ajaxCall = undefined;
    }
};
$(window).load(Filter.init);