var $j = jQuery.noConflict();

// Use jQuery via $j(...)
$j(document).ready(function(){

    setupLinks();
    setupDialog();

    imageRollover();
    styleFadeIn();
    
	$j('a[rel=lightbox]').lightBox();

});


// image rollover function
function imageRollover() {
    $j('img[data-hover]').hover(function() {
        $j(this).attr('tmp', $j(this).attr('src')).attr('src', $j(this).attr('data-hover')).attr('data-hover', $j(this).attr('tmp')).removeAttr('tmp');
    }).each(function() {
        $j('<img />').attr('src', $j(this).attr('data-hover'));
    });;
}; // end image rollover function

// image fade in function
function styleFadeIn() {
$j("img.stylebook").fadeIn("40000");
}; // end image fade in function


// Load a new page and place it in the dialog
function loadPage( page ) {
  $j('#dialog-content').load( page + ' #style_info > *', function() { $j('#style_info');});
  
}

function setupLinks() {
  $j('img.stylebook').click( function(e) {
    // prevent default link action
    e.preventDefault();
 
    // Hide the scrollbars
    $j('body').css('overflow', 'hidden');
 
    // clear the dialog content
    $j('#dialog-content').empty();
    // start loading the new content
    loadPage( $j(this).parent().attr('href') );
    // open the new dialog
    var id = '#content-dialog';  
 
    //Get the screen height and width  
    var maskHeight = $j(document).height();  
    var maskWidth = $j(window).width();  
 
    //Set height and width to mask to fill up the whole screen  
    $j('#mask').css({'width':maskWidth,'height':maskHeight,'top':0,'left':0});  
 
    //transition effect       
    $j('#mask').fadeIn(300);      
    $j('#mask').fadeTo("fast",0.8);    
 
    //Get the window height and width  
    var winH = $j(window).height();  
    var winW = $j(window).width();  
 
    //Set the popup window to center  
    $j(id).css('top',  parseInt((winH/2-$j(id).height()/2) + $j(document).scrollTop()));  
    $j(id).css('left', winW/2-$j(id).width()/2);  
 
    //transition effect  
    $j(id).fadeIn(500);
  });
}

function setupDialog() {
  //if close button is clicked  
  $j('.window .close').click(function (e) {  
      //Cancel the link behavior  
      e.preventDefault();  
      $j('#mask, .window').hide();
      $j('body').css('overflow', 'auto');
  });       
  //if mask is clicked  
  $j('#mask').click(function () {  
      $j(this).hide();  
      $j('.window').hide();
      $j('body').css('overflow', 'auto');
  });
}