jupiterjs/jquerytab.html

## gistfile1.html
<html>
	<body>
		<ul id='tabs'>
			<li><a href='#starcraft'>Starcraft</a></li>
			<li><a href='#rua'>Robot Unicorn Attack</a></li>
			<li><a href='#fallout'>Fallout</a></li>
		</ul>
		<div id='starcraft'>Info about starcraft</div>
		<div id='rua'>Info about Robot unicorn attack</div>
		<div id='fallout'>Info about Fallout</div>

	<script type='text/javascript'>

my$ = function( selector ) {
	if(this.constructor !== my$){
		return new my$(selector);
	}
	var elements;
	if( typeof selector === 'string' ) {
		elements = document.querySelectorAll(selector);
	} else if( selector.length ){
		elements = selector;
	} else {
		elements = [selector];
	}

	this.length =0;
	[].push.apply(this, my$.makeArray( elements )  ); //[Element1, Element2, Element3]
}
my$.makeArray = function(arraylike){
	var arr = [];
	for(var i =0; i < arraylike.length; i++){
		arr[i] = arraylike[i]
	}
	return arr;
}
my$.fn = my$.prototype;

// my$('#tabs').tabs()
my$.fn.tabs = function(){
	var lis = this.find('li:nth-child(n+2)');
	lis.each(function(i, li){
		var href = my$(li).children().attr("href");
		my$(href).hide()
	})
}


// my$('ul').find('li:gt(0)') ->

my$.prototype.find = function(selector){
	return my$( this[0].querySelectorAll(selector) )
}
my$.fn.show = function(){
	return this.css('display','')
}
my$.fn.hide = function(){
	return this.css('display','none')
}

var getAndSet = function(name, get, setter){

	my$.prototype[name] = function(newVal){

		if( arguments.length >= setter.length  ){
			for(var i =0; i < this.length; i++){
				setter.apply(this[i], arguments)
			}
			return this;
		} else {
			return get.apply(this[0], arguments)
		}
	}
};
getAndSet("val",
	function(){
		return this.value
	},
	function( newVal){
		this.value = newVal;
	});

getAndSet("html",
	function(){
		return this.innerHTML
	},
	function(newHTML){
		this.innerHTML = newHTML;
	});

var getTextNodes = function(el, callback){
	var childNodes = el.childNodes;
	for(var i =0; i < childNodes.length; i++){
		var childNode = childNodes[i];
		if(childNode.nodeType === 3){
			callback(childNode.nodeValue)
		} else {
			getTextNodes(childNode, callback)
		}
	}
}

getAndSet("text",
	function(){
		var text = "";
		getTextNodes(this, function(txt){
			text =  text + txt
		});
		return text;
	},
	function( newText){
		this.innerHTML ="";
		var textNode = document.createTextNode(newText);
		this.appendChild(textNode);
	});

getAndSet("attr",
	function(attrName){
		return this.getAttribute(attrName)
	},
	function(attrName, attrValue){
		return this.setAttribute(attrName, attrValue)
	})

getAndSet("css",
	function(styleProp){
		return document
                  .defaultView
                  .getComputedStyle( this, null )
                  .getPropertyValue( styleProp )
	},
	function(styleProp, styleValue){
		return this.style[styleProp] = styleValue;
	})


my$.prototype.children = function(){
	var el = this[0],
		arr = [],
		children = el.childNodes;
	for(var i =0; i < children.length; i++){
		if(children[i].nodeType === 1){
			arr.push(children[i])
		}
	}
	return new my$( arr );
};


my$.prototype.parent = function(){
	return new my$([this[0].parentNode])
}
my$.prototype.next = function(){
	var current = this[0].nextSibling;
	while(current && current.nodeType !== 1){
		current = current.nextSibling;
	}

	return new my$(current ? [current] : []);
}

my$.prototype.each = function(callback){
	for(var i =0; i < this.length; i++){
		callback.call(this[i], i, this[i])
	}
}

my$.prototype.bind = function(event, callback){
	this.each(function(i, el){
		el.addEventListener(event, callback, false)
	})
}

		my$('#tabs').tabs();


		//console.log(content.text() );
		//content.text("<li> tags are my favorite")
	</script>
	</body>
</html>

## jquerytab.html
<html>
	<body>
		<ul id='tabs'>
			<li><a href='#starcraft'>Starcraft</a></li>
			<li><a href='#rua'>Robot Unicorn Attack</a></li>
			<li><a href='#fallout'>Fallout</a></li>
		</ul>
		<div id='starcraft'></div>
		<div id='rua'></div>
		<div id='fallout'></div>


		<script type='text/javascript'
			src='jquery.js'></script>
	<script type='text/javascript'>

