/* -----------------------------------
   =GENERAL ATTRIBUTES
-------------------------------------- */

$(document).ready(function() {
  $('#example-manipulation-css .button').click(function() {
    if ( $(this).is('.trigger') ) {
      var $demobox = $(this).parents('div.example').find('div.demo-box');
      $(this).log('border=: ' + $demobox.css('border'));
      $(this).log('borderLeft=: ' + $demobox.css('borderLeft'));
      $(this).log('borderLeftWidth=: ' + $demobox.css('borderLeftWidth'));
    } else {
        $('#example-manipulation-css .demo-box').css('backgroundColor','yellow');
        $('#example-manipulation-css .demo-box').css({textAlign: 'right', borderLeftWidth: '5px'});
    }
  });

});

$(document).ready(function() {
  $('#example-manipulation-attr .button').click(function() {
    if ( $(this).is('.trigger') ) {
      var boxTitle = $(this).parents('div.example').find('div.demo-box').attr('title');
      $(this).log('Title attribute of <div class="demo-box"> is: ' + boxTitle); 
    } else {
  $('#example-manipulation-attr .demo-box').attr('title', 'This is a new title!');
    }
  });
});

$(document).ready(function() {
  $('#example-manipulation-val .button').click(function() {
    if ( $(this).is('.trigger') ) {
      var demoMessage1 = 'The value of <input type="text" value="text input" /> is: ' + "\n";
      var demoContents1 = $(this).parents('div.example').find('div.demo-container :text').val();
      var demoMessage2 = 'And the value of <textarea rows="8" cols="40">text in a textarea</textarea> is: ' + "\n";
      var demoContents2 = $(this).parents('div.example').find('div.demo-container textarea').val();
      $(this).log(demoMessage1 + demoContents1);
      $(this).log(demoMessage2 + demoContents2);
    } else {
      $('#example-manipulation-val :text').val('new value');
      $('#example-manipulation-val textarea').val('more in textarea');
    }
  });
});

$(document).ready(function() {
  $('#example-manipulation-html .button').click(function() {
    if ( $(this).is('.trigger') ) {    
      var demoContents = $(this).parents('div.example').find('div.demo-container').html();
      $(this).log('The HTML content of <div class="demo-container"> is: ' + "\n" + demoContents);
    } else {
  $('#example-manipulation-html .demo-box').html('<strong>This</strong> is <em>new</em> content.');
    }
  });  
});

$(document).ready(function() {
  $('#example-manipulation-text .button').click(function() {
    if ( $(this).is('.trigger') ) {    
      var demoContents = $(this).parents('div.example').find('div.demo-container').text();
      $(this).log('The text content of <div class="demo-container"> is: ' + "\n" + demoContents);
    } else {
  $('#example-manipulation-text .demo-box').text('<strong>This</strong> isê <em>new</em> content.');
    }
  });  
});

$(document).ready(function() {
  $('#example-manipulation-add-class .trigger').click(function() {
    var $demoBox = $(this).parents('div.example').find('div.demo-box');
    $demoBox.addClass('new-class');
    var boxClass = $demoBox.attr('class');
    $(this).log('Class attribute of the <div> is: ' + boxClass);
  });
});

$(document).ready(function() {
  $('#example-manipulation-toggle-class .trigger').click(function() {
    var $demoBox = $(this).parents('div.example').find('div.demo-box');
    $demoBox.toggleClass('new-class');
    var boxClass = $demoBox.attr('class');
    $(this).log('Class attribute of the <div> is: ' + boxClass);
  });
});

$(document).ready(function() {
  $('#example-manipulation-dim .button').click(function() {
    if ( $(this).is('.trigger') ) {
      var demoWidth = $(this).parents('div.example').find('div.demo-box').width() ;
      var demoHeight = $(this).parents('div.example').find('div.demo-box').height() ;
      $(this).log('The width of <div class="demo-box"> is: ' + demoWidth + ' and the height is: ' + demoHeight);
    } else {
      $('#example-manipulation-dim .demo-box').height(25).width(320);
    }
  });  
});

$(document).ready(function() {
  $('#example-manipulation-offset .trigger').click(function() {
    var $demoBox = $(this).parents('div.example').find('div.demo-box');
    var op = $demoBox.offsetParent();
    var pos = $demoBox.position();
    var off = $demoBox.offset();
    $(this).log('For <div class="demo-box"> -- offset is: left ' + off.left + '/top ' + off.top + ' and position is left ' + pos.left + '/top ' + pos.top + ', relative to its offset parent, ' + op[0].className);
  });
  
});