var pr = function( obj )
{
  if( typeof console == 'object' )
  {
    for( i in obj )
    {
      console.log( i + ' is: ' + obj[i] );	    
    }
  }
}

var cl = function( msg )
{
  if( typeof console == 'object' )
  {
    console.log( msg );	    
  }
}

var id = function( el )
{
  return document.getElementById( el );
}

var isset = function( is_obj )
{
  if( typeof us_obj == 'undefined' )
  {
    return false;	  
  }
  else
  {
    return true;
  }
}

var fadeBG = {
  // call this to use shadow in an iframe
  fadeInIframe: function ( url, fields )
  {
    // fade in background
    fadeBG.fadeInBg( function ()
    {
      var top = winDim.getScrollTop() + 100; // add 100 px to the scroll
      var iframe = '\
  <iframe id="asset_iframe" style="background-color: #ffffff; border: none; height: 430px; width: 600px; z-index: 15; position: absolute; top: '+top+'px; left: 50%; margin-left: -300px;" src="'+url+'"></iframe>\
      ';
      $( 'body' ).prepend( iframe );
      $( id( 'fade_bg' )).click( function() { fadeBG.closeshadowIframe() });
    });
    
  },
    // removes iframe
   closeshadowIframe: function ()
  {
    $( '#asset_iframe' ).remove();
    fadeBG.fadeOutBg();
  },
  
  
  // use this to shadow in a slide show - must also have shadowSlideShow object
  fadeInShadowSlideShow: function ( cb )
  {
    fadeBG.fadeInBg( function ()
    {
      shadowSlideShow.init( );
      
      $( id('fade_bg' )).click( function ()
      {
         shadowSlideShow.closeshadowSlideShow();
      })
     
    });
  },
  // fades out the BG
  fadeOutBg: function ()
  { 
    $( id( 'fade_bg' )).fadeOut( 500, function () 
    {
      $( 'fade_bg' ).remove();
    })
  },
  // fades in the bg. Change the opacity in the fadeTo func (second argument)
  fadeInBg: function ( cb )
  {
    if( id( 'fade_bg' ))
    {
      //fade background exists so remove it
      $( id( 'fade_bg' )).remove();
    }
    $( 'body' ).prepend(
      '<div id="fade_bg"></div>'
    )
    $( '#fade_bg' ).css({ 
      'opacity': 0,
      'z-index': 10, 
      'width': '100%', 
      'height': winDim.getDocHeight(),
      'position': 'absolute', 
      'left': 0, 
      'top': 0,
      'backgroundColor': 'black',
      'display': 'block'
    })
    .fadeTo( 750, .5, function()
    {
      
      if( typeof cb == 'function' )
      {
        cb();
      }
    });  
  }
} // end fadeBG

/**
 *
 * Set up: You need to create the object called: imgObject below by supplying the root directory
 * for the images and then by filling in each of
 * the images you would like in the slide show. Each imgObject image should have a width height
 * filename and caption. Filenames must be unique - only one root allowed
 *
 * in the function shadowSlideShow.showContainer, change the next back images to your preference
 *
 * Then use the $ dom ready function: $().ready(, and attach the the fadeBG function
 * fadeBG.fadeInShadowSlideShow() to an onclick of whatever element you choose.
 *
 * adjust containers is the fuction that initiates a change from one image to the next.
 * It chagnes the container size, then on completion calls the function that checks to
 * see if the image is loaded. If the image is loaded then the callback to fade that image.
 *
 * The function that sets up the callbacks is showImg - 
 *
 */
