// JavaScript Document
$(document).ready(function () {

    var browserWindow = $(window);
    var mainNav = $('#nav');
    var nav1 = $('#nav1');
    var nav2 = $('#nav2');
    var nav3 = $('#nav3');
    var aboutPannel = $('#about');
    var bg = $("#bg");
    var content = $('#content');    
	var bgFP = $('#bgFP');
    var workPannel = $('#work');
    var contactPannel = $('#contact');
    var windowHeight = $(browserWindow).height();
    var windowWidth = $(browserWindow).width();
    var errorWindow = $("#error");
    var screenCapList = $("#main ul.screenCaps");
    var screenDetail = $("#screenDetail");
    var folioNav = $('#folioNav');
	var footerDiv = $('#footer');

    var toggleVar = false;
    var prevDetailDiv = null;

    nav1.data('targetPannel', 'aboutPannel');
    nav2.data('targetPannel', 'workPannel');
    nav3.data('targetPannel', 'contactPannel');

    var activePannel = null;
	var activeProject = 0;
	var prevFlag = null;

    // content / portfolio vars
    var title = $("#main h2");
    var description = $("#main h3");
    var summary = $("#main p#pDescription");
    var mainImage = $("#mainImage");
    var introButton = $("#main h4 a");
	
	// looking floater
	var lookingFloater = $('#lookingforresume');
	var lookingFloaterLink = $('#lookingforresume a');
	
	lookingFloaterLink.toggle( function(){
		lookingFloater.css('backgroundPosition','right bottom');
	}, function(){
		lookingFloater.css('backgroundPosition', 'right 10px');
	})


    //console.log(windowHeight);
    //console.log(windowWidth);
    var wpInitY = workPannel.offset().top;
    var apInitY = aboutPannel.offset().top;
    var cpInitY = contactPannel.offset().top;
    var mnInitY = mainNav.offset().top;
    var ctInitY = content.offset().top;
    var bgInitY = bg.offset().top;
    var bfInitY = bgFP.offset().top;
    var ftInitY = windowHeight - 60;
    var miInitY = mainImage.offset().top;

    var portfolioData = [];

    folioNav.css({
        'position': 'absolute',
        'display': 'none',
        'opacity': '0.4',
        'width': '156px',
        'height': '120px',
        'background': 'url(assets/images/sprite_prev_next.png) no-repeat left top',
        'top': '0',
        'left': '0',
        'overflow': 'hidden',
        'z-index': '9999'
    })


    // pseudo code
	// ** - completed items
	// __ - uncompleted
	
	// values
    // ** height of screen
    // ** width of screen
    // ** init position of content and bg and bgFP
    // ** current active node for portfolio
    // ** prev node for portfolio
    // ** home / init all / reset all
    
	// functions / interactions
    // ** load JSON data
    // ** toggle nav pannels open
    // ** toggle close pannels
    // ** load thumbs into nav from json
    // ** throw error for no js
    // ** errror message for no data
    // ** attach data to list items in work
    // ** sticky the footer to the window height
    // ** load image and content from json node 
	// ** follow mouse at edges on work page for advance/prev nav
	// ** init the first folio piece when on portfolio pannel
    // ** advance portfolio piece to next node
    // ** retreat portfolio piece to prev node
    // ** some sort of safety check on toggles to make sure they resposition to init
	// ** mark active selection
	// __ make top of page the width of the browser / test in browsers
	// __ test footer functionality on iPad - strange page width behavior
	// __ loader when images are being pulled into screenshots.
    
	// events
    // ** load node from json  (had to make json well-formed)
    // ** click button / advance to next
    // ** click button / retreat to prev
	// __ click outside event to close screenshot detail divs
	
	// content
	// ** screenshots
	// ** larger screen images
	// ** copy / content
	// ** spell check and proof
	// __ online resume options (privacy issues?)
	// ** about and about links / content / design
	// ** contact info / design
	// __ add some zip to pannels >>>> shapes or something


    /////////////////
    // init stuff // 
    ////////////////

    screenDetail.css('display', 'none');
    errorWindow.css('display', 'none');
	
	if ($.browser.msie && $.browser.version.substr(0,1)<8) {
  	// search for selectors you want to add hover behavior to
  		errorWindow.css('display','block');
		errorWindow.html("<p>Sorry! You appear to be using an older version of Internet Explorer<br/><br/>Though I love to develop for IE6 for clients, I won't be doing that on my portfolio site. Please visit with IE8, or with Firefox, Chrome or even Opera -- something that has png support.<br/><br/> Thanks!</p>");
}


    browserWindow.resize(function () {		
		$('body').css({
        	'width': browserWindow.width(),
        	'height': browserWindow.height(),
        	'overflow': 'hidden'
    	});
		
		aboutPannel.css({
			'width': browserWindow.width()
		})
		
		contactPannel.css({
				'width': browserWindow.width()
		})
		
		workPannel.css({
				'width': browserWindow.width()
		})
    });

    $('body').css({
        'width': browserWindow.width(),
        'height': browserWindow.height(),
        'overflow': 'hidden'
    });
	
	aboutPannel.css({
			'width': browserWindow.width()
	})
	
	contactPannel.css({
			'width': browserWindow.width()
	})
	
	workPannel.css({
			'width': browserWindow.width()
	})
	
	
	
	
	//put json data on the screenshot buttons in the detail screen in the work pannel

    var navData = function (targetButton) {
		
		//console.log($('#portfolioList').children().length);

        var titleText = 		$(targetButton).parent().data("title")
        var descriptionText = 	$(targetButton).parent().data("description");
        var summaryText = 		$(targetButton).parent().data("summary")
        var mainImageSrc = 		$(targetButton).parent().data("mainImage")
        var btnImages = 		$(targetButton).parent().data("buttonImage")
        var screenShotList = 	$(targetButton).parent().data("screenShots")
		var apNo = 				$(targetButton).parent().data('apNo');
		var prevNo = 			$(targetButton).parent().data('prevNo');
		var nextNo = 			$(targetButton).parent().data('nextNo');
		
		
		activeProject = apNo;
		prevProject = prevNo;
		nextProject = nextNo;
		
		//console.log(prevProject);
		//console.log(activeProject);
		//console.log(nextProject);

		/*
		console.log( titleText );		
		console.log( descriptionText );		
		console.log( summaryText );		
		console.log( mainImageSrc );		
		console.log( btnImages );		
		console.log( screenDetail );
		*/

        screenCapList.css('opacity','0');
		
		title.css('visibility','visible');
		description.css('visibility','visible');
		summary.css('visibility','visible');
		
		content.animate({'opacity': '0.0'},{queue:true, duration:500, complete:function(){
			 title.text(titleText);
        	 description.text(descriptionText);
        	 summary.text(summaryText);
			 
			 content.animate({
            	'opacity': '1.0'
        	});

	        screenCapList.css('opacity','1.0');

		}});

       

        
		
		$('#portfolioList li').removeClass('active');
		$(targetButton).parent().addClass('active');

        $(screenCapList).html("");
        $(screenCapList).css('display', 'block');


        $.each(screenShotList, function (i, shots) {
            var listItem = $("<li id='sc" + Number(i + 1) + "'><a href='javascript:void(0)'><span>" + Number(i + 1) + "</span></a></li>");
            listItem.data("imageSrc", shots.shot);
            listItem.data("insight", shots.insight);
			listItem.data('apNo', i);

            listItem.css('left', (i * 67));


            $(listItem).click(function () {
                //console.log($(this).data("imageSrc"));	
				_gaq.push(['_trackEvent', 'Screen Shots', 'Click', $(this).data("imageSrc")]);
                displayDetail($(this), $(this).data("imageSrc"), $(this).data("insight"));
            })

            listItem.appendTo(screenCapList);
        });



        mainImage.css({
            'backgroundImage': 'url(\'' + mainImageSrc + "\')"
        });

        mainImage.css({
            'display': 'block',
            'top': '400px'
        });
        mainImage.animate({
            'top': '520px'
        }, {
            queue: true
        });
    }
	
	
	/* set the detail screen */ 
	
    function displayDetail(targetDiv, imageLocation, insightText) {
        //console.log(imageLocation);	
        //console.log($(prevDetailDiv).attr('id') == $(targetDiv).attr('id'));
		
		//console.log(targetDiv.offset().left);		
	
		
		if (toggleVar == false) {
            title.css('visibility','hidden');
			description.css('visibility','hidden');
			summary.css('visibility','hidden');
			
			screenDetail.css('display', 'block');
            toggleVar = true;
        } else if (toggleVar == true && ($(prevDetailDiv).attr('id') == $(targetDiv).attr('id'))) {
       
            title.css('visibility','visible');
			description.css('visibility','visible');
			summary.css('visibility','visible');
			
			screenDetail.css('display', 'none');
            toggleVar = false;
        }

        screenDetail.css('left', targetDiv.offset().left - 20);
        screenDetail.css('top', targetDiv.offset().top - 425);

        prevDetailDiv = $(targetDiv);
		

        $("#detailImage").html("<img src='" + imageLocation + "' />");
        $("#detailInsight").html("<p>" + insightText + "</p>");

    }
	

    // load data and build buttons from json data
    var dataReceived = function (data) {
        portfolioData = data;
       // console.log(portfolioData[0].samples.length);

        //create list for tag links
        $("<ul>").attr("id", "portfolioList").appendTo(workPannel);

        //create tags
        $.each(portfolioData[0].samples, function (i, val) {

            //create item
            var li = $("<li>");

            li.data("title", val.title);
            li.data("description", val.description);
            li.data("summary", val.summary);
            li.data("mainImage", val.mainImage);
            li.data("buttonImage", val.buttonImage);
            li.data("screenShots", val.screenShots);
			li.data('apNo', i);
			
			if(i==0){ 		
				li.data('prevNo', portfolioData[0].samples.length-1)
			} else {
				li.data('prevNo', i - 1);	
			};
			
			if(i == portfolioData[0].samples.length-1){
				li.data('nextNo', 0);
			} else {
				li.data('nextNo', i + 1);	
			}

            //console.log(jQuery.data(li,"title"));
            //create link and image
            var imageTag = $("<img>").attr({
                src: val.buttonImage
            });

            imageTag.appendTo(li);

            imageTag.wrap($("<a/>").attr({
                href: "javascript:void(0)" + ".html"
            })); // put data call here 
            
			imageTag.parent().click(function () {
				
				_gaq.push(['_trackEvent', 'Work', 'Click', val.title]);

				
				activeProject = $(this).parent().data('appNo');
				//console.log(activeProject);

				
				if (screenDetail.css('display') == 'block'){
						screenDetail.css('display','none');
				} else { };
                navData(this);
				toggleVar = false;
				
            });
			

            //add to list
            li.appendTo("#portfolioList");
			
			// take init values and put them on the introButton, too
			
			if(i == 0){
				
				introButton.data("title",val.title);
		        introButton.data("description", val.description);
        	    introButton.data("summary", val.summary);
            	introButton.data("mainImage", val.mainImage);
            	introButton.data("buttonImage", val.buttonImage);
            	introButton.data("screenShots", val.screenShots);
				
				introButton.click( function(){
						toggleVar = false;
						activeProject = 0;
		                activePannel = "workPannel"
						
						_gaq.push(['_trackEvent', 'Pannels', 'Click', 'See Work Link on Homepage']);


						//console.log($('#portfolioList li:eq(0)').data('title'));
						$(this).parent().css('display','none');
		                showMegaMenu('440px', '90px', workPannel, activePannel);        
						navData($('#portfolioList li:eq(0) a'));
					}
				)
			}
			
			
        });

    }

    var errorMessage = function () {
        errorWindow.css('display', 'block');
        errorWindow.html('<p>Network Error: Data did not load; Plese check your connection and try again.</p>');
    }


    $.ajax({
        url: 'assets/data/swfbuilderData.json',
        dataType: 'json',
        success: function (data) {
            dataReceived(data);
        },

        error: function () {
            errorMessage();
        }
    });


    $("body").append("<div id='mousePosition' />");

    $("#mousePosition").css({
        'position': 'absolute',
        'display': 'block',
        'z-index': '3000',
        'width': '50px',
        'height': '50px',
        'top': '0',
        'right': '0'

    });
	
	folioNav.click(function(){	
	
					
		if (prevFlag == true){
			_gaq.push(['_trackEvent', 'MouseMoveButtons', 'Click', "Prev"]);

			toggleVar = false;
			screenDetail.css('display','none');
			navData($('#portfolioList li:eq(' + nextProject + ') a'));
		} else if (prevFlag == false) {
			_gaq.push(['_trackEvent', 'MouseMoveButtons', 'Click', "Next"])
			
			toggleVar = false;
			screenDetail.css('display','none');
			navData($('#portfolioList li:eq(' + prevProject + ') a'));
		}
							
		//console.log(activeProject);
	})


    $(document).mousemove(function (e) {

        if (activePannel == 'workPannel') {

            /* $("#mousePosition").css({
                'top': e.pageY + 20,
                'left': e.pageX + 20
            });
			*/
			
            folioNav.css({
                'top': e.pageY - 68,
                'left': e.pageX - 80
            });
			
            // $('#mousePosition').html(e.pageX + ', ' + e.pageY);

            if (e.pageX > (browserWindow.width() * 0.90) && (e.pageY > 180)) {
                
				prevFlag = true;
				
				folioNav.css({
                    'background-position': 'left top',
                    'display': 'block',
                    'cursor': 'none'
                });
				
				
				
				
            } else if ((e.pageX < 70) && (e.pageY > 180)) {
               
			   prevFlag = false;
			   
			    folioNav.css({
                    'background-position': 'left bottom',
                    'display': 'block',
                    'cursor': 'none'
                });
				
				
            } else {
				
				prevFlag = null;
				
                folioNav.css({
                    'display': 'none'
                });
            }

        } else {

            $('#mousePosition').css('display', 'none');
            folioNav.css('display', 'none');

        }

    });




    function resetAll() {


        title.text("SWFBuilder.com");
        summary.html("I'm a front-end web worker (developer and designer). I like great storytelling and pixel-perfect design.<br/> Acroynms I know best: UX, UI, PSD, CSS, HTML, AS3, CMS");
        description.text("The Portfolio Site of Steven White");

        workPannel.animate({
            'top': (wpInitY + 'px')
        }, {
            queue: true
        });
        aboutPannel.animate({
            'top': (apInitY + 'px')
        }, {
            queue: true
        });
		contactPannel.animate({
            'top': (cpInitY + 'px')
        }, {
            queue: true
        });
		
        content.animate({
            'top': (ctInitY + 'px'),
            'opacity': '1'
        }, {
            queue: true, complete: function(){
				//introButton.parent().css({'display':''});
			}
        });
        mainNav.animate({
            'top': (mnInitY + 'px')
        }, {
            queue: true
        });
        bg.animate({
            'top': (bgInitY + 'px')
        }, {
            queue: true
        });
        bgFP.animate({
            'top': (bfInitY + 'px')
        }, {
            queue: true
        });
		footerDiv.animate({
			'margin-top':'-60px'	
		},{queue:true})
        mainImage.css('display', 'none');
	    screenDetail.css('display', 'none');
	    screenCapList.css('display', 'none');
       
    }

    function showMegaMenu(contentY, positionY, targetDiv) {
        //console.log(activePannel);
        bgFP.fadeOut();
        mainNav.animate({
            'top': positionY
        }, {
            queue: true
        });
        content.animate({
            'top': contentY,
            'opacity': '0.2'
        }, {queue: true
		});
       
        bg.animate({
            'top': (positionY)
        }, {
            queue: true
        });

        targetDiv.animate({
            'top': '0',
            'width': '100%'
        }, {
            queue: true
        })
		
		footerDiv.animate({
			'margin-top':'0'	
		},{queue:true})
		
        
    }


    function hideMegaMenu(targetDiv) {
        resetAll();
        screenCapList.css('display', 'none');
        screenDetail.css('display', 'none');
        $(targetDiv).animate({
            'top': '-298px'
        }, {
            queue: true
        }, function () {
            bgFP.fadeIn()
        })
    }

    function megaMenuSelector(clickedNav) {

        //console.log(($(clickedNav).data("targetPannel") != activePannel));
		
		$(introButton).parent().css('display','none');

		
        if ($(clickedNav).data("targetPannel") != activePannel) {

            switch ($(clickedNav).data("targetPannel")) {
            case 'aboutPannel':
                resetAll();
                activePannel = "aboutPannel"
                showMegaMenu('650px', '300px', aboutPannel, activePannel);
				//console.log('aboutPannel');
                break;
            case 'workPannel':
                //resetAll();
              //  activePannel = "workPannel"
               // showMegaMenu('430px', '90px', workPannel, activePannel); 
                resetAll();
			    activePannel = "workPannel"
		        showMegaMenu('440px', '90px', workPannel, activePannel);        
				navData($('#portfolioList li:eq(0) a'));
				       
	            //console.log('workPannel');
                break;
            case 'contactPannel':
                resetAll();
                bgFP.fadeIn();
                activePannel = "contactPannel"
                showMegaMenu('480px', '120px',  contactPannel, activePannel);
                //console.log('contactPannel');
                break;
            default:
                // resetAll();
            }

        } else {
			$(introButton).parent().css('display','');

			hideMegaMenu($(clickedNav).data("targetPannel"));
            mainImage.css('display', 'none');
            bgFP.fadeIn();
            activePannel = null;
        }
    }


    nav1.click(function () {
		_gaq.push(['_trackEvent', 'Pannels', 'Click', 'About']);
        megaMenuSelector(this);
    })

    nav2.click(function () {
		_gaq.push(['_trackEvent', 'Pannels', 'Click', 'Work']);
        megaMenuSelector(this)
    })

    nav3.click(function () {
		_gaq.push(['_trackEvent', 'Pannels', 'Click', 'Contact']);
        megaMenuSelector(this)
    })


});