function dom_init() {


	$('.article-wrapper-start img').fadeTo("fast", 0.33);
	$('.flickr_badge_image img').fadeTo("fast", 0.33);
		
	doHover('.article-wrapper-start img');
	doHover('.flickr_badge_image img');
	
	//initialize hide container depending on cookie
	if ($.cookie('showMeta') === 'hidden') {
        $('.hide-container').hide();
    }
    else {
	    $('.hide-container').show();
    }
	
	//toggle container and set cookie depending on state	
	$('h4').click(function() {
      $('.hide-container').toggle("slow");
      if ($.cookie('showMeta') === 'hidden') {
      	$.cookie('showMeta', '' );
      }else{
        $.cookie('showMeta','hidden');
      }
    }); 

}

   
function doHover(myElement){
   	
   	 $(myElement).hover(
      function () {
        $(this).fadeTo("fast", 1.0);
      }, 
      function () {
        $(this).fadeTo("fast", 0.33);
      }
    );
}



/*  
	jQuery Slider
	via: http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/ 
	-> my fork:
*/

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 700;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  slides
  .wrapAll('<div id="slideInner"></div>')
  .css({
    'float' : 'left',
    'width' : slideWidth
  });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert left and right arrow controls in the DOM
  $('#control_container')
	.prepend('<span class="control" id="noOfSlides">Slides</span>')
    .prepend('<span class="control" id="rightControl">&nbsp;Next&nbsp;&#187;&nbsp;&nbsp;</span>')
    .prepend('<span class="control" id="leftControl">&#171;&nbsp;Previous&nbsp;</span>');

  // Hide left arrow control on first load
  displayCurrent(currentPosition);
  manageControls(currentPosition);
  

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
      currentPosition = ($(this).attr('id')=='rightControl')
    ? currentPosition+1 : currentPosition-1;
	  
	    if(currentPosition <= 0) { currentPosition = 0 };
      if(currentPosition >= numberOfSlides-1) { currentPosition = numberOfSlides-1 };
       
	  
  	    // Hide / show controls
      manageControls(currentPosition);
      displayCurrent(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });
  
  function displayCurrent(position){
	//adding +1 because of array 0
		 $('span#noOfSlides').text(  (position+1) + "/" + (numberOfSlides) );
  } 

  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').fadeTo("fast", 0.33); }
    else{ $('#leftControl').fadeTo("fast", 1); }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').fadeTo("fast", 0.33); }
    else{ $('#rightControl').fadeTo("fast", 1); }
    }
  });