var shadowSlideShow = {
  count: 0,
  imgArr: [],
  imgCount: 0,
  autoPlayTimeout: {},
  // recursive test to make sure the image exists
  is_loaded: function ( img, cb )
  {
    if( img.height > 0  )
    {
      shadowSlideShow.count = 0;
      cb();
    }
    else
    {
      shadowSlideShow.count++;
      
      if( shadowSlideShow.count > 5 * 1000 )
      {
        return false; // silently die if there is something wrong with loading this image
      }
      setTimeout( function () { shadowSlideShow.is_loaded( img, cb ); }, 1 );
    }
    
  },
  // image preloader, called in the init function
  loadImages: function ()
  {
    // assumes image object is "imageObject" to modularize this, just need to pass as an argument
    for( i in imgObject.images )
    {
      img = new Image();
      img.src = '/' + imgObject.root + '/' + imgObject.images[i].src;
      shadowSlideShow.imgArr.push( img );
    }
  },
  // create the basic HTML for the slide show and prepend the body tag
  showContainer: function ()
  {
    var html = '\
      <div id="shadow-content-container" style="float:left; background-color: #000000; position: absolute; z-index: 15; overflow: visible !important;">\
        <div id="image-holder" style="height: 100%; overflow: hidden;"></div>\
        <div id="caption-holder" style="height: 20px;  padding: 8px 0px 0px 0px;  width: 100%; position: absolute; bottom: -20px; background-color: #FFCC00; color: #666; ">\
            <div id="ss-close-button" style="float:left; margin-right: 10PX; cursor: pointer;  height: 20px; background-color: #FFCC00; font-family: arial, helvetica, sans-serif; font-size:12px;">&nbsp;&nbsp;<img src="../images/adwords/close_ss.gif"></div>\
		  <div id="auto-play-button" style="float:right; margin-right: 10PX; cursor: pointer;  height: 20px; background-color: #FFCC00; font-family: arial, helvetica, sans-serif; font-size:12px;"><img src="../images/adwords/play.gif"></div>\
          <div id="auto-pause-button" style="display: none; float:right; margin-right: 10PX; cursor: pointer;  height: 20px; background-color: #FFCC00; font-family: arial, helvetica, sans-serif; font-size:12px; "><img src="../images/adwords/pause.gif"></div>\
          <div id="next-button" style="float:right; margin-right: 10PX; cursor: pointer;  height: 20px; background-color: #FFCC00; font-family: arial, helvetica, sans-serif; font-size:12px;"><img src="../images/adwords/next.gif"></div>\
          <div id="prev-button" style="float:right; cursor: pointer;  height: 20px; background-color: #FFCC00; font-family: arial, helvetica, sans-serif; font-size:12px;"><img src="../images/adwords/prev.gif">&nbsp;&nbsp;</div>\
          <p id="caption" style="float: left; color: #ffffff;"><!-- / --></p>\
        </div>\
      </div>';
    $('body').prepend( html );
    var top = ( winDim.getScrollTop() + ( winDim.getHeight() / 2 ));   
    $( '#shadow-content-container' ).css({
      'height': '0px',
      'width': '0px',
      'top': top + 'px',
      'left': '50%'
    });
  },
  // first in chain, changes the box to match the size of the next image
  adjustContainer: function ( im_obj, cb )
  {
    if( id( 'slide-image' ))
    {
      $( '#slide-image' ).fadeOut();
    }
    $( id('caption') ).fadeTo( 250, .01 );
    var marg = -1 * ( im_obj.width / 2 );
    var top = winDim.getScrollTop() + ( winDim.getHeight() / 2 ) - ( im_obj.height / 2 );
    $( '#shadow-content-container' ).animate( { 
      'width': im_obj.width, 
      'height': im_obj.height, 
      'margin-left': marg, 
      'top': top 
    }, 550, function () { 
      if( typeof cb == 'function' )
      {
        cb();
      }
    });
  },
  // starts / controls the chain of actions to move from one image to the next
  autoPlay: function ()
  {
    shadowSlideShow.imgCount++;
    shadowSlideShow.showImg( );
    
    id( 'auto-play-button' ).style.display = 'none';
    id( 'auto-pause-button' ).style.display = 'block';
    
    
    shadowSlideShow.autoPlayTimeout = setTimeout( function ()
    {
      shadowSlideShow.autoPlay();
    }, 3 * 1000 );
  },
  killAutoPlay: function ()
  {
    clearTimeout( shadowSlideShow.autoPlayTimeout );
    id( 'auto-play-button' ).style.display = 'block';
    id( 'auto-pause-button' ).style.display = 'none';
  },  
  showImg: function ( )
  {
    shadowSlideShow.fixImgCount();
    var img = shadowSlideShow.imgArr[ shadowSlideShow.imgCount ];
    shadowSlideShow.adjustContainer( shadowSlideShow.getBySrcFromImgObject( img.src ), function ()
    {
      shadowSlideShow.is_loaded( img, function()
      {
        var im_obj = shadowSlideShow.getBySrcFromImgObject( img.src );
        id( 'image-holder' ).innerHTML = '<img style="display: none;" id="slide-image" src="' + img.src + '" />';
        cl( 'inner html: ' + id('image-holder').innerHTML );
        $( '#slide-image' ).fadeIn( 'fast', function()
        { 
          id('caption').innerHTML = im_obj.caption ? im_obj.caption : '<!-- / -->'; // prevents sporkage in IE
          $( id('caption') ).fadeTo( 250, 1 ); // don't fade out to avoid the display: none and prevent the buttons from dissappering
        });
      })
    });
  },
  // if our current count is outside of the img array set it to beginning or end
  fixImgCount: function ()
  {
    /**
     * instead of using a modulo we're just going to force it to one end or the other
     * assuming if is it less than zero then a decrement was used
     * and if greater than the length than an increment was used
     */
    if( shadowSlideShow.imgCount >= shadowSlideShow.imgArr.length )
    {
      shadowSlideShow.imgCount = 0;
    }
    if( shadowSlideShow.imgCount < 0 )
    {
      shadowSlideShow.imgCount = ( shadowSlideShow.imgArr.length - 1 );
    }  
  },
  // used to relate images on array to imgObject
  getBySrcFromImgObject: function( my_src )
  {
    var src = my_src.split( '/' ).pop(); // just get the image filename
    for( i in imgObject.images )
    {
      if( imgObject.images[ i ].src == src )
      {
        return imgObject.images[i];
      }
    }
  },
  // removes both parts
  closeshadowSlideShow: function ()
  {
    $( '#shadow-content-container' ).remove();
    fadeBG.fadeOutBg();
  },
  
  /**
   * init creates container, preloads images and attaches events
   * to the newly created next and back buttons
   */
  init: function ()
  {
    shadowSlideShow.showContainer();
    shadowSlideShow.loadImages();
    
    shadowSlideShow.showImg( );
    $( '#auto-play-button' ).click( function (ev)
    {
      ev.preventDefault();
      shadowSlideShow.autoPlay();
    });
	$( '#ss-close-button' ).click( function (ev)
    {
      ev.preventDefault();
      shadowSlideShow.closeshadowSlideShow();
    });
    $( '#auto-pause-button' ).click( function (ev)
    {
      ev.preventDefault();
      shadowSlideShow.killAutoPlay();
    });
    $( '#next-button' ).click( function (ev)
    {
      ev.preventDefault();
      shadowSlideShow.killAutoPlay( );
      shadowSlideShow.imgCount++;
      shadowSlideShow.showImg( );
    });
    $( '#prev-button' ).click( function (ev)
    {
      ev.preventDefault();
      shadowSlideShow.killAutoPlay( );
      shadowSlideShow.imgCount--;
      shadowSlideShow.showImg( );
    });
  }
}



