var DataFilter = new Class.create({
	initialize: function(options) {
		
		this.dataWrapper = options.dataWrapper;
		this.dataWrapper.style.display="none";
		this.dataItems = this.dataWrapper.childElements("li");
		this.paginationWrapper = options.paginationWrapper;
		this.paginationDataInsert = options.paginationDataInsert;
		
		this.topic = window.location.search.toQueryParams().topic;
		this.grade = window.location.search.toQueryParams().grade;
		
		$("search-results-description").style.display="block";
	
		this.filterResults();
		this.populateSearchWidgetFields();	
	},
	
	populateSearchWidgetFields: function() {
		var topicsSelectArray = $$("#classroom-alltopics option");
		var gradesSelectArray = $$("#classroom-allgrades option");
		$("classroom-alltopics").selectedIndex= topicsSelectArray.indexOf($$("#classroom-alltopics option[value='"+this.topic+"']").first());	
		$("classroom-allgrades").selectedIndex= gradesSelectArray.indexOf($$("#classroom-allgrades option[value='"+this.grade+"']").first());	
	},
	
	filterResults: function() {
		var hasResults = false;
		
		if (this.topic == "") {this.topic = "all";}
		if (this.grade == "") {this.grade = "all";}
		
		this.dataItems.each(function(el, i) {
			if(el.hasClassName(this.topic) && el.hasClassName(this.grade)) {
				this.paginationDataInsert.insert(el.cloneNode(true));
				hasResults = true;
			}
		}, this);

		if (!hasResults) {
			this.topic = "all";
			this.grade = "all";
			this.dataItems.each(function(el, i) {
				this.paginationDataInsert.insert(el.cloneNode(true));
			}, this);
		}

		this.createPagination();
		this.changeSearchResultText();
	},
	
	createPagination: function() {
		new Paginator(this.paginationWrapper);
	},
	
	removePagination: function() {
		$("pagination").innerHTML="<li><ul id='paginated-data'></ul></li>";
	},
	
	changeSearchResultText: function() {
		var title;
		var grade;
		switch(this.topic) {
			case "bhm":
			title = "Black History";
			break;
			
			case "apahm":
			title = "Asian Pacific American Heritage";
			break;
			
			case "hhm":
			title = "Hispanic Heritage";
			break;
			
			default:
			title = "Black History, Asian Pacific American Heritage, Hispanic Heritage";
		}
		
		switch(this.grade) {
			case "k2":
			grade = "K-2 Grade levels";
			break;
			
			case "third5":
			grade = "3-5 Grade Levels";
			break;
			
			case "six8":
			grade = "6-8 Grade Levels";
			break;
			
			case "nine12":
			grade = "9-12 Grade Levels";
			break;
			
			default:
			grade = "All Grade levels";
		}	
		
		$$(".topic-title").invoke("update", title);
		$$(".grade-title").invoke("update", grade);
	}
});

var LessonPlanDetailBarControls = new Class.create({
	initialize: function() {
		$("close-trigger").observe("click", function() {
			window.close();
		});
		
		// Need to respond to key press for accessibility
		$("close-trigger").observe("keypress", function(e) {
			if (e.keyCode == Event.KEY_RETURN) {
				window.close();
			}
		});

		$("print-trigger").observe("click", function() {
			window.print();
		});	

		// Need to respond to key press for accessibility
		$("print-trigger").observe("keypress", function(e) {
			if (e.keyCode == Event.KEY_RETURN) {
				window.print();
			}
		});

		$("lesson-content").select("a").first().writeAttribute("href", $("lessonplan-full-dl").getAttribute("href"));
	}
});




var RandomizeDisplayedContent = new Class.create({
	initialize: function(selectors) {
		this.els = $$(selectors);
		this.content.hide = this.content.hide.bind(this); 
		this.content.randomize = this.content.randomize.bind(this);
		this.content.randomize();
	},
	content: {
		hide: function() {
			this.els.invoke("setStyle", {
				display: "none"
			});
		},
		
		show: function(el) {
			el.style.display="block";
		},
		
		randomize: function() {
			this.content.hide();
			var length = this.els.length;
			var randomizedIndex = Math.ceil(length*Math.random());
			// consider 0
			randomizedIndex -= 1;
			this.content.show(this.els[randomizedIndex]);
		}
	}
});



/**
 * @author pop webdev [tw]
 * @version 0.1.1
 * @classDescription Handles Pagination of an inline collection. The collection should the form of a <ul> nested inside a master <ul>
 * @return {Object}	Returns a new  object.
 * The class depends on Prototype v1.6.
 */
 
