/**
* PayPal Shop Class [ppShop]
* - initialize
* - start
* - end
*/
var ppShopBox = Class.create();

ppShopBox.prototype = {
  
  /**
  * initialize()
  * - acts as Constructor class
  */
  initialize: function( args )
  {
    // get the specific line-item to modify
    var objLineItem = document.getElementById( args.div );

    // ensure the html element is accessible
    if( !objLineItem )
    {
      // cannot be accessed return
      return;
    }
    else
    {
      // assign the overlay div an id name
      var overlayDiv = args.div + '_overlay';

      // assign the content div an id name
      var contentDiv = args.div + '_content';

      // assign the loading div an id name
      var loadingDiv = args.div + '_loading';
      
      // assign the sub content div an id name
      var subContentDiv = args.div + '_subcontent';

      // check to see if this overlay div already exists
      if( document.getElementById( overlayDiv ) )
      {
        // use the existing div
        var objOverlay = document.getElementById( overlayDiv );
      }
      else
      {
        // create the overlay div
        var objOverlay = document.createElement( 'div' );

        // append the overlay div to the line-item
        objLineItem.appendChild( objOverlay );
      }
      
      // check to see if this content div already exists
      if( document.getElementById( contentDiv ) )
      {
        // use the existing div
        var objContent = document.getElementById( contentDiv );
      }
      else
      {
        // create the content div
        var objContent = document.createElement( 'div' );
        
        // append the content div to the line-item
        objLineItem.appendChild( objContent );
      }

      // get the height of the line item
      line_item_height = Element.getHeight( objLineItem );

      // set the attributes and styles for the overlay div
      objOverlay.setAttribute('id', overlayDiv);
      objOverlay.setAttribute('class', 'pp_overlay');
      objOverlay.style.display = 'none';
      objOverlay.style.height = ( line_item_height + 10 ) + 'px';
      objOverlay.style.top = '-' + line_item_height + 'px';

      // create easy method to close ppShopBox
      objOverlay.onclick = function()
      {
        // call the end method
        // pass the overlayDiv name
        ppShopBox.prototype.end( {id: args.id, div_overlay: overlayDiv, div_content: contentDiv} );
      }

      // set the attributes and styles for the content div
      objContent.setAttribute('id', contentDiv);
      objContent.setAttribute('class', 'pp_content');
      objContent.innerHTML = '';
      objContent.style.display = 'none';
      objContent.style.top = '-' + ( line_item_height + line_item_height - 4 ) + 'px';
      
      // create easy method to close ppShopBox
      objContent.onclick = function()
      {
        // call the end method
        // pass the overlayDiv name
        ppShopBox.prototype.end( {id: args.id, div_overlay: overlayDiv, div_content: contentDiv} );
      }
      
      // set the objLineItem height
      objLineItem.style.height = ( line_item_height - 24 ) + 'px';

      // check to see if this loading div already exists
      if( document.getElementById( loadingDiv ) )
      {
        // use the existing div
        var objLoading = document.getElementById( loadingDiv );
      }
      else
      {
        // create the content div
        var objLoading = document.createElement( 'div' );
        
        // set the attributes and styles for the loading div
        objLoading.setAttribute('id', loadingDiv);
        objLoading.setAttribute('class', 'pp_loading');

        // create the html for the loading div
        loading_inner_html = '<img src=\'/images/common/spinner.gif\' alt=\'Loading..\'/>';
        loading_inner_html = loading_inner_html + 'Please wait while we process your request..';
        objLoading.innerHTML = loading_inner_html;
        
        // append the loading div to the content div
        objContent.appendChild( objLoading );
      }
      
      // check to see if this sub-content div already exists
      if( document.getElementById( subContentDiv ) )
      {
        // use the existing div
        var objSubContent = document.getElementById( subContentDiv );
      }
      else
      {
        // create the content div
        var objSubContent = document.createElement( 'div' );
        
        // set the attributes and styles for the sub-content div
        objSubContent.setAttribute('id', subContentDiv);
        objSubContent.setAttribute('class', 'pp_subcontent');
        
        // create the html for the loading div
        sub_content_inner_html = '<img src=\'/images/icons/tick.png\' alt=\'Saved!\'/>';
        sub_content_inner_html = sub_content_inner_html + 'This item has been added to your cart!<br />';
        sub_content_inner_html = sub_content_inner_html + '<a href=\'/shop/manage/view\'>You may view your cart at anytime.</a>';
        objSubContent.innerHTML = sub_content_inner_html;
        
        // append the sub-content div to the content div
        objContent.appendChild( objSubContent );
      }
      
      // Always default to showing the loading div
      Element.show( objLoading );

      // Always default to hiding the subcontent div
      Element.hide( objSubContent );

      // fade in the boxes
      ppShopBox.prototype.start( {id: args.id, div_overlay: overlayDiv, div_content: contentDiv} );
      
      // make the ajax request
      ppShopBox.prototype.add_cart( {id: args.id, div_overlay: overlayDiv, div_content: contentDiv, div_loading: loadingDiv, div_sub_content: subContentDiv} );
    }
  },
  
  /**
  * start()
  * - fades the ppShopBox into focus over the line-item
  */
  start: function( args )
  {
    // display the overlay and content divs
		new Effect.Appear( args.div_overlay, {duration: 0.3, from: 0.0, to: 0.5, queue: {position: 'front', scope: 'ppstartscope' + args.id, limit: 2} });
		new Effect.Appear( args.div_content, {duration: 0.3, from: 0.0, to: 0.95, queue: {position: 'end', scope: 'ppstartscope' + args.id, limit: 2} });
	},
  
  /**
  * end()
  * - fades the ppShopBox back to hidden state
  * - returns any changes back to original state
  */
  end: function( args )
  {
    // fade the content and overlay divs
    new Effect.Fade( args.div_content, {duration: 0.3, queue: {position: 'front', scope: 'ppendscope' + args.id, limit: 2} });
    new Effect.Fade( args.div_overlay, {duration: 0.3, queue: {position: 'end', scope: 'ppendscope' + args.id, limit: 2} });
  },
  
  /**
  * add_cart()
  * - uses an AJAX request to add shop items to the session cart
  */
  add_cart: function( args )
  {
    // make the AJAX request
    new Ajax.Request( '/shop/manage/add/' + args.id, {method: 'get', onSuccess:add_cart_success} );
  
    function add_cart_success()
    {
      // fade the loading and sub-content divs
      new Effect.Fade( args.div_loading, {duration: 1, queue: {position: 'front', scope: 'ppaddcartsuccessscope' + args.id, limit: 2} });
      new Effect.Appear( args.div_sub_content, {duration: 1, from: 0.0, to: 1, queue: {position: 'end', scope: 'ppaddcartsuccessscope' + args.id, limit: 2} });
    }
  }
}