$.fn.tabs = function(){
	var getPanelFromButton = function(li){
		return $( $(li).children().attr("href") );
	}

	var lis = this.find('li:nth-child(n+2)');
	lis.each(function(i, li){
		getPanelFromButton(li).hide();
	})
	var firstLi = this.find('li:first-child').addClass("active")
	var firstDiv = getPanelFromButton(firstLi[0]),
		url = firstDiv[0].id+".html";

	$.ajax({
		url: url,
		type: "GET",
		success : function(text){
			firstDiv.html(text);
		},
		dataType :"text"
	})

	var ul = this;

	this.delegate('li','click', function(ev){
		var oldActive = ul.find('.active');
		getPanelFromButton( oldActive[0] ).hide()
		oldActive.removeClass('active')
		getPanelFromButton( this ).show();
		$(this).addClass('active');
		ev.preventDefault();
	})
};


$('#tabs').tabs();

		$('#foo').bind('scroll', function(){

			if($(this).scrollTop() + this.clientHeight == this.scrollHeight){
				$(this).append("<p>Keep going</p>")
			}
		})

		//console.log(content.text() );
		//content.text("<li> tags are my favorite")
	</script>
	</body>
</html>
	<html>
	<body>
	<ul id='tabs'>
	<li><a href='#starcraft'>Starcraft</a></li>
	<li><a href='#rua'>Robot Unicorn Attack</a></li>
	<li><a href='#fallout'>Fallout</a></li>
	</ul>
	<div id='starcraft'>Info about starcraft</div>
	<div id='rua'>Info about Robot unicorn attack</div>
	<div id='fallout'>Info about Fallout</div>

	<script type='text/javascript'>

	my$ = function( selector ) {
	if(this.constructor !== my$){
	return new my$(selector);
	}
	var elements;
	if( typeof selector === 'string' ) {
	elements = document.querySelectorAll(selector);
	} else if( selector.length ){
	elements = selector;
	} else {
	elements = [selector];
	}

	this.length =0;
	[].push.apply(this, my$.makeArray( elements ) ); //[Element1, Element2, Element3]
	}
	my$.makeArray = function(arraylike){
	var arr = [];
	for(var i =0; i < arraylike.length; i++){
	arr[i] = arraylike[i]
	}
	return arr;
	}
	my$.fn = my$.prototype;

	// my$('#tabs').tabs()
	my$.fn.tabs = function(){
	var lis = this.find('li:nth-child(n+2)');
	lis.each(function(i, li){
	var href = my$(li).children().attr("href");
	my$(href).hide()
	})
	}


	// my$('ul').find('li:gt(0)') ->

	my$.prototype.find = function(selector){
	return my$( this[0].querySelectorAll(selector) )
	}
	my$.fn.show = function(){
	return this.css('display','')
	}
	my$.fn.hide = function(){
	return this.css('display','none')
	}

	var getAndSet = function(name, get, setter){

	my$.prototype[name] = function(newVal){

	if( arguments.length >= setter.length ){
	for(var i =0; i < this.length; i++){
	setter.apply(this[i], arguments)
	}
	return this;
	} else {
	return get.apply(this[0], arguments)
	}
	}
	};
	getAndSet("val",
	function(){
	return this.value
	},
	function( newVal){
	this.value = newVal;
	});

	getAndSet("html",
	function(){
	return this.innerHTML
	},
	function(newHTML){
	this.innerHTML = newHTML;
	});

	var getTextNodes = function(el, callback){
	var childNodes = el.childNodes;
	for(var i =0; i < childNodes.length; i++){
	var childNode = childNodes[i];
	if(childNode.nodeType === 3){
	callback(childNode.nodeValue)
	} else {
	getTextNodes(childNode, callback)
	}
	}
	}

	getAndSet("text",
	function(){
	var text = "";
	getTextNodes(this, function(txt){
	text = text + txt
	});
	return text;
	},
	function( newText){
	this.innerHTML ="";
	var textNode = document.createTextNode(newText);
	this.appendChild(textNode);
	});

	getAndSet("attr",
	function(attrName){
	return this.getAttribute(attrName)
	},
	function(attrName, attrValue){
	return this.setAttribute(attrName, attrValue)
	})

	getAndSet("css",
	function(styleProp){
	return document
	.defaultView
	.getComputedStyle( this, null )
	.getPropertyValue( styleProp )
	},
	function(styleProp, styleValue){
	return this.style[styleProp] = styleValue;
	})


	my$.prototype.children = function(){
	var el = this[0],
	arr = [],
	children = el.childNodes;
	for(var i =0; i < children.length; i++){
	if(children[i].nodeType === 1){
	arr.push(children[i])
	}
	}
	return new my$( arr );
	};



	my$.prototype.parent = function(){
	return new my$([this[0].parentNode])
	}
	my$.prototype.next = function(){
	var current = this[0].nextSibling;
	while(current && current.nodeType !== 1){
	current = current.nextSibling;
	}

	return new my$(current ? [current] : []);
	}

	my$.prototype.each = function(callback){
	for(var i =0; i < this.length; i++){
	callback.call(this[i], i, this[i])
	}
	}

	my$.prototype.bind = function(event, callback){
	this.each(function(i, el){
	el.addEventListener(event, callback, false)
	})
	}

	my$('#tabs').tabs();



	//console.log(content.text() );
	//content.text("<li> tags are my favorite")
	</script>
	</body>
	</html>