var Paginator = Class.create({
	initialize: function(elMasterList, options) {
		// set options
		this.options = Object.extend({
			initialPageIndex: 0,
			itemsPerPage: 4,
			disableClassName: 'disabled',
			selectedClassName: 'selected'
		}, options || {});
		// element check
		if($(elMasterList)){ 
			this.masterList = $(elMasterList);
			this.namespace = elMasterList.identify();	// Create a namespace to prepend all IDs of generated markup (GS)
		} else {
			return;
		}
				
		// get dom references and set properties based on original list.
		// get the li count of the nested ul (performance items)
		var firstLI = this.masterList.down('li').addClassName('paginator_page').writeAttribute('id', this.namespace+'-paginator_page_0');
		this.items = firstLI.select('ul > li');
		this.itemCount = this.items.size();
		
		// split first li.paginator_page ul into separeate ul's and insert into generated li.paginator_page nodes
		var aPages = this.items.eachSlice(this.options.itemsPerPage);//, function(listItem){});
		this.pageCount = aPages.size();
		
		if(this.pageCount > 1){			
			/* 
				for all pages except the first, create a node like
				<li class="paginator_page" id="paginator_page_i">
					<ul class="[className from original nested ul]">
						list items in aPage[i]	
					</ul>
				</li>
			*/
			var sInnerUlClassName = firstLI.down('ul').className; // get any css classnames from inner UL
			for(var i=1, len = this.pageCount; i < len; ++i){
				var elPageLi = new Element('li', {'class': 'paginator_page', 'id': this.namespace+'-paginator_page_' + i});
				var elInnerUL = new Element('ul', {'class': sInnerUlClassName});
				for(var j=0; j < aPages[i].size(); j++){
					elInnerUL.insert(aPages[i][j]);
				}
				elPageLi.insert(elInnerUL);
				this.masterList.insert(elPageLi);
			}
		}
		else{			
			return;// there's only one page, no pagination needed.
		}

		// add li.paginav controls via dom
		var elTopControls = new Element('li', {'class': 'paginav paginav-top', id: this.namespace+'-paginav_top'});
		this._addControlList(elTopControls);
		this.masterList.insert({top: elTopControls});
		this.paginavTop = elTopControls;

		var elBottomControls = new Element('li', {'class': 'paginav paginav-bot', id: this.namespace+'-paginav_bottom'});
		this._addControlList(elBottomControls);
		this.masterList.insert({bottom: elBottomControls});
		this.paginavBottom = elBottomControls;
		
		this.viewPage(this.options.initialPageIndex);
	},
	
	// creates a ul filled with pagination links, 
	// attaches an event listener, 
	// and appends the node to supplied element.
	_addControlList: function(elLi){
		var elControlList = new Element('ul');
			var elPrevNavItem = new Element('li', {'class': 'previous'});
				var elPrevNavLink = new Element('a', {
					'rel': 'previous',
					'href': '#paginator_top',
					'title': 'This will show the previous page'
				}).update('<span>Previous</span>');
				elPrevNavItem.insert(elPrevNavLink);
			elControlList.insert(elPrevNavItem);
			
			for(var i=0; i < this.pageCount; i++){
				//<li class="individual"><a href="#paginator_page_0">1</a></li>
				var pageNum = i+1;
				var elPageItem = new Element('li', {'class': 'individual'});
					var elPageLink = new Element('a', {
						'href': '#paginator_top', 
						'rel': 'paginator_page_' + i, 
						"title": "This will show new content below"
					}).update("<span class='offscreen'>Page</span> " + pageNum + " <span class='offscreen'>-This will show new content below</span>");
					
					elPageItem.insert(elPageLink);
				elControlList.insert(elPageItem);
			}
			
			var elNextNavItem = new Element('li', {'class': 'next'});
				var elNextNavLink = new Element('a', {
					'rel': 'next',
					'href': '#paginator_top',
					'title': 'This will show the next page'
					}).update('<span>Next</span>');
				elNextNavItem.insert(elNextNavLink);
			elControlList.insert(elNextNavItem);
		
		// add event handler
		elControlList.observe('click', this.__paginavListClick.bindAsEventListener(this));
		// add new nodes to provide li		
		elLi.insert(elControlList);
	},
	
	// calls updatePaginav on both top and bottom nav
	updatePaginavs: function(){
		this.updatePaginav(this.paginavTop);
		this.updatePaginav(this.paginavBottom);
	},

	// sets disabled and selected classes
	updatePaginav: function(elPaginav){
		// adjust next/previous
		var elPrevNavItem = elPaginav.down('li.previous');
		(this.currentPageIndex > 0) ? elPrevNavItem.removeClassName(this.options.disableClassName) : elPrevNavItem.addClassName(this.options.disableClassName);

		var elNextNavItem = elPaginav.down('li.next');
		(this.currentPageIndex < (this.pageCount-1)) ? elNextNavItem.removeClassName(this.options.disableClassName) : elNextNavItem.addClassName(this.options.disableClassName);

		var elNavItems = elPaginav.select('li.individual');
		
		//var elNavItems = elPaginav.childElements();
		for(var i = 0, len = elNavItems.size(); i < len;i++){
			//var pageIndex = /\d+$/.exec(dest)[0];
			(i == this.currentPageIndex) ? elNavItems[i].addClassName('selected') : elNavItems[i].removeClassName('selected');
		}
	},
	
	__paginavListClick: function(e){
		
		var el = e.element();
		var elLi, elLnk;
		if(el.nodeName == 'UL'){return;}
		//e.stop();
		
		if(el.nodeName != 'LI'){elLi = $(el).up('li');}
		else{elLi = $(el);}
		elLnk = elLi.down('a');
		
		var dest = elLnk.readAttribute('rel');
		//console.log(dest);
		switch(dest){
			case 'previous':
				this.viewPreviousPage();
				break;
			case 'next':
				this.viewNextPage();
				break;
			default:
				var pageIndex = /\d+$/.exec(dest)[0];	
				this.viewPage(parseInt(pageIndex));
				break;
		}
	},
	
	// methods
	viewPage: function(pageIndex){
		this.currentPageIndex = pageIndex;
		// hide all but given page	
		var pageLIs = this.masterList.select('li.paginator_page');
		for(var i=0, len = pageLIs.size(); i < len ;i++){
			// all that for this.
			(i == pageIndex) ? pageLIs[i].show() : pageLIs[i].hide();
		}
		this.masterList.fire('paginator:page_selected', {'page': pageLIs[pageIndex], 'pageIndex': pageIndex});
		this.updatePaginavs()
	},
	
	viewAll: function(){
		this.masterList.select('li.paginator_page').invoke('show');
		this.paginavTop.hide();
		this.paginavBottom.hide();	
	},
		
	viewNextPage: function(){
		if(this.currentPageIndex < (this.pageCount-1)){
			this.viewPage(this.currentPageIndex + 1);
		}
	},

	viewPreviousPage: function(){
		if (this.currentPageIndex > 0) {
			this.viewPage(this.currentPageIndex - 1);
		}
	}
});
/*
document.observe('dom:loaded', function(){
	myPaginator = new Paginator($('paginator'),{initialPageIndex: 0, itemsPerPage: 4, disableClassName: 'disabled', selectedClassName: 'selected'});
});
*/

