var demoFinished = false;
var szNormal = 266, szSmall  = 80, szFull = 640;
var clicked = 0;
var currentPhoto = "";
var mousex = 0;
var mousey = 0;

var startPoint = 0;

window.addEvent('domready', function(){

var summaries = $$("#HomePortfolioSections .pageSummary");
summaries.each(function(summary, sumIndex){
	var myFx = new Fx.Style(summary, 'opacity').set(0); 
});

var kwicks = $$("#HomePortfolioSections .page");
var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});

kwicks.each(function(kwick, i) {
	kwick.addEvent("mouseenter", function(event) {
		var o = {};
		o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
		kwicks.each(function(other, j) {
			if(i != j) {
				var w = other.getStyle("width").toInt();
				if(w != szSmall) o[j] = {width: [w, szSmall]};
			}
		});
		
		if(demoFinished)
		{
    		fx.start(o)
		}
	});
});
 
$$(".pageSummaries").addEvent("mouseleave", function(event) {
	var o = {};
	kwicks.each(function(kwick, i) {
		o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
	});
	
	if(demoFinished)
	{
		fx.start(o);
	}
})


});

function grow(element)
{
         var widthStart = $(element).getStyle('width');
         var heightStart = $(element).getStyle('height');
         var growWidth = new Fx.Style($(element), 'width', {duration:300, transition: Fx.Transitions.Cubic.easeInOut});
         var growHeight = new Fx.Style($(element), 'height', {duration:300, transition: Fx.Transitions.Cubic.easeInOut});
         growWidth.start(widthStart, widthStart.toInt() * 1.2);
         growHeight.start(heightStart, heightStart.toInt() * 1.2);
}

function shrink(element)
{
         var widthStart = $(element).getStyle('width');
         var heightStart = $(element).getStyle('height');
         var growWidth = new Fx.Style($(element), 'width', {duration:300, transition: Fx.Transitions.Cubic.easeInOut});
         var growHeight = new Fx.Style($(element), 'height', {duration:300, transition: Fx.Transitions.Cubic.easeInOut});
         growWidth.start(widthStart, widthStart.toInt() / 1.2);
         growHeight.start(heightStart, heightStart.toInt() / 1.2);
}

demoFinished=true;

window.addEvent('mousemove', function(event){
        
    var ev = new Event(event);
    mousex = ev.client.x;
    mousey = ev.client.y;
        
});

//PageSections
//============
window.addEvent('domready', function(){
  
   //All pageSections
    var largeImages = $$('.largeImage');
    largeImages.each(function(largeImage, sumIndex){
        largeImages.setStyle('display','none');
        
        if(sumIndex == 0)
        {
            var largeImagePlaceholder = $('LargeImagePlaceholder')
            largeImagePlaceholder.getElement('img').setProperty('src', largeImage.getProperty('src'));
        }
        
    });
    
    //On mouseover a pagesSection show its largeImage if there is one.
    var pageSections = $$('.pageSection');
    if(pageSections)
    {
        pageSections.each(function(pageSection, i){
        
            pageSection.addEvent("mouseenter", function(event) {
            
                var largeImagePlaceholder = $('LargeImagePlaceholder');
                var pageSectionLargeImage = pageSection.getElement('img.largeImage');
                var phEffect = new Fx.Style(largeImagePlaceholder, 'opacity', {duration:300, wait:true});
                
                if(largeImagePlaceholder != null && pageSectionLargeImage != null)
                {
                    if(largeImagePlaceholder.getElement('img').getProperty('src') != pageSectionLargeImage.getProperty('src'))
                    {
                      phEffect.start(0).chain(function(){
                        largeImagePlaceholder.getElement('img').setProperty('src', pageSectionLargeImage.getProperty('src'));
                        phEffect.start(1);
                      });
                    }
                }
            });
        });
    }
   
   //PageSection Image
   var level4PageSections = $$('.psLevel4 .pageSectionImage');
   level4PageSections.each(function(pageSectionImage, index){
   
      pageSectionImage.setStyle('display','none');
   
   }); 
  
   //What we do page.
   var secPageSections = $$('.template1165 .psLevel4');
   secPageSections.each(function(pageSection, index){
      
        var parentPageSection = pageSection.getParent().getParent().getParent();
        var headingToggle = secPageSections[0].getElement('h3');
        
        var mySlide = new Fx.Slide(pageSection);
        mySlide.hide();
        
        headingToggle.injectAfter(pageSection.getParent());
        headingToggle.addClass('pageSectionToggle');
        
        parentPageSection.addEvent('click', function(){
            mySlide.toggle().chain(function(){
              if(headingToggle.innerHTML == 'Hide')
              {
                  headingToggle.innerHTML = headingToggle.oldInnerHtml;
                  headingToggle.addClass('show');
                  headingToggle.removeClass('hide');            
              }
              else
              {
                  headingToggle.oldInnerHtml = headingToggle.innerHTML;
                  headingToggle.innerHTML = 'Hide';
                  headingToggle.removeClass('show');
                  headingToggle.addClass('hide');
                  
              }            
            });
        });       
   });   
    
});

