category = "web";
view = "main";
currentImageSrc = ""
currentImageAlt = ""

function getID(theLink){
 $("#preview").animate({ opacity: 0 }, 250, function() {
  currentImageSrc = theLink.src
  currentImageAlt = theLink.alt
  var image = new Image();
  image.src = theLink.src;
  aspectratio = image.width / image.height;
  if (aspectratio >= (322/304)){
    $("#preview").html('<img id="preimg" alt="" src="'+currentImageSrc+'" width="100%" />');
    padding = (304 - document.getElementById("preimg").offsetHeight)/2
    $("#preview").css({"padding-top":padding});
  } else{
    $("#preview").html('<img id="preimg" alt="" src="'+currentImageSrc+'" height="100%" />');
    $("#preview").css({"padding-top":0}); 
  };
  $(this).animate({ opacity: 1 }, 250);
 });
};

function loadComplete(){
  $("#loading_overlay").fadeOut(250);
  if (navigator.appVersion.indexOf("MSIE 6.0")>=0 && navigator.appVersion.indexOf("MSIE 7.0")==-1 && navigator.appVersion.indexOf("MSIE 8.0")==-1){
  }

}

$(document).ready(function(){
  //alert(navigator.appName+" : "+navigator.appVersion);
 

  $("#store_overlay").fadeOut(0);
  $("#services_overlay").fadeOut(0);
  $("#portfolio_overlay").fadeOut(0);
  $("#contact_overlay").fadeOut(0);
  $("#graphicsAndIcons_overlay").fadeOut(0);
  $("#websiteTemplates_overlay").fadeOut(0);
  $("#contactForWork_overlay").fadeOut(0);
  $("#sendEmail_overlay").fadeOut(0);
  $("#graphicsAndIcons").fadeOut(0);
  $("#websiteTemplates").fadeOut(0);
  $("#servicesDescription").fadeOut(0);
  $("#contactForWork").fadeOut(0);
  $("#sendEmail").fadeOut(0);
  $("#category").fadeOut(0);
  $("#portfolioViewer").fadeOut(0);
  
  $("#store").hover(function () {if (view=="main" || view=="store"){$("#store_overlay").fadeIn(150);};}, function () {$("#store_overlay").fadeOut(150);});
  $("#services").hover(function () {if (view=="main" || view=="services"){$("#services_overlay").fadeIn(150);};}, function () {$("#services_overlay").fadeOut(150);});
  $("#portfolio").hover(function () {if (view=="main" || view=="portfolio"){$("#portfolio_overlay").fadeIn(150);};}, function () {$("#portfolio_overlay").fadeOut(150);});
  $("#contact").hover(function () {if (view=="main" || view=="contact"){$("#contact_overlay").fadeIn(150);};}, function () {$("#contact_overlay").fadeOut(150);});

  $("#websiteTemplates").hover(function () {$("#websiteTemplates_overlay").fadeIn(150);}, function () {$("#websiteTemplates_overlay").fadeOut(150);});
  $("#contactForWork").hover(function () {$("#contactForWork_overlay").fadeIn(150);}, function () {$("#contactForWork_overlay").fadeOut(150);});
  $("#sendEmail").hover(function () {$("#sendEmail_overlay").fadeIn(150);}, function () {$("#sendEmail_overlay").fadeOut(150);});

  $("#store").click(function(){
  if (view=="main" || view=="store"){
    if (view=="main"){
      $("#store_overlay").fadeOut(250);
      $("#wrapper").animate({ left:"30px" },{queue:false, duration:750, easing:'easeOutBack'}).animate({ top:"180px" },{duration: 750, easing:'easeOutBack'});
      if (navigator.appName!="Microsoft Internet Explorer"){
        $("#home").fadeTo(250, 0.25);
        $("#services").fadeTo(250, 0.25);
        $("#portfolio").fadeTo(250, 0.25);
        $("#contact").fadeTo(250, 0.25);
      } else{
        $("#home").hide();
        $("#services").hide();
        $("#portfolio").hide();
        $("#contact").hide();
      }
      $("#graphicsAndIcons").fadeIn(1000);
      $("#websiteTemplates").fadeIn(1000);
      $("#services").css({"cursor": "default"});
      $("#portfolio").css({"cursor": "default"});
      $("#contact").css({"cursor": "default"});
      $("#store").css({"background-image": "url('files/store_return_sel.png')"});
      $("#store_overlay").css({"background-image": "url('files/.png')"});
      view = "store"
    } else{
      $("#store_overlay").fadeOut(250);
      $("#wrapper").animate({ left:"-225px" },{queue:false, duration: 750, easing:'easeOutBack'}).animate({ top:"9px" },{duration: 750, easing:'easeOutBack'});
      if (navigator.appName!="Microsoft Internet Explorer"){
        $("#home").fadeTo(250, 1);
        $("#services").fadeTo(250, 1);
        $("#portfolio").fadeTo(250, 1);
        $("#contact").fadeTo(250, 1);
      } else{
        $("#home").show();
        $("#services").show();
        $("#portfolio").show();
        $("#contact").show();
      }
      $("#graphicsAndIcons").fadeOut(500);
      $("#websiteTemplates").fadeOut(500);
      $("#services").css({"cursor": "pointer"});
      $("#portfolio").css({"cursor": "pointer"});
      $("#contact").css({"cursor": "pointer"});
      $("#store").css({"background-image": "url('files/store.png')"});
      $("#store_overlay").css({"background-image": "url('files/.png')"});
      view = "main"
    };
  };
  });
  $("#portfolio").click(function(){
  if (view=="main" || view=="portfolio"){
    if (view=="main"){
      $("#preview_overlay").fadeOut(0);
      $("#portfolio_overlay").fadeOut(250);
      $("#wrapper").animate({ left:"300px" },{queue:false, duration: 750, easing:'easeOutBack'}).animate({ top:"-410px" },{duration: 750, easing:'easeOutBack'});
      if (navigator.appName!="Microsoft Internet Explorer"){
        $("#home").fadeTo(250, 0.25);
        $("#services").fadeTo(250, 0.25);
        $("#store").fadeTo(250, 0.25);
        $("#contact").fadeTo(250, 0.25);
      } else{
        $("#home").hide();
        $("#services").hide();
        $("#store").hide();
        $("#contact").hide();
      }
      $("#category").fadeIn(1000);
      $("#portfolioViewer").fadeIn(1000);
      $("#services").css({"cursor": "default"});
      $("#store").css({"cursor": "default"});
      $("#contact").css({"cursor": "default"});
      $("#portfolio").css({"background-image": "url('files/portfolio_return_sel.png')"});
      $("#portfolio_overlay").css({"background-image": "url('files/.png')"});
      view = "portfolio"
      $("#preview").html('<img id="preimg" alt="" src="files/05.jpg" width="100%" />');
      $("#preview").css({"padding-top":35});
    } else{
      $("#portfolio_overlay").fadeOut(250);
      $("#wrapper").animate({ left:"-225px" },{queue:false, duration: 750, easing:'easeOutBack'}).animate({ top:"9px" },{duration: 750, easing:'easeOutBack'});
      if (navigator.appName!="Microsoft Internet Explorer"){
        $("#home").fadeTo(250, 1);
        $("#services").fadeTo(250, 1);
        $("#store").fadeTo(250, 1);
        $("#contact").fadeTo(250, 1);
      } else{
        $("#home").show();
        $("#services").show();
        $("#store").show();
        $("#contact").show();
      }
      $("#category").fadeOut(500);
      $("#portfolioViewer").fadeOut(500);
      $("#services").css({"cursor": "pointer"});
      $("#store").css({"cursor": "pointer"});
      $("#contact").css({"cursor": "pointer"});
      $("#portfolio").css({"background-image": "url('files/portfolio.png')"});
      $("#portfolio_overlay").css({"background-image": "url('files/portfolio_sel.png')"});
      view = "main"
    };
  };
  });
  $("#services").click(function(){
  if (view=="main" || view=="services"){
    if (view=="main"){
      $("#services_overlay").fadeOut(250);
      $("#wrapper").animate({ left:"-550px" },{queue:false, duration: 750, easing:'easeOutBack'}).animate({ top:"120px" },{duration: 750, easing:'easeOutBack'});
      if (navigator.appName!="Microsoft Internet Explorer"){
        $("#home").fadeTo(250, 0.25);
        $("#store").fadeTo(250, 0.25);
        $("#portfolio").fadeTo(250, 0.25);
        $("#contact").fadeTo(250, 0.25);
      } else{
        $("#home").hide();
        $("#store").hide();
        $("#portfolio").hide();
        $("#contact").hide();
      }
      $("#servicesDescription").fadeIn(1000);
      $("#contactForWork").fadeIn(1000);
      $("#store").css({"cursor": "default"});
      $("#portfolio").css({"cursor": "default"});
      $("#contact").css({"cursor": "default"});
      $("#services").css({"background-image": "url('files/services_return_sel.png')"});
      $("#services_overlay").css({"background-image": "url('files/.png')"});
      view = "services"
    } else{
      $("#services_overlay").fadeOut(250);
      $("#wrapper").animate({ left:"-225px" },{queue:false, duration: 750, easing:'easeOutBack'}).animate({ top:"9px" },{duration: 750, easing:'easeOutBack'});
      if (navigator.appName!="Microsoft Internet Explorer"){
        $("#home").fadeTo(250, 1);
        $("#store").fadeTo(250, 1);
        $("#portfolio").fadeTo(250, 1);
        $("#contact").fadeTo(250, 1);
      } else{
        $("#home").show();
        $("#store").show();
        $("#portfolio").show();
        $("#contact").show();
      }
      $("#servicesDescription").fadeOut(500);
      $("#contactForWork").fadeOut(500);
      $("#store").css({"cursor": "pointer"});
      $("#portfolio").css({"cursor": "pointer"});
      $("#contact").css({"cursor": "pointer"});
      $("#services").css({"background-image": "url('files/services.png')"});
      $("#services_overlay").css({"background-image": "url('files/services_sel.png')"});
      view = "main"
    };
  };
  });
  $("#contact").click(function(){
  if (view=="main" || view=="contact"){
    if (view=="main"){
      $("#contact_overlay").fadeOut(250);
      $("#wrapper").animate({ left:"-500px" },{queue:false, duration: 750, easing:'easeOutBack'}).animate({ top:"-240px" },{duration: 750, easing:'easeOutBack'});
      if (navigator.appName!="Microsoft Internet Explorer"){
        $("#home").fadeTo(250, 0.25);
        $("#services").fadeTo(250, 0.25);
        $("#portfolio").fadeTo(250, 0.25);
        $("#store").fadeTo(250, 0.25);
      } else{
        $("#home").hide();
        $("#services").hide();
        $("#portfolio").hide();
        $("#store").hide();
      }
      $("#sendEmail").fadeIn(1000);
      $("#store").css({"cursor": "default"});
      $("#portfolio").css({"cursor": "default"});
      $("#services").css({"cursor": "default"});
      $("#contact").css({"background-image": "url('files/contact_return_sel.png')"});
      $("#contact_overlay").css({"background-image": "url('files/.png')"});
      view = "contact"
    } else{
      $("#contact_overlay").fadeOut(250);
      $("#wrapper").animate({ left:"-225px" },{queue:false, duration: 750, easing:'easeOutBack'}).animate({ top:"9px" },{duration: 750, easing:'easeOutBack'});
      if (navigator.appName!="Microsoft Internet Explorer"){
        $("#home").fadeTo(250, 1);
        $("#services").fadeTo(250, 1);
        $("#portfolio").fadeTo(250, 1);
        $("#store").fadeTo(250, 1);
      } else{
        $("#home").show();
        $("#services").show();
        $("#portfolio").show();
        $("#store").show();
      }
      $("#sendEmail").fadeOut(500);
      $("#store").css({"cursor": "pointer"});
      $("#portfolio").css({"cursor": "pointer"});
      $("#services").css({"cursor": "pointer"});
      $("#contact").css({"background-image": "url('files/contact.png')"});
      $("#contact_overlay").css({"background-image": "url('files/contact_sel.png')"});
      view = "main"
    };
  };
  });

  $("#preview").mouseenter(function(){
   $("#preview_overlay").fadeIn(250);
  });
  $("#preview_overlay").mouseleave(function(){
   $("#preview_overlay").fadeOut(250);
  });
  $("#thumb_container").mouseenter(function(){
   $("#preview_overlay").fadeOut(250);
  });
  $("#store").mouseenter(function(){
    if (view=="main"){
      $("#store").animate({ left:"492px" },{queue:false, duration:250, easing:'easeOutBounce'}).animate({ top:"126px" },{duration:250, easing:'easeOutBounce'});
    };
  });
  $("#services").mouseenter(function(){
    if (view=="main"){
      $("#services").stop();
      $("#services").animate({ left:"980px" },{queue:false, duration:250, easing:'easeOutBounce'}).animate({ top:"145px" },{duration:250, easing:'easeOutBounce'});
    };
  });
  $("#portfolio").mouseenter(function(){
    if (view=="main"){
      $("#portfolio").animate({ left:"430px" },{queue:false, duration:250, easing:'easeOutBounce'}).animate({ top:"465px" },{duration:250, easing:'easeOutBounce'});
    };
  });
  $("#contact").mouseenter(function(){
    if (view=="main"){
      $("#contact").animate({ left:"995px" },{queue:false, duration:250, easing:'easeOutBounce'}).animate({ top:"489px" },{duration:250, easing:'easeOutBounce'});
    };
  });
  $("#store").mouseleave(function(){
    if (view=="main"){
      $("#store").animate({ left:"507px" },{queue:false, duration:250, easing:'easeOutBounce'}).animate({ top:"141px" },{duration:250, easing:'easeOutBounce'});
    };
  });
  $("#services").mouseleave(function(){
    if (view=="main"){
      $("#services").stop();
      $("#services").animate({ left:"965px" },{queue:false, duration:250, easing:'easeOutBounce'}).animate({ top:"140px" },{duration:250, easing:'easeOutBounce'});
    };
  });
  $("#portfolio").mouseleave(function(){
    if (view=="main"){
      $("#portfolio").animate({ left:"445px" },{queue:false, duration:250, easing:'easeOutBounce'}).animate({ top:"460px" },{duration:250, easing:'easeOutBounce'});
    };
  });
  $("#contact").mouseleave(function(){
    if (view=="main"){
      $("#contact").animate({ left:"980px" },{queue:false, duration:250, easing:'easeOutBounce'}).animate({ top:"474px" },{duration:250, easing:'easeOutBounce'});
    };
  });
  $("#webCategory").click(function(){
   $("#preview").animate({ opacity: 0 }, 250, function() {
    $("#thumb_container").css({"top":-25}); 
    currentImageAlt="";
    category="web"
    $("#category").css({"background-image": "url('files/category_webSel.png')"});
    $("#thumb_container").html('<ul id="grid">'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="" src="portfolio/05.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="http://www.travisjamesmusic.com/" src="portfolio/06.jpg" height="100%" /></div></li>'+
	'</ul>');
	var image = new Image();
    image.src = "portfolio/05.jpg";
    aspectratio = image.width / image.height;
    if (aspectratio >= (322/304)){
      $("#preview").html('<img id="preimg" alt="" src="'+image.src+'" width="100%" />');
      padding = (304 - document.getElementById("preimg").offsetHeight)/2
      $("#preview").css({"padding-top":padding});
    } else{
      $("#preview").html('<img id="preimg" alt="" src="'+image.src+'" height="100%" />');
      $("#preview").css({"padding-top":0});  
    };
   $(this).animate({ opacity: 1 }, 250);
   });
  });
  $("#printCategory").click(function(){
   $("#preview").animate({ opacity: 0 }, 250, function() {
    $("#thumb_container").css({"top":-25}); 
    currentImageAlt="http://psd.tutsplus.com/tutorials/tutorials-effects/creating-a-vector-composite-effect-from-a-photo/";
    category="print"
    $("#category").css({"background-image": "url('files/category_printSel.png')"});
    $("#thumb_container").html('<ul id="grid">'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="http://psd.tutsplus.com/tutorials/tutorials-effects/creating-a-vector-composite-effect-from-a-photo/" src="portfolio/01.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="portfolio/07.jpg" src="portfolio/07.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="portfolio/08.jpg" src="portfolio/08.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="portfolio/09.jpg" src="portfolio/09.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="portfolio/010.jpg" src="portfolio/010.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="portfolio/011.jpg" src="portfolio/011.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="portfolio/012.jpg" src="portfolio/012.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?id=291075397&s=143441" src="portfolio/013.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="files/014.jpg" src="files/014.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="files/015.jpg" src="files/015.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="files/016.jpg" src="files/016.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="files/017.jpg" src="files/017.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="files/018.jpg" src="files/018.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="files/019.jpg" src="files/019.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="files/020.jpg" src="files/020.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="files/021.jpg" src="files/021.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="files/022.jpg" src="files/022.jpg" height="100%" /></div></li>'+
	'</ul>');
	var image = new Image();
    image.src = "files/01.jpg";
    aspectratio = image.width / image.height;
    if (aspectratio >= (322/304)){
      $("#preview").html('<img id="preimg" alt="" src="'+image.src+'" width="100%" />');
      padding = (304 - document.getElementById("preimg").offsetHeight)/2
      $("#preview").css({"padding-top":padding});
    } else{
      $("#preview").html('<img id="preimg" alt="" src="'+image.src+'" height="100%" />'); 
      $("#preview").css({"padding-top":0}); 
    };
   $(this).animate({ opacity: 1 }, 250);
   });
  });
  $("#uiCategory").click(function(){
   $("#preview").animate({ opacity: 0 }, 250, function() {
    $("#thumb_container").css({"top":-25});
    currentImageAlt="http://vector.tutsplus.com/tutorials/illustration/create-an-aperture-style-camera-lens-icon/";
    $("#preview").css({"padding-top":0});
    category="ui"
    $("#category").css({"background-image": "url('files/category_uiSel.png')"});
    $("#thumb_container").html('<ul id="grid">'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="http://vector.tutsplus.com/tutorials/illustration/create-an-aperture-style-camera-lens-icon/" src="files/02.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="http://vector.tutsplus.com/tutorials/illustration/how-to-create-a-transparent-battery-icon/" src="files/03.jpg" height="100%" /></div></li>'+
    '<li><div class="thumbdiv"><img class="thumb" onclick="javascript:getID(this)" alt="http://vector.tutsplus.com/tutorials/illustration/create-a-customizable-aluminum-and-glass-styled-vector-emblem/" src="files/04.jpg" height="100%" /></div></li>'+
	'</ul>');
	var image = new Image();
    image.src = "files/02.jpg";
    aspectratio = image.width / image.height;
    if (aspectratio >= (322/304)){
      $("#preview").html('<img id="preimg" alt="" src="'+image.src+'" width="100%" />');
      padding = (304 - document.getElementById("preimg").offsetHeight)/2
      $("#preview").css({"padding-top":padding});
    } else{
      $("#preview").html('<img id="preimg" alt="" src="'+image.src+'" height="100%" />');
      $("#preview").css({"padding-top":0});  
    };
   $(this).animate({ opacity: 1 }, 250);
   });
  });

  $("#webCategory").mouseenter(function(){
    $("#category").css({"background-image": "url('files/category_webSel.png')"});
  });
  $("#printCategory").mouseenter(function(){
    $("#category").css({"background-image": "url('files/category_printSel.png')"});
  });
  $("#uiCategory").mouseenter(function(){
    $("#category").css({"background-image": "url('files/category_uiSel.png')"});
  });
  $("#webCategory").mouseleave(function(){
    if (category=="web"){
      $("#category").css({"background-image": "url('files/category_webSel.png')"});
    };
    if (category=="print"){
      $("#category").css({"background-image": "url('files/category_printSel.png')"});
    };
    if (category=="ui"){
      $("#category").css({"background-image": "url('files/category_uiSel.png')"});
    };
  });
  $("#printCategory").mouseleave(function(){
    if (category=="web"){
      $("#category").css({"background-image": "url('')"});
    };
    if (category=="print"){
      $("#category").css({"background-image": "url('')"});
    };
    if (category=="ui"){
      $("#category").css({"background-image": "url('')"});
    };
  });
  $("#uiCategory").mouseleave(function(){
    if (category=="web"){
      $("#category").css({"background-image": "url('g')"});
    };
    if (category=="print"){
      $("#category").css({"background-image": "url('')"});
    };
    if (category=="ui"){
      $("#category").css({"background-image": "url('')"});
    };
  });
  $("#preview_overlay").click(function(){
    if (currentImageAlt!=""){
      window.open(currentImageAlt);
    };
  });

	  $("#graphicsAndIcons").click(function(){
  
  });
    $("#websiteTemplates").click(function(){
   
  });
  $("#contactForWork").click(function(){
    
  });
    
});