$(document).ready(function() {

	/* Redirect for Mobile

	var ww = parseInt($(window).width());
	var wh = parseInt($(window).height());
	var tt = (ww+wh);
	if(($(window).width()<$(window).height()) || (tt<1000)){
		window.location.replace("/mobile/")
	}

	// Make Super Last and Super Next Buttons.

	*/
	
	var allDross;
	var notes;

	/* Get the Damn Dross */
	$.getJSON('http://www.dross.com/dross.php?jsoncallback=?', function(dross) {
		allDross = dross;
		var limit = 2;
		var count = 0;
		var open = 0; // image to go to if hashed in.
		// Scan the Dross for Hash/BookMark/Link
		$.each(allDross, function(i){
			if(location.hash!=''&&location.hash!="#dross_comics"){
				var file_path = allDross[i].img; 
				var file_name = file_path.substr(file_path.lastIndexOf("/")+1,file_path.length);
					imagename = "#"+file_name.substr(6, (file_name.lastIndexOf('.')-6));
				if(imagename==location.hash){
					limit=i; open=1;
					open_img = file_name;
				}
			}
		});
		// Build the Damn Dross Dom
		$.each(allDross, function(i){
			if(count <= limit){
				makeDross(allDross[count].img,allDross[count].tit,allDross[count].txt);
			}
			count++;
		});
		if(open!=0){ // Scroll to and Open the Hash Passed Dross
			$.scrollTo($(document).width(), 800, { axis:'x', onAfter: function() {
				var what = $('a[href*="' + open_img + '"]').parent().parent().click();
			}});
		}
	});

	// HOW YOU LOST YOUR HIGHTLIGHT
	

	/* Hover Highlight 	
	$('.drossPanel').live('mouseover mouseout', function(e) {
		if(notes!="open"){ // disable in expanded layout
			if (e.type == 'mouseover') {
				$(this).stop(true,true).toggleClass('high', 1000);
			} else {
				$(this).stop(true,true).toggleClass('high', 1000);
			}
		}
	});
	*/

	// Create a Drossy Panel and Posish that ish.
	function makeDross(img,tit,txt){
		var win_width = $(window).width();
		var $drossFrame = $('<div class=drossFrame />');
		var $drossPanel = $('<div class=drossPanel />');
		var $drossTitle = $('<div class=drossTitle />');
		//var $drossNotes = $('<div class=drossNotes />');
		var $drossClose = $('<div class=drossClose />');
		var $drossLinks = $('<a />');
			$drossLinks.attr("href","http://www.dross.com/sketchpad/?i="+img+"&v=date#"+img);
		var $drossImg = $('<img class=drossImage />');
			$drossImg.attr("src","http://www.dross.com/sketchpad/images/"+img);
		var $drossNfo = $('<div class=nfo />');
		$drossNfo.html(tit);
		//$drossNotes.html(txt);
		$drossClose.html("close");
		$drossTitle.append($drossNfo);
		$drossLinks.append($drossImg);
		//$drossPanel.append($drossNotes);
		$drossPanel.append($drossTitle);
		$drossPanel.append($drossLinks);
		$drossPanel.append($drossClose);
		$drossFrame.append($drossPanel);

		$drossPanel.append(txt);
				
		// Calculate the placement and express as percentage
		leftNum = (((($("#dross > div").size()*32.5)+2.5)*.01)*win_width);
		leftNum = ((leftNum/win_width)*100);
		$drossFrame.css("left",leftNum+"%");
		$drossFrame.attr("drosspos",$("#dross > div").size());
		$('#dross').append($drossFrame);
	}

	// Next Dross
	$('.next').click(function(e) {
		e.preventDefault();
		// Close any open panels
		$(".drossClose:visible").each(function() {
			$(this).trigger('click');
		});
		// Close to the edge? Add More Dross
		var dif = $(document).width() - $(window).scrollLeft();
		var	loc = Math.round(dif/10)*10;//round percent calcs
		var win = Math.round($(window).width()/10)*10;
		if(loc == win || $(window).scrollLeft()==0){
			// attach more panels to dom.
			var count = 0;
			var start = $("#dross > div").size();
			var limit = start+2;
			var total = allDross.length;
			// Build the Damn Dross Dom
			$.each(allDross, function(i){
				if(count >= start && count <= limit){
					makeDross(allDross[count].img,allDross[count].tit,allDross[count].txt);
				}
				count++;
			});
		}
		// Scroll Ye Olde Dross
		var wdw = parseInt($(window).width());
		var bit = Math.floor($(window).width()*.025); // -fug;
		var next = '+='+((wdw-bit));
		$.scrollTo(next, 800, { axis:'x' } );
	});

	// Last Dross
	$('.last').click(function(e) {
		e.preventDefault();
		// Close any open panels
		$(".drossClose:visible").each(function() {
			$(this).trigger('click');
		});
		$("div.drossFrame").each(function(i){
			if($(this).offset().left>$(window).scrollLeft()){
				var nth = $("div#dross > div:nth-child("+(i-2)+")");
				var bit = $(window).width()*.025;
				var last = 0;
				if(nth.offset()){ last = (nth.offset().left-bit);}
				if(last<0){ last=0;}
				$.scrollTo(last, 800, { axis:'x' });
				return false;
			}
		});
	});

	/* Let Dross Expand with Notes */
	$("#dross").delegate("div.drossFrame", "click", function(e) {
		e.preventDefault();
		drossFrame = $(this);
		drossImage = drossFrame.find("img");
		drossPanel = drossFrame.find(".drossPanel");
		drossTitle = drossFrame.find(".drossTitle");
		drossNotes = drossFrame.find(".drossNotes");
		drossClose = drossFrame.find(".drossClose");

		// Set Panel/Image Style
		drossPanel.css("overflow","visible");
		drossPanel.css("border","none");
		drossImage.css("border","2px solid #fff");
		
		// Place the title at the top						
		drossTitle.show();
		drossClose.show();
		$('#dro').hide();
		drossNfo = drossFrame.find(".nfo").css("padding-bottom","4px");
		drossTitle.css("text-align","center").css("width","100%");
		drossTitle.css("position","fixed").css("border","0");
		drossTitle.css("border-bottom","1px solid #FFF");
		drossTitle.css("top","-5px").css("left","0");

		// Left Edge of Visible Window
		leftBase = ( $(window).scrollLeft() + ($(window).width() * .025));

		// Open the Notes if Not Already
		currFrame = $(this).attr("curr");
		if(currFrame!="y"){
				notes="open";

			// Hide the unclicked Dross.
			$(this).attr("curr","y");
			$(".drossFrame").each(function(i){
				if($(this).attr("curr")=="y"){
					$(this).css("visibility","visible");
				} else{
					$(this).css("visibility","hidden");
				}
			});

			// Make sure image props be loaded yo
			$("<img>").attr("src", $(drossImage).attr("src")).load(function() {

				var img_width  = Math.round(this.width);
				var img_height = Math.round(this.height);
				var imgAspRatio = img_width / img_height;

				var win_width   = Math.round($(window).width());
				var win_height  = Math.round($(window).height());
				var winAspRatio = win_width / win_height;

				var bot_buffer  = win_height*.09;
				var win_width	= win_width-(win_width*.025);
				var win_height  = (win_height-bot_buffer);

				var new_height, new_width;

				if(imgAspRatio > winAspRatio){
					if(img_width > win_width){
						imgAspRatio = win_width / img_width;
						var new_height = (img_height * imgAspRatio);
					} else if (img_height > win_height){
						imgAspRatio = win_height / img_height;
						var new_width = (img_width * imgAspRatio);
					} else {
						imgAspRatio = win_width / img_width;
						var new_height = (img_height * imgAspRatio);
					}
				} else {
					var new_width = Math.round(imgAspRatio * win_height);
					var new_height =  win_height;
				}

				//alert(" \nnew_width:"+new_width + " \nnew_height:"+new_height+ " \ncak:"+cak);
				
				// Ghost to keep doc.width
				ghost = drossFrame.clone();
				ghost.removeAttr("curr");
				ghost.attr("ghost","ghost");
				ghost.css("visibility","hidden");
				$('#dross').append(ghost);

				// Animate the Drossy Panel
				drossFrame.animate({
					left: leftBase
					}, 300, function() {
				});

				// Resize Dross.
				drossImage.animate({
					width: new_width,
					height: new_height
					}, 300, function(){

					// Extend the Frame for Notes
					drossFrame.css("width","95%");
					drossFrame.css("height",new_height+4+"px");
					drossFrame.children('.drossPanel').css("width","100%");

				});

			// Set A Hash Using File Name
			var file_path = drossImage.attr("src"); 
			var file_name = file_path.substr(file_path.lastIndexOf("/")+1,file_path.length);
			var imagename = file_name.substr(6, (file_name.lastIndexOf('.')-6));
			location.hash = imagename;	
				
			// Set the Page Title Using Image Title
			document.title = "DROSS COMICS - " + drossTitle.text();
				
			});
		}
	});

	/* Close the Notes - Revert to Triptych */
	$("#dross").delegate("div.drossClose", "click", function(e) {
		e.preventDefault();
		e.stopPropagation();
		drossPanel = $(this).parent();
		drossFrame = drossPanel.parent();
		drossImage = drossPanel.find("img");
		drossTitle = drossPanel.find(".drossTitle");
		drossNotes = drossPanel.find(".drossNotes").css("display","none");
		drossClose = drossPanel.find(".drossClose").css("display","none");
		notes = "closed";

		// Revert Border Styles
		drossPanel.removeAttr("style");
		drossPanel.css("overflow","hidden");

		// Reset Title, Panel and Frame
		drossImage.removeAttr("style");
		drossTitle.removeAttr("style");
		$('#dro').show();

		drossPanel.css("width","91%");
		drossFrame.css("height","91%");
		drossFrame.css("background-color","#150000");
		drossFrame.css("display","block");
		drossFrame.css("width","32.5%");
		drossFrame.removeAttr("curr");

		// Unhide the other panels
		$(".drossFrame").each(function(i){
			if($(this).attr("ghost")=="ghost"){
				$(this).remove();
			}
			$(this).css("visibility","visible");
			dpos = $(this).attr("drosspos");
			$(this).css("left",((dpos*32.5)+2.5)+"%");
		});
		// Revert Page Title and Hash
		document.title = "DROSS COMICS - ANARCHIST ADVENTURES IN AMERICA";
		location.hash = "dross_comics";
	});

});