//Hoverables
//==========
window.addEvent('domready', function(){

    var hoverItems = $$('.hoverable');
    hoverItems.each(function(hoverItem, sumIndex){
        //remove the hoverable class
        hoverItem.removeClass('hoverable');
        hoverItem.addEvent("mouseenter", function(event) {
            hoverItem.addClass('hover');
        });
        
        hoverItem.addEvent("mouseleave", function(event) { 
            hoverItem.removeClass('hover'); 
        });

    });
    
});

//Portfolio Scroller
//==================
window.addEvent('domready', function(){
  
    if($('PortfolioSection') != null)
    {
      var photoDivs = $$("#PortfolioPhotos .portfolioPhoto");
      var HeightOfViewer = $('PortfolioSection').getStyle('height').toInt();
      var WidthOfViewer = $('PortfolioSection').getStyle('width').toInt();
      var NextImageButton = $('NextImageButton');
      var PreviousImageButton = $('PreviousImageButton');
      
      //setup portfolio photos       
      var portfolioPhotos = $('PortfolioPhotos');
      portfolioPhotos.setStyle('height', HeightOfViewer);
      
      //setup scroll button bottom
      portfolioPhotos.getElement('#ScrollDown').setStyle('top', HeightOfViewer - portfolioPhotos.getElement('#ScrollDown').getStyle('height').toInt());
              
      //setup pageText button
      $('HidePageText').setStyle('top', HeightOfViewer/2 - ($('HidePageText').getStyle('height').toInt()/2));
      
      //setup pageText
      $('PageText').setStyle('height', HeightOfViewer);
      
      //setup loader
      $('Loader').setStyle('height', HeightOfViewer);
      $('Loader').setStyle('width', WidthOfViewer);
      
      if(photoDivs.length > 0)
      {
          var portfolioImageViewer = new PortfolioImageViewer();
          portfolioImageViewer.setImage(photoDivs[0], true);
      }
      
      //Next Image
      NextImageButton.addEvent("click", function(event){
          this.blur();
          nextImage();
          showButtons();
      });
      
      //Previous Image
      PreviousImageButton.addEvent("click", function(event){
          this.blur();
          previousImage();
          showButtons();
      });
      
      /*==============================================================================*/
      
      
      var photoDivs = $$("#PortfolioPhotos .portfolioPhoto");
      var portfolioImageViewer = new PortfolioImageViewer();
      portfolioImageViewer.startViewer();
      
      photoDivs.each(function(photoDiv, i) {
             photoDiv.addEvent("click", function(event) {
                  portfolioImageViewer.setImage(photoDiv, false);                    
             });               
      });
      
      //variables
      var scrollButtonMinOpacity = 0.5;
      var scrollUp = $('ScrollUp');
      var scrollDown = $('ScrollDown');
      var scrollNext = $('NextImageButton');
      var scrollPrevious = $('PreviousImageButton');
      var PortfolioPhotosScrollerContainer = $('PortfolioPhotosScrollerContainer');        
      var DistanceToMove = $('PortfolioPhotos').getStyle('height').toInt();
      var HeightOfBox = $('PortfolioPhotosScrollerContainer').getStyle('height').toInt();
      var HidePageText = $('HidePageText');
      var ImageTextToggle = $('ImageTextToggle');
      var PortfolioSection = $('PortfolioSection');
      var PortfolioPhotos = $('PortfolioPhotos');
      var pText = $('PortfolioPhoto').getElement('#Text');
      var pPhotoTextToggle = $('ImageTextToggle');
      
      
      //effects
      var ScrollPortfolioPhotos = new Fx.Style(PortfolioPhotosScrollerContainer, 'top', {duration:1000, transition: Fx.Transitions.Cubic.easeInOut});
      var ScrollUpButtonOpacity = new Fx.Style(scrollUp, 'opacity', {duration: 200, wait: false});
      var ScrollDownButtonOpacity = new Fx.Style(scrollDown, 'opacity', {duration: 200, wait: false});
      var ScrollNextButtonOpacity = new Fx.Style(scrollNext, 'opacity', {duration: 200, wait: false});
      var ScrollPreviousButtonOpacity = new Fx.Style(scrollPrevious, 'opacity', {duration: 200, wait: false});
      
      var PhotoTextFade = new Fx.Style(pText, 'opacity', {duration: 200, wait: false});
      var PhotoTextToggleFade = new Fx.Style(pPhotoTextToggle, 'opacity', {duration: 200, wait: false});
      
      
      ScrollUpButtonOpacity.start(0);
      ScrollDownButtonOpacity.start(0);
      ScrollNextButtonOpacity.set(0);
      ScrollPreviousButtonOpacity.set(0);
      
      portfolioImageViewer.showText();
      
      
      //***ImageTextToggle Events***
      //============================
      ImageTextToggle.addEvent("click", function(event){
          this.blur();
          portfolioImageViewer.photoTextToggle();            
      });
              
      //***HidePageText Events***
      //=========================
      HidePageText.addEvent("click", function(event){
          portfolioImageViewer.slideTextToggle();
      });
      
      
      //Main Image Events
      //=================
      PortfolioSection.addEvent("mouseenter", function(event){
          showButtons();
          PhotoTextFade.start(0.7);
      });
      
      PortfolioSection.addEvent("mouseleave", function(event){
          ScrollNextButtonOpacity.start(0);
          ScrollPreviousButtonOpacity.start(0);
          PhotoTextFade.start(0);
      });
      
      //PortfolioPhotos Events
      PortfolioPhotos.addEvent("mouseenter", function(event){
          ScrollUpButtonOpacity.start(1);
          ScrollDownButtonOpacity.start(1);
      });
      
      PortfolioPhotos.addEvent("mouseleave", function(event){
          ScrollUpButtonOpacity.start(0);
          ScrollDownButtonOpacity.start(0);
      });
      
      scrollUp.addEvent("click", function(event){
         var top = PortfolioPhotosScrollerContainer.getStyle('top').toInt();
          
         if(top < 0)
         {
              var moveTo = top+DistanceToMove;
              
              if(top + DistanceToMove > 0)
              {
                  moveTo = 0;
              }
              
              //if there is room to move up
              ScrollUpButtonOpacity.start(scrollButtonMinOpacity,1);
              ScrollPortfolioPhotos.start(top,moveTo);
         }
         this.blur();
      });
      
      scrollDown.addEvent("click", function(event){
          var top = PortfolioPhotosScrollerContainer.getStyle('top').toInt();
          
          //if there is room to move down
          if((top + HeightOfBox) > DistanceToMove)
          {
              var moveTo = top-DistanceToMove;
              var nextFullMove = top - DistanceToMove*2;
                            
              if(nextFullMove < (0-HeightOfBox))
              {
                  moveTo = top + (nextFullMove + HeightOfBox);
              }
              
              ScrollPortfolioPhotos.start(top,moveTo);
          }            
          this.blur();
      });        
    }
});

