/*
  Document   : global.js
  Created on : 20/08/10
  Author     : Mathew Waddilove
  Copyright  : Round & Red Creative
  Description: Global js for roundandred.com.
 */

$(document).ready(function() {

  // elements needing the ie6 png fix
  $('img, div.bio p, div.quote, div.client, .anythingSlider li, #process li' ).ifixpng();

  // Show the splash banner
  if(! $.browser.msie || ($.browser.msie && parseInt($.browser.version) > 6))
  $('.anythingSlider').show();

  // discover total number of splash images
  if($('.anythingSlider ul').children().size() > 1){
    // If there's more than one, create a slider
    $('.anythingSlider').anythingSlider({
        easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
        autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
        delay: 5000,                    // How long between slide transitions in AutoPlay mode
        startStopped: false,            // If autoPlay is on, this can force it to start stopped
        animationTime: 600,             // How long the slide transition takes
        hashTags: false,                 // Should links change the hashtag in the URL?
        buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
        pauseOnHover: false,             // If true, and autoPlay is enabled, the show will pause on hover
        startText: "auto",                // Start text
        stopText: "",               // Stop text
        navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
    });
  }
  
  $("#slide-jump").click(function(){
      $('.anythingSlider').anythingSlider(6);
  });
    
  // construct the grid overlay
  buildGrid();

  // attach the vertical toggle command
  $('#toggle-vgrid').click(function(){toggleGrid('vertical');});

  // attach the vertical toggle command
  $('#toggle-hgrid').click(function(){toggleGrid('horizontal');});


  $('a.client').mouseover(function(){
                  highlightServices(this);
                })
               .mouseout(function(){
                  $('#services li').css({backgroundColor : '#999', color : '#999'});
                });
  $('#client-list a').tooltip({
					track: true,
					delay: 300,
					showURL: false,
					fade: 250
				});

// thumbnail rollover
$('.thumbnail').each(function(){
  
      var parent = $(this);
      var div = $('<div>'+parent.attr('title')+'</div>');
      
      div.appendTo(parent).hide();

      parent.mouseenter(function(){ div.slideDown(150); })
            .mouseleave(function(){ div.slideUp(150); });
});

// thumbnail rollover
$('.case-study').each(function(){

      var parent = $(this);
      var div = $('<div>'+parent.attr('title')+'</div>');

      div.appendTo(parent).hide();

      parent.mouseenter(function(){ div.slideDown(150); })
            .mouseleave(function(){ div.slideUp(150); });
});


$('.thumbnail').fancybox({
			titlePosition:'inside',
			autoDimensions:true,
			scrolling:'no',
			overlayOpacity:0.4,
			overlayColor:'#000'
		});
});


function highlightServices(el) {

  // jquery cannot animate classes, so we must use individual styles. 
  var sectionColours = {
                        'branding' : '#dadb00',
                        'design' : '#eb9213',
                        'print' : '#dc0070',
                        'online' : '#6db6da',
                        'exhibitions' : '#95bf21',
                        'marketing' : '#efd599'
                        };

  // Extract the service list from the link's rel attr
  var services = el.rel.split(' ');
  
  // Add the active class to those services
  $(services).each(function(){

    // Find out which section this service lives in
    var parentClasses = $('#'+this).parent().parent().attr('class').split(' ');

    var name = parentClasses[1];
    
    
    // switch the colour properties
    $('#'+this).css({backgroundColor : sectionColours[name], color : sectionColours[name]});
  });
}

function toggleGrid(type) {

  if(type == 'vertical') {
    var grid = $('div#vertical');
  }
  if(type == 'horizontal') {
    var grid = $('div#horizontal');
  }

  if(grid.attr('rel') == 'off')
    grid.css('display','block').attr('rel', 'on');
  else
    grid.css('display', 'none').attr('rel', 'off');
}

function buildGrid(){

  var grid = $('div#grid');

  var lineHeight = 16;
  var docHeight = $('body').height();
  var horzLineCount = Math.floor(docHeight / lineHeight);
  var vertLineHeight = horzLineCount * 16;

  // vertical lines
  var container = $('<div id="vertical" rel="off"></div>').addClass('container').appendTo(grid);
  var wrap = $('<div></div>').addClass('wrapper').appendTo(container);

  // line elements
  for(i=0;i<12;i++) {
    var lineV = $('<div></div>').addClass('v').appendTo(wrap).css('height', vertLineHeight);
  }

  // horizontal lines
  var container = $('<div id="horizontal" rel="off"></div>').addClass('container').appendTo(grid);

  // line elements
  for(i=0;i<horzLineCount;i++) {
    var lineH = $('<div></div>').addClass('h').appendTo(container);
  }
}

function formatText(index, panel) {
    return index + "";
};