var totalImages = 1;
var curImage = 1;
var fading = false;

function toggleDetails(e)
{
  Event.stop(e);
  Effect.toggle('projectDetails', 'appear', { duration:0.5 });  
}

function nextImage(e)
{
  Event.stop(e);
  if (!fading)
  {
    fading = true;
    if ((Number(curImage)+1) <= totalImages)
    {
      nextS = Number(curImage)+1;
      Effect.Appear('image'+nextS, { duration:0.5, from:0.0, to:1.0 });
      Effect.Fade('image'+curImage, { duration:0.5, from:1.0, to:0.0, afterFinish: function() { fading = false; curImage = Number(nextS); } });
    }
    else
    {
      nextS = 1;
      Effect.Appear('image'+nextS, { duration:0.5, from:0.0, to:1.0 });
      Effect.Fade('image'+curImage, { duration:0.5, from:1.0, to:0.0, afterFinish: function() { fading = false; curImage = Number(nextS); } });
    }
  }  
}
function prevImage(e)
{
  Event.stop(e);
  if (!fading)
  {
    fading = true;
    if (curImage == 1)
    {
      nextS = totalImages;
      Effect.Appear('image'+nextS, { duration:0.5, from:0.0, to:1.0 });
      Effect.Fade('image'+curImage, { duration:0.5, from:1.0, to:0.0, afterFinish: function() { fading = false; curImage = Number(nextS); } });
    }
    else
    {
      nextS = Number(curImage)-1;
      Effect.Appear('image'+nextS, { duration:0.5, from:0.0, to:1.0 });
      Effect.Fade('image'+curImage, { duration:0.5, from:1.0, to:0.0, afterFinish: function() { fading = false; curImage = Number(nextS); } });
    }
  }
}

function nextProject(e)
{
  Event.stop(e);
  if (!fading)
  {
    if(!$('nextArrow').hasClassName('inactive'))
    {
      fading = true;
      var nextHref = $('nextArrow').href;
      var newProject = nextHref.split("/");
      var nextSection = newProject[(newProject.length-2)];
      var nextProject = newProject[(newProject.length-1)];
      
      var url = '/ajax.php?section=' + nextSection + '&project=' + nextProject;
      new Ajax.Request(
          url,
          {
            method : 'get',				
            onSuccess : function(transport, json) {
              if (transport.responseText != 'error')
              {
                var json = transport.responseText.evalJSON();
                
                var totalImages = json.images.length;
                
                var newProjectHTML = '<div id="secondaryProject" style="left: 886px; display: none;">';
                for(i=0;i<totalImages;i++)
                {
                  if (i==0)
                  {
                    newProjectHTML += '<img src="'+unescape(json.images[i])+'" id="image'+(i+1)+'" />';
                  }
                  else
                  {
                    newProjectHTML += '<img style="display: none;" src="'+unescape(json.images[i])+'" id="image'+(i+1)+'" />';
                  }                  
                }
                newProjectHTML += '<div style="display: none;" id="projectDetails">';
                if(json['description'] != "")
                {
                  newProjectHTML += '<div class="infoItem"><strong>Project:</strong> '+unescape(json['description'])+'</div>';
								}
								if(json['role'] != "")
                {
                  newProjectHTML += '<div class="infoItem"><strong>Role:</strong> '+unescape(json['role'])+'</div>';				
								}
								if(json['url'] != "")
                {
                  newProjectHTML += '<div class="infoItem"><a href="'+unescape(json['url'])+'">Launch Site &raquo;</a></div>';
								}
								newProjectHTML += '</div></div>';
				
				$('projectDetails').removeAttribute('id');
				var projectImages = $('mainProject').select('img');
				for(i=0;i<projectImages.length;i++)
				{
					projectImages[i].removeAttribute('id');
				}
                
                $('imageContainer').insert(newProjectHTML);
				new Effect.Fade('projectTitles', { duration:0.5, from:1.0, to:0.0 });
				if($('viewSelector').visible())
				{
					new Effect.Fade('viewSelector', { duration:0.5, from:1.0, to:0.0 });
        }
        
        var activeSecondaryNav = $('portfolioNav').select('ul li ul li.active');
        for(i=0;i<activeSecondaryNav.length;i++)
				{
					activeSecondaryNav[i].removeClassName('active');
				}

        new Effect.Appear('secondaryProject', { delay:0.5, duration:0.5, from:0.0, to:1.0 });
        new Effect.Fade('mainProject', { duration:0.5, from:1.0, to:0.0 });
        new Effect.Move('mainProject', { x: -886, y: 0, duration: 1.0 });
        new Effect.Move('secondaryProject', { x: -886, y: 0, duration: 1.0, afterFinish: function()
					{
						$('mainProject').remove();
						$('secondaryProject').writeAttribute('id', 'mainProject');						
						$('projectTitleH2').update(unescape(json['title']));
						new Effect.Appear('projectTitles', { duration:0.5, from:0.0, to:1.0 });
						document.title = 'Alicia Brooks Design | '+unescape(json['section'])+' | '+unescape(json['title']);
						
						if(json['nextlink'] != "")
						{
							$('nextArrow').writeAttribute('href', unescape(json['nextlink']));
						}
						else
						{
							$('nextArrow').writeAttribute('href', '#');
							$('nextArrow').addClassName('inactive');
						}
						if(json['prevlink'] != "")
						{
							$('previousArrow').writeAttribute('href', unescape(json['prevlink']));
							$('previousArrow').removeClassName('inactive');
						}
						else
						{
							$('previousArrow').writeAttribute('href', '#');							
						}
						
						$('nav-'+json['slug']).addClassName('active');
						
						resetViewsControls();
						
						fading = false;
					}
				});
                
              }
              else
              {
                alert("Could not process entered text.");
              }                
            },
            onFailure : function() {
            alert("Error: Ajax failed.");
          }
      });
      
    }
  }
}