// create jump links on lessons (created by rong)
document.observe("dom:loaded", function() {
	if ($$('div.lessonplan-introduction').length == 0) return;//only load in lessonse
	var jlDiv = new Element('div',{'class':'jumplinks'});
	$$("#content_body").first().insert({'top':'<a name=jumptop></a>'});
	$$(".secondary_column").first().insert({
		top: jlDiv
	});
	jlDiv.insert(new Element('div', {'class':'top'}));
	var contentDiv = new Element('div', {'class':'content'});
	contentDiv.insert('<h2>Jump to</h2>');
	jlDiv.insert(contentDiv);
	$$('.jumpto').each(function(el, index){
		//console.log(el.innerText)
		var anchorName = el.innerHTML.replace(/ /g, '') + index;
		var link = new Element('a', {
			'href': '#' + anchorName,
			'title': 'Go to ' + el.innerHTML
		}).update(el.innerHTML);
		el.insert({before:new Element('a', {'name':anchorName, 'class': 'jumpAnchor'})});
		if (index > 0){
			el.insert({before:new Element('a', {'href':'#jumptop', 'class': 'backToTop'}).update('Back to Top')});
		}
		el.insert({before:new Element('a', {'name':anchorName, 'class': 'jumpAnchor'})});
		if (index > 0){
			el.insert({before:new Element('div', {'class': 'hr'})});
		}
		contentDiv.insert(link);
	});
	jlDiv.insert(new Element('div', {'class':'bottom'}));
});



var POP_popup = Class.create();
POP_popup.prototype = {
    initialize: function() {
        var popup_class = $$('a.popup');
        var target_blank = $$('a[target^=_blank])');
        popup_class.invoke('observe', 'click', this.__Click.bindAsEventListener(this));
        target_blank.invoke('observe', 'click', this.__Click.bindAsEventListener(this));
    },

    __Click: function(e) {

        var el = Event.element(e);
        var url = el.readAttribute('href');

        // Does the element have a title? If so use that as the window name
        if (el.readAttribute('title')) {
            var windowName = escape(el.readAttribute('title'));
        }
        else {
            var windowName = "popup";
        }

        // Check for options set in the rel
        if (el.readAttribute('rel')) {
            var options = el.readAttribute('rel');
        }
        // if not use some default values
        else {
            var options = "width=800,height=600,location=yes,menubar=yes,status=yes,toolbar=yes,scrollbars=yes";
        }
		
		// Open window and give it focus
        var win = window.open(url, "Popup", options);
        if (window.focus) {
            win.focus()
        }

        // Stop default browser event
        Event.stop(e);
    }
}