var imgObject = {
  'root': 'images/slideshow',
  'images' : {
    'img1': {
      'src': '1.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img2': {
      'src': '2.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img3': {
      'src': '3.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img4': {
      'src': '4.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img5': {
      'src': '5.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img6': {
      'src': '6.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img7': {
      'src': '7.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img8': {
      'src': '8.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img9': {
      'src': '9.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img10': {
      'src': '10.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img11': {
      'src': '11.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img12': {
      'src': '12.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img13': {
      'src': '13.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img14': {
      'src': '14.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img15': {
      'src': '15.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img16': {
      'src': '16.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img17': {
      'src': '17.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    },
    'img19': {
      'src': '19.jpg',
      'width': 571,
      'height': 315,
      'caption': ''
    }
   
  }
}


winDim = {
  // uses $ to return the distance the window has been scrolled down.
  getScrollTop: function ()
  {
    return $(window).scrollTop();
  },
  // gets the full height of the window, including parts not seen
  getDocHeight: function ()
  {
    var db = document.body;
    var de = document.documentElement
    return Math.max(
      Math.max(db.scrollHeight, de.scrollHeight),
      Math.max(db.offsetHeight, de.offsetHeight),
      Math.max(db.clientHeight, de.clientHeight)
    );
  },
  // may or may not include the scroll bar on the right
  getWidth: function ()
  {
    var x = 0;
    if (self.innerHeight) {
      x = self.innerWidth;
    } else if (document.documentElement && document.documentElement.clientHeight) {
      x = document.documentElement.clientWidth;
    } else if (document.body) {
      x = document.body.clientWidth;
    }
    return x;
  }, // end get wid
  // gets the window frame instead of the document height
  getHeight: function ()
  {
    var y = 0;
    if (self.innerHeight) {
      y = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
      y = document.documentElement.clientHeight;
    } else if (document.body) {
      y = document.body.clientHeight;
    }
    return y;
  } // end get ht
}; // end winDim


/**
 * 
 * Initialize the shadow slide show
 *
 */

$().ready( function (){                     
  $( '#att_form' ).click( function (ev)  {
    ev.preventDefault();
    fadeBG.fadeInIframe('/lp/att_form.php');
  });
  
  
 $( '#perf_form' ).click( function (ev)  {
    ev.preventDefault();
    fadeBG.fadeInIframe('/lp/perf_form.php');    
  });



 $( '#sb_slideshow' ).click( function (ev)  {
    ev.preventDefault();
    fadeBG.fadeInShadowSlideShow();
  });
 
  $( '#close_iframe' ).click( function (ev)  {
    ev.preventDefault();
    fadeBG.closeshadowIframe();
  });


});