/*
	Create a slider into a polaroid styled container
	Author Fulvio Baratta
	Sample code
	$(".container").polaroidize();
*/

(function( $ ){
	$.fn.polaroidize = function( options ) {
		var settings = {
			'width':270,
			'height':300,
			'navBar':true
		};

		if ( options ) { 
			$.extend( settings, options );
		}
		
		return this.each(function() {
			var container = $(this);
			var containerId = container.attr('id');
			var images = container.children('img');
			var firstImage = container.children('img:first');

			/* hides all images and shows the first only */
			images.hide();
			firstImage.show();

			/* creates all wrapper and navigation panels */
			var polaroid = $(document.createElement('div'));
			var h6 = $(document.createElement('h6'));
			var imgLeft = $(document.createElement('div'));
			var imgRight = $(document.createElement('div'));
			var span = $(document.createElement('span'));
			var bottomc = $(document.createElement('div'));
			var bottom = $(document.createElement('div'));
			
			/* set margins and navigation information */
			var fullW = settings.width; // 270
			var fullH = settings.height; // 300
			var marTop = 15;
			var marSide = 18;
			var marBottom = 60;
			var contW = fullW - (marSide*2+3); // 230
			var contH = fullH - (marTop+marBottom); // 220
			
			/* set css for all elements */
			polaroid.css({width:fullW+'px',height:fullH+'px',border:'1px solid rgb(100,100,100)',
				background:'rgb(255,255,255)','-moz-box-shadow':'0px 0px 5px rgb(100,100,100)',
				'-webkit-box-shadow':'0px 0px 5px rgb(100,100,100)',boxShadow:'0px 0px 5px rgb(100,100,100)'});
			polaroid.add(bottom).css({'border-top-left-radius':(fullW/2)+'px 4px',
				'border-top-right-radius':(fullW/2)+'px 4px'});			
  
			bottomc.add(bottom).css({height:'4px',borderTop:'1px solid rgb(100,100,100)',
				borderLeft:'1px solid rgb(100,100,100)',borderRight:'1px solid rgb(100,100,100)'});
			bottomc.css({margin:'-'+(marBottom+3)+'px 0 0 '+marSide+'px',background:'rgb(255,255,255)',zIndex:'996'});

			bottom.css({width:(fullW-1)+'px',marginTop:(marTop+37)+'px',background:'rgb(200,200,200)'});
			
			h6.css({position:'absolute',margin:'-'+(fullH-contH-marTop-15)+'px 0 0 '+marSide+'px',width:(contW)+'px',
				fontFamily:'arial narrow',fontSize:'16px',fontWeight:'normal',textTransform:'uppercase',
				color:'rgb(150,150,150)',letterSpacing:'1px',textShadow:'-1px -1px 0px rgb(50,50,50)'});
				
			span.css({display:'block',position:'absolute',margin:'-20px 0 0 20px',width:(contW-42)+'px',
				textAlign:'center'});
			
			imgLeft.add(imgRight).css({textShadow:'none',border:'1px solid rgb(150,150,150)',display:'inline',
				left:'0px',padding:'0px 5px',borderRadius:'11px',textAlign:'center',
				lineHeight:'20px',fontWeight:'bold',color:'rgb(100,100,100)',cursor:'pointer',
				textShadow:'0px 0px 1px rgb(100,100,100)','-moz-box-shadow':'0px 0px 1px rgb(100,100,100)',
				'-webkit-box-shadow':'0px 0px 1px rgb(100,100,100)',boxShadow:'0px 0px 1px rgb(100,100,100)'});
			imgRight.css({marginLeft:(contW-42)+'px'});
			
			container.css({height:contH+'px',margin:marTop+'px 0px '+marBottom+'px '+marSide+'px',
				overflow:'hidden',border:'1px solid rgb(10,10,10)',backgroundColor:'rgb(10,10,10)',zIndex:'995'});
			container.add(bottomc).css({width:contW+'px','border-top-left-radius':(contW/2)+'px 4px',
				'border-top-right-radius':(contW/2)+'px 4px'});

			/* creates html structure */
			imgLeft.text('<');
			imgRight.text('>');
			span.text(firstImage.attr('title'));
			
			h6.append(imgLeft);
			h6.append(span);
			h6.append(imgRight);
			
			container.wrap(polaroid);
			container.after(bottom);
			container.after(bottomc);
			if (settings.navBar) {
				container.after(h6);
			
				/* binds click events on left arrow */
				imgLeft.click(function(){
					var found = false;
					images.each(function(index){
						if ($(this).css("display")!="none" && !found) {
							found = true;
							images.hide();						
							if ( index == 0 ) {
								span.text(container.children('img:last').attr("title"));
								container.children('img:last').show();
							}
							else {
								span.text(container.children('img:nth-child('+index+')').attr('title'));
								container.children('img:nth-child('+index+')').show();
							}
						}
					});
				});
				/* binds click events on right arrow */
				imgRight.click(function(){
					var childrenLength = images.length;
					var found = false;
					var i;
					images.each(function(index){
						if ($(this).css("display")!="none" && !found) {
							found = true;
							images.hide();
							if ( index == childrenLength - 1 ) {
								span.text(container.children('img:first').attr('title'));
								container.children('img:first').show();
							}
							else {
								i = index+2;
								span.text(container.children('img:nth-child('+i+')').attr('title'));
								container.children('img:nth-child('+i+')').show();
							}
						}
					});
				});
			} // if navBar is checked
			
			/* returns the new container */
			//return polaroid;
		});
		//return retPol;
	};
})( jQuery );