function prevProject(e)
{
  Event.stop(e);
  if (!fading)
  {
    if(!$('previousArrow').hasClassName('inactive'))
    {
      fading = true;
      var nextHref = $('previousArrow').href;
      var newProject = nextHref.split("/");
      var nextSection = newProject[(newProject.length-2)];
      var nextProject = newProject[(newProject.length-1)];
      
      var url = '/ajax.php?section=' + nextSection + '&project=' + nextProject;
      new Ajax.Request(
          url,
          {
            method : 'get',				
            onSuccess : function(transport, json) {
              if (transport.responseText != 'error')
              {
                var json = transport.responseText.evalJSON();
                
                var totalImages = json.images.length;
                
                var newProjectHTML = '<div id="secondaryProject" style="left: -886px; display: none;">';
                for(i=0;i<totalImages;i++)
                {
                  if (i==0)
                  {
                    newProjectHTML += '<img src="'+unescape(json.images[i])+'" id="image'+(i+1)+'" />';
                  }
                  else
                  {
                    newProjectHTML += '<img style="display: none;" src="'+unescape(json.images[i])+'" id="image'+(i+1)+'" />';
                  }                  
                }
                newProjectHTML += '<div style="display: none;" id="projectDetails">';
                if(json['description'] != "")
                {
                  newProjectHTML += '<div class="infoItem"><strong>Project:</strong> '+unescape(json['description'])+'</div>';
								}
								if(json['role'] != "")
                {
                  newProjectHTML += '<div class="infoItem"><strong>Role:</strong> '+unescape(json['role'])+'</div>';				
								}
								if(json['url'] != "")
                {
                  newProjectHTML += '<div class="infoItem"><a href="'+unescape(json['url'])+'">Launch Site &raquo;</a></div>';
								}
								newProjectHTML += '</div></div>';
				
				$('projectDetails').removeAttribute('id');
				var projectImages = $('mainProject').select('img');
				for(i=0;i<projectImages.length;i++)
				{
					projectImages[i].removeAttribute('id');
				}
                
                $('imageContainer').insert(newProjectHTML);
				new Effect.Fade('projectTitles', { duration:0.5, from:1.0, to:0.0 });
				if($('viewSelector').visible())
				{
					new Effect.Fade('viewSelector', { duration:0.5, from:1.0, to:0.0 });
        }
        
        var activeSecondaryNav = $('portfolioNav').select('ul li ul li.active');
        for(i=0;i<activeSecondaryNav.length;i++)
				{
					activeSecondaryNav[i].removeClassName('active');
				}

        new Effect.Appear('secondaryProject', { delay:0.5, duration:0.5, from:0.0, to:1.0 });
        new Effect.Fade('mainProject', { duration:0.5, from:1.0, to:0.0 });
        new Effect.Move('mainProject', { x: 886, y: 0, duration: 1.0 });
        new Effect.Move('secondaryProject', { x: 886, y: 0, duration: 1.0, afterFinish: function()
					{
						$('mainProject').remove();
						$('secondaryProject').writeAttribute('id', 'mainProject');						
						$('projectTitleH2').update(unescape(json['title']));
						new Effect.Appear('projectTitles', { duration:0.5, from:0.0, to:1.0 });
						document.title = 'Alicia Brooks Design | '+unescape(json['section'])+' | '+unescape(json['title']);
						
						if(json['prevlink'] != "")
						{
							$('previousArrow').writeAttribute('href', unescape(json['prevlink']));
						}
						else
						{
							$('previousArrow').writeAttribute('href', '#');
							$('previousArrow').addClassName('inactive');
						}
						if(json['nextlink'] != "")
						{
							$('nextArrow').writeAttribute('href', unescape(json['nextlink']));
							$('nextArrow').removeClassName('inactive');
						}
						else
						{
							$('nextArrow').writeAttribute('href', '#');							
						}
						
						$('nav-'+json['slug']).addClassName('active');
						
						resetViewsControls();
						
						fading = false;
					}
				});
                
              }
              else
              {
                alert("Could not process entered text.");
              }                
            },
            onFailure : function() {
            alert("Error: Ajax failed.");
          }
      });
      
    }
  }
}

function resetViewsControls()
{
  Event.stopObserving('viewMore', 'click', nextImage, false)
  Event.stopObserving('viewLess', 'click', prevImage, false)
  
  var projectImages = $$('#imageContainer img');
  totalImages = projectImages.length;
	if (totalImages > 1)
	{
    Event.observe('viewMore', 'click', nextImage, false)
    Event.observe('viewLess', 'click', prevImage, false)
    new Effect.Appear('viewSelector', { duration:0.5, from:0.0, to:1.0 });
	}
	
}

function init() {
	if ($('detialsToggle') != null) {
		Event.observe('detialsToggle', 'click', toggleDetails, false)
	}
	var projectImages = $$('#imageContainer img');
  	totalImages = projectImages.length;
	if (totalImages > 1)
	{
    Event.observe('viewMore', 'click', nextImage, false)
    Event.observe('viewLess', 'click', prevImage, false)
	}
	if ($('nextArrow') != null)
	{
    Event.observe('nextArrow', 'click', nextProject, false)
    Event.observe('previousArrow', 'click', prevProject, false)
	}
}

Event.observe(window, 'load', init, false);