function showButtons(){

     var scrollNext = $('NextImageButton');
     var scrollPrevious = $('PreviousImageButton');
    
    var ScrollNextButtonOpacity = new Fx.Style(scrollNext, 'opacity', {duration: 200, wait: false});
    var ScrollPreviousButtonOpacity = new Fx.Style(scrollPrevious, 'opacity', {duration: 200, wait: false});

    if(currentPhoto.getNext())
    {
      ScrollNextButtonOpacity.start(1);
    }
    else
    {
      ScrollNextButtonOpacity.start(0);
    }
          
    if(currentPhoto.getPrevious())
    {
      ScrollPreviousButtonOpacity.start(1);
    }
    else
    {
      ScrollPreviousButtonOpacity.start(0);
    }
}

function nextImage(){
    var portfolioImageViewer = new PortfolioImageViewer();
    
    if(currentPhoto.getNext())
    {
      portfolioImageViewer.setImage(currentPhoto.getNext(), false);
    }
}
    
function previousImage(){
    var portfolioImageViewer = new PortfolioImageViewer();
    if(currentPhoto.getPrevious())
    {
      portfolioImageViewer.setImage(currentPhoto.getPrevious(), false);
    }
}

var PortfolioImageViewer = new Class({

    initialize: function(){
    
        
    },
    
    startViewer: function(){
        var pImage = $('PortfolioPhoto').getElement('#Image');
        var pLoader = $('PortfolioPhoto').getElement('#Loader');
        var pText = $('PortfolioPhoto').getElement('#Text');
        var pPhotoTextToggle = $('ImageTextToggle');
        var HeightOfViewer = $('PortfolioSection').getStyle('height').toInt();
                
        var PhotoFade = new Fx.Style(pImage, 'top', {duration:500, transition: Fx.Transitions.Cubic.easeOut});
        var LoaderFade = new Fx.Style(pLoader, 'opacity', {duration: 200});
        var PhotoTextFade = new Fx.Style(pText, 'opacity', {duration: 200});
        var PhotoTextToggleFade = new Fx.Style(pPhotoTextToggle, 'opacity', {duration: 200});
        
        PhotoFade.set(HeightOfViewer);
        PhotoTextFade.hide();
        PhotoTextToggleFade.hide();  
    },
    
    slideTextToggle: function(){
        var PageText = $('PageText');
        var SlidePageText = new Fx.Style(PageText, 'left', {duration:400, transition: Fx.Transitions.Cubic.easeInOut});
        var HidePageText = $('HidePageText');       
                
        if(PageText.getStyle('left').toInt() < 0)
        {
            SlidePageText.start(PageText.getStyle('left').toInt(), 0).chain(function(){
                if(HidePageText.hasClass('on'))
                {
                    HidePageText.removeClass('on');
                }
            });
        }
        else
        {
            SlidePageText.start(0, 0-PageText.getStyle('width').toInt()).chain(function(){
                HidePageText.addClass('on');
            });
        }
    },
    
    showText: function(){
        var PageText = $('PageText');
        var SlidePageText = new Fx.Style(PageText, 'left', {duration:400, transition: Fx.Transitions.Cubic.easeInOut});
        var HidePageText = $('HidePageText');
        var PageTextWidth = PageText.getStyle('width').toInt();
        
        if(PageText.getStyle('left').toInt() < 0)
        {
            SlidePageText.start(PageText.getStyle('left').toInt(), 0).chain(function(){
                if(HidePageText.hasClass('on'))
                {
                    HidePageText.removeClass('on');
                }
            });
        }
    },
    
    hideText: function(){
        var PageText = $('PageText');
        var SlidePageText = new Fx.Style(PageText, 'left', {duration:400, transition: Fx.Transitions.Cubic.easeInOut});
        var HidePageText = $('HidePageText');
        var PageTextWidth = PageText.getStyle('width').toInt();
        
        if(PageText.getStyle('left').toInt() > 0-PageTextWidth)
        {
            SlidePageText.start(0, 0-PageText.getStyle('width').toInt()).chain(function(){
                HidePageText.addClass('on');
            });
        }
    },
    
    photoTextToggle: function(){
        var pText = $('PortfolioPhoto').getElement('#Text');
        var PhotoTextFade = new Fx.Style(pText, 'opacity', {duration: 200});
            
        if(pText.getStyle('opacity') > 0)
        {
            PhotoTextFade.start(0);
        }
        else
        {
            PhotoTextFade.start(0.7);
        }        
    },
    
    setImage: function(portFolioPhoto, firstTime){
        //this is here to make the url unique
        clicked++;
        currentPhoto = portFolioPhoto;
        var imageUrl = portFolioPhoto.getElement('img').getProperty('src');
        var imageText = portFolioPhoto.getElement('.imageText').innerHTML;
        var pImage = $('PortfolioPhoto').getElement('#Image');
        var pLoader = $('PortfolioPhoto').getElement('#Loader');
        var pText = $('PortfolioPhoto').getElement('#Text');
        var pPhotoTextToggle = $('ImageTextToggle');
        var HeightOfViewer = $('PortfolioSection').getStyle('height').toInt();
                
        imageUrl = imageUrl.substring(imageUrl.indexOf('image=')+6, imageUrl.length);
        imageUrl = "/umbraco/imagegen.aspx?width=600&clicked=" + clicked + "&image=" + imageUrl;
        
        var PhotoFade = new Fx.Style(pImage, 'top', {duration:500, transition: Fx.Transitions.Cubic.easeOut, wait: false});
        var LoaderFade = new Fx.Style(pLoader, 'opacity', {duration: 200, wait: false});
        var PhotoTextFade = new Fx.Style(pText, 'opacity', {duration: 200, wait: false});
        var PhotoTextToggleFade = new Fx.Style(pPhotoTextToggle, 'opacity', {duration: 200, wait: false});
               
        //fade out text whenever a change is made
        PhotoTextFade.start(0).chain(function(){
            pText.getElement('#TextInner').innerHTML = imageText;
        });
        
        //show loader, set the new image to start loading
        PhotoFade.start(0,HeightOfViewer).chain(function(){
            pLoader.setStyle('display', 'block');
            pImage.setProperty('src', imageUrl);
            LoaderFade.start(0.7);
            pImage.setStyle('display','block');
            pText.setStyle('display','block');
        });
        
        //when an image is loaded hide loader, slide in image, fade in text toggle
        pImage.addEvent('load', function(){
                LoaderFade.start(pLoader.getStyle('opacity'),0).chain(function(){
                    pLoader.setStyle('display', 'none');
                    PhotoFade.start(HeightOfViewer,0).chain(function(){
                    
                        //if mouse is still inside image
                        if(mousex > pImage.getCoordinates().left && mousex < pImage.getCoordinates().right
                          && mousey > pImage.getCoordinates().top && mousey < pImage.getCoordinates().bottom)
                        {
                            PhotoTextFade.start(0.7);
                        }                        
                    
                    });
                    pImage.removeEvents();
                    var viewer = new PortfolioImageViewer();
                    viewer.hideText();
                });                
        });        
    }    
});