//    _____________  ________________    ___   ______
//   / __/_  __/ _ \/ __/ __/_  __/ /   / // |/ / __/
//  _\ \  / / / , _/ _// _/  / / / /__ / //    / _/  
// /___/ /_/ /_/|_/___/___/ /_/ /____/__/_/|_/___/  
// 
//  Streetline Solid Black. v0.3.3
//  www.streetlinemedia.com
// 

// Debug
var debug = 0;

// Variables
var activePane = 0;
var countPane = 1;
var activeBrand = 1;

$(document).ready(function() {
	
	countPane = $("#panes > .pane").size();
	
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var negativeWidth = (-1 * $(window).width() );

	if(debug==1){
	  console.log("Welcome to Debug!");
	  console.log("countPane: " + countPane);
	  console.log("WW: "+windowWidth);
	}

	// Set the panes and the containing cube to the window width
	$('.pane').css({'width' : windowWidth});
	$('#cube').css({'width' : windowWidth});	

    // Camera Movements
    $('#move-right').click(function(){
    	var targetPaneRight = activePane + 1;
    	var countPane = $("#panes > .pane").size();
		move(targetPaneRight);
		if(activePane >= countPane) {
			activePane == countPane;
		}else{
			activePane = targetPaneRight;
		}
    });
    
    $('#move-left').click(function(){
    	var targetPaneLeft = activePane - 1;
    	var countPane = $("#panes > .pane").size();
		move(targetPaneLeft);
		activePane = targetPaneLeft;
    });
    
    
    // Nav Pane
   	$(".nav-pane-1").click(function(){move(0);});
   	$(".nav-pane-2").click(function(){move(1);});
   	$(".nav-pane-3").click(function(){move(2);});
   	$(".nav-pane-4").click(function(){move(3);});
   	$(".nav-pane-5").click(function(){move(4);});
   	$(".nav-pane-6").click(function(){move(5);});
   	$(".nav-pane-7").click(function(){move(6);});

	// Pane Resizing
    var resizeTimer = null;
    $(window).bind('resize', function() {
		resizePanes();
    });

	// Initial Setup
	$('#panes').css({'left' : 0, 'height' : windowHeight });
	setArrows(activePane,countPane);
	
	$('body').append('<div id="mask"></div>');
	$('#mask').fadeTo(1500, 0, function() {
      $('#mask').remove()
    });
    
	// Overlays 
	 $(".overlay-visual").fancybox({
	 	'padding':'0',
	 	'overlayColor':'#111',
	 	'overlayOpacity':0.9
	 });
	 
	 $(".overlay-mobile").fancybox({
	 	'padding':'0',
	 	'overlayColor':'#111',
	 	'overlayOpacity':0.9
	 	
	 });

	 $(".overlay-motion").fancybox({
		'type': 'iframe',
		'transitionIn' : 'elastic',
		'transitionOut' : 'elastic',
		'width' : 650,
		'height': 365,
		'showCloseButton' : true,
		'padding':'0',
		'overlayColor':'#111',
		'overlayOpacity':0.9
	 });
	
	// Portfolio Brand
	
	$(".brand-show").fancybox({
	 	'padding':'0',
	 	'overlayColor':'#111',
	 	'overlayOpacity':0.9
	 	
	 });
	
	// Portfolio Effects
	
	$("#scroll-online").scrollable().navigator({
		navi	:	'#navigator-online'
		});
	
	$("#scroll-mobile").scrollable().navigator({
		navi	:	'#navigator-mobile'
		});
	
	$("#scroll-motion").scrollable().navigator({
		navi	:	'#navigator-motion'
		});

	 
	 // Portfolio Motion
	$(".scroll-motion").scrollable({
		circular: 'true',
	});
	
	$("#scroll-motion-left").click(function(){
		$(".scroll-motion").scrollable().prev();
	});
	
	$("#scroll-motion-right").click(function(){
		$(".scroll-motion").next();
		$(".scroll-motion").scrollable().next();
	});
	 
	 // Portfolio Digital
	$(".scroll-digital").scrollable({
		circular: 'true',
	});
	
	$("#scroll-digital-left").click(function(){
		$(".scroll-digital").scrollable().prev();
	});
	
	$("#scroll-digital-right").click(function(){
		$(".scroll-digital").next();
		$(".scroll-digital").scrollable().next();
	});

});
//
//
//$(function loadBrand(imageid,imagealt) {
//    var img = new Image();
//    $(img).load(function () {
//        //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
//        $(this).hide();
//        $(".paper div:last").removeClass('loading').append(this);
//        $(this).fadeIn();
//    }).error(function () {
//        // notify the user that the image could not be loaded
//    }).attr('src', 'http://farm3.static.flickr.com/2405/2238919394_4c9b5aa921_o.jpg');
//});


function fadeOverlay() {
	$('#mask').show();
	if (overlayFlag == 0) {
		$('#mask').fadeTo('slow', 0.9, function() {
	      overlayFlag = 1;
	    });
	}else {
		$('#mask').fadeTo('slow', 0, function() {
			$('#mask').hide();
	     	 overlayFlag = 0;
	    });
	}

};

function setArrows(activePane,countPane) {
	var lastPane = countPane - 1 ;
	if(activePane==0){
		$("#move-left").fadeOut();
	}else{
		$("#move-left").fadeIn();
	}
	if(activePane>=lastPane){
		$("#move-right").fadeOut();
	}else {
		$("#move-right").fadeIn();
	}
};

function move(targetPane) {
    var item_width = $('#panes div.pane').outerWidth();
    var left_indent = -1 * (targetPane * item_width);   
   	
   	 if(left_indent>0) {
    	// Pane's Edge
    } else if (targetPane>=countPane){
    	// Right Edge

    } else {
		// Move Action
	    $('#panes:not(:animated)').animate({'left' : left_indent},1000,function(){       
			activePane = targetPane;
	   	    setArrows(activePane,countPane);    
	    }); 
    }
    return activePane;
};

function resizePanes() {
    var item_width = $('#panes div.pane').outerWidth();
    var left_indent = -1 * (activePane * item_width);
	// Resize both the pane element and the containing cube
	$('.pane').css({'width' : $(window).width() });
	$('#cube').css({'width' : $(window).width() });
	$('#panes').css({'left' :  left_indent, 'height' : $(window).height() });
};

function Init() {

};