/*****************************************************

Structure:
 @ Attribute:             preloadRollOver       -- roll over images
 @ window.onerror:                              -- displays javascript errors
 @ Function:              clearSelection        -- clears text selection
 @ Function:              getBrowserWindowSize  -- gets browser window size
 @ window.onresize:                             -- redefine browser window size
 @ Function               str_replace           -- PHP str_replace equivalent

*****************************************************/

/**
 * Preload images
 */
var preloadRollOver = '<div class="preloadRollOver">'+
                      ' <div id="_door1"></div>'+
                      ' <div id="_door2"></div>'+
                      ' <div id="_door3"></div>'+
                      ' <div id="_door4"></div>'+
                      ' <div id="_door5"></div>'+
                      ' <div id="_door6"></div>'+
                      ' <div id="_menu1"></div>'+
                      ' <div id="_menu2"></div>'+
                      ' <div id="_menu3"></div>'+
                      ' <div id="_menu4"></div>'+
                      ' <div id="_menu5"></div>'+
                      ' <div id="_menu6"></div>'+
                      ' <div id="_btnLeft"></div>'+
                      ' <div id="_btnRight"></div>'+
                      ' <div id="_blogborder1"></div>'+
                      '</div>';

/**
 * Display JavaScript errors
 */
window.onerror=function(desc,page,line,chr)
{
  alert('JavaScript error occurred! \n'
  +'\nError description: \t'+desc
  +'\nPage address:      \t'+page
  +'\nLine number:       \t'+line
  );
}

/**
 * Function: clearSelection
 * i.v.m. selecteren tekst bij klikken (rechts naar links) op deur 
 */
function clearSelection()
{
   var sel;
   if(document.selection && document.selection.empty){
     document.selection.empty() ;
   } else if(window.getSelection) {
     sel=window.getSelection();
     if(sel && sel.removeAllRanges)
       sel.removeAllRanges() ;
   }
}

/**
 * Function: getBrowserWindowSize()
 */
function getBrowserWindowSize() {
  var browserwindow = new Array();
  browserwindow['myWidth'] = 0;
  browserwindow['myHeight'] = 0;

  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    browserwindow['myWidth'] = window.innerWidth;
    browserwindow['myHeight'] = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    browserwindow['myWidth'] = document.documentElement.clientWidth;
    browserwindow['myHeight'] = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    browserwindow['myWidth'] = document.body.clientWidth;
    browserwindow['myHeight'] = document.body.clientHeight;
  }

  return browserwindow;
}

window.onresize = getBrowserWindowSize;

/**
 * Function: str_replace()
 */
function str_replace (search, replace, subject, count) {
  f = [].concat(search),
  r = [].concat(replace),
  s = subject,
  ra = r instanceof Array, sa = s instanceof Array;    s = [].concat(s);

  if (count) {
      this.window[count] = 0;
  }

  for (i=0, sl=s.length; i < sl; i++) {
    if (s[i] === '') {
        continue;
    }
    for (j=0, fl=f.length; j < fl; j++) {            temp = s[i]+'';
        repl = ra ? (r[j] !== undefined ? r[j] : '') : r[0];
        s[i] = (temp).split(f[j]).join(repl);
        if (count && s[i] !== temp) {
            this.window[count] += (temp.length-s[i].length)/f[j].length;}
    }
  }
  return sa ? s : s[0];
}

/**
 * jQuery onReady functions
 * jQuery.noConflict();
 */
jQuery(document).ready(function($){

   /**
    * Shortcut for portfolio viewer
    */
   $(".show").colorbox({width:"100%", height:"100%", iframe:false});
   $(document).bind('keydown', 'alt+p', show);
   function show(){ $(".show").colorbox({width:"100%", height:"100%", iframe:false, open:true}); }

  /**
   * Get section based on URL
   */
  var url = String(window.location);
  var part_of_url = new Array;

  // get section based on #page
  part_of_url['hash'] = url.split("#");

  // get section based on section
  part_of_url['section'] = url.split("section=");
  if(part_of_url['section'][1]){

    var tmp = part_of_url['section'][1].split("&");
    if(tmp[0]){
      part_of_url['section'] = tmp[0]
    }else{
      part_of_url['section'] = part_of_url['section'][1];
    }  

  }
  else
  {
    part_of_url['section'] = null;
  }

  part_of_url['itemId'] = url.split("itemId=");
  
  if(part_of_url['hash'][1]){
    var section = part_of_url['hash'][1];
  }
  else if(part_of_url['section']){
    var section = part_of_url['section'];
  }
  else
  {
    var section = 'aangenaam';
  }

  // get blogpostId based on $_GET variable
  part_of_url['blogpostId'] = url.split('&blogpostId=');

  /**
   * Function: setMenuItemsNonActive()
   * set all menu items to inactive
   */
  function setMenuItemsNonActive(click_id)
  {
    $('.door').removeClass('active');
    $('#menu > ul > li > a').removeClass('active');
    $('#menu > ul > li > a.'+click_id).addClass('active');
  }

  /**
   * Function: scrollToDoor()
   * scroll to door
   */
  var current_door = 'none';
  function scrollToDoor(position, door_id, new_width, new_height)
  {
    // set max height
    if(new_height > (browserwindow['myHeight']-140)){
      new_height = browserwindow['myHeight']-140;
    }

    position = (position >= 50) ? position-50 : 0;

    // stop resizing other doors
    /*$.each($('.door'), function(){
      if(current_door != this.id){
        $('#'+door_id).stop(true, true);
      }
    });*/

    $('body').stop(true, true);
    $('body').scrollTo(position, 800, {margin:true, offset:{top:0, left:0}});
    $('#'+door_id).animate({width:new_width,height:new_height}, 800);
		$('#'+door_id+' .inner').show();
    setTimeout(function(){clearSelection();},800);
    if(door_id == 'contact') setTimeout(function(){document.contact_form.email.focus();},810);
		current_door = door_id;
	}

  /**
   * Functions: closing doors
   * closeDoor() and closeCurrentDoor()
   */
  function closeDoor(door_id,new_width,new_height)
  {
    clearSelection();

    if(new_width==null) new_width = 250;
    if(new_height==null) new_height = 330;

    $('#'+door_id).animate({width:new_width,height:new_height},400);
    $('#'+door_id+' .inner').hide();
    setMenuItemsNonActive();
  }

  /**
   * Menu + door open&close onClick function
   */
  var browserwindow = getBrowserWindowSize();
  var closed = false;

  //## hoogte wordt nu aan het begin bepaald.
  //## -> wanneer browserwindow van hoogte verandert -> opnieuw definieren

  var doors = {
    aangenaam : {click_id:'btn_aangenaam', door_id:'aangenaam', new_width:400, new_height:410},
    tuxion    : {click_id:'btn_tuxion',    door_id:'tuxion',    new_width:700, new_height:400},
    diensten  : {click_id:'btn_diensten',  door_id:'diensten',  new_width:650, new_height:410},
    portfolio : {click_id:'btn_portfolio', door_id:'portfolio', new_width:900, new_height:1000},
    blog      : {click_id:'btn_blog',      door_id:'blog',      new_width:450, new_height:1000},
    contact   : {click_id:'btn_contact',   door_id:'contact',   new_width:760, new_height:430}
  };

  $.each(doors, function(i){

    // doors[aangenaam] als aanroep mogelijk maken, i.p.v. doors[0]
    doors[doors[i].door_id] = doors[i];

    // offset
    doors[i].offset = $('#'+doors[i].door_id).offset();

    // bind #click_id onEventHandler:click 
    $('.'+doors[i].click_id).bind('click', function(){
      closeDoor(current_door);
      if(current_door != doors[i].door_id){
        scrollToDoor((doors[i].offset.left), doors[i].door_id, doors[i].new_width, doors[i].new_height);
        setMenuItemsNonActive(doors[i].click_id);
      }else{
        setMenuItemsNonActive();
        current_door = 'none';
      }
      return false;
    })
    $('.'+doors[i].click_id).bind('mouseover', function(){$('.'+doors[i].click_id).addClass('active');$('#'+doors[i].door_id).addClass('active');})
    $('.'+doors[i].click_id).bind('mouseout', function(){if(current_door != doors[i].door_id){$('#'+doors[i].door_id).removeClass('active');}if(current_door != doors[i].door_id){$('.'+doors[i].click_id).removeClass('active');}})

    // bind #door_id onEventHandler:click 
    $('#'+doors[i].door_id).bind('click', function(){
      if(current_door != doors[i].door_id && closed == false){
        closeDoor(current_door);
        scrollToDoor((doors[i].offset.left), doors[i].door_id, doors[i].new_width, doors[i].new_height);
        setMenuItemsNonActive(doors[i].click_id);
      }else{closed=false}
    })
    $('#'+doors[i].door_id).bind('mouseover', function(){$('.'+doors[i].click_id).addClass('active');})
    $('#'+doors[i].door_id).bind('mouseout', function(){if(current_door != doors[i].door_id){$('.'+doors[i].click_id).removeClass('active');}})

    // bind #door_id .close onEventHandler:click
    $('#'+doors[i].door_id+' .close').bind('click', function(){
      closeDoor(current_door);
      setMenuItemsNonActive();
      current_door = 'none';
      closed = true;
    })
  })

  if(doors[section])
  {
    setMenuItemsNonActive(doors[section].click_id);
    scrollToDoor((doors[section].offset.left), doors[section].door_id, doors[section].new_width, doors[section].new_height)
  }

  /**
   * Portfolio thumbnails
   */
  var thumbs = document.getElementById('portfolio_thumbs');
  var thumb_links = thumbs.getElementsByTagName('a');

  for(var i=0;i<thumb_links.length;i++)
  {
	  //thumb_links[i].url = str_replace("?section=portfolio&", "inc/pages/portfolio.php?", thumb_links[i].href);
	  thumb_links[i].url = str_replace("index.php?", "ajax.php?", thumb_links[i].href);

		$("#"+thumb_links[i].id).click(function(){

		  $.ajax({
        url: this.url,
        beforeSend: function() {$('#portfolio_item').html("<br /><br />Bezig met laden.");},
        success: function(data) {$('#portfolio_item').html(data);}
      });
      
      return false;
      
    });
  }

  // default portfolio item
  (part_of_url['itemId'][1]) ? itemId = part_of_url['itemId'][1] : itemId = 3;

  $.ajax({
    url: 'ajax.php?section=portfolio&itemId='+itemId,
    beforeSend: function() {$('#portfolio_item').html("<br /><br />Bezig met laden.");},
    success: function(data) {$('#portfolio_item').html(data);}
  });


  /**
   * Blog items
   */
  var blog_titles = $('#blog .item h3 a');

  for(var i=0; i<blog_titles.length; i++)
  {
		$('#'+blog_titles[i].id).click(function(){

      var blogpost_id   = str_replace('blogtitle','',this.id);

      var toggle        = $('.toggle',$(this))[0];
      var blogpost      = $('#blogpost'+blogpost_id);
      var blogpost_link = $('#blogpost'+blogpost_id+' h3 a');
      var blogpost_text = $('#blogpost'+blogpost_id+' .text');

      if(toggle.innerHTML == '-')
      {
        toggle.innerHTML = '+';

        blogpost_text.slideUp(400, function(){
          blogpost_text.html('');
        });

      }
      else
      {
        toggle.innerHTML = '-';
  	    load_url = str_replace("index.php?", "ajax.php?", blogpost_link[0].href);

  		  $.ajax({
          url: load_url,
          beforeSend: function(){
                        blogpost_text.show();blogpost_text.html("<br /><br />Bezig met laden.");
                      },
          success: function(data)
                   {
                     // add text to item
                     blogpost_text.hide();
                     blogpost_text.html(data);

                     // slideDown
                     blogpost_text.slideDown(800);
                         
                     // vertical scroll after timeout
                     setTimeout(
                       function(){
                         $('div#blog').scrollTo(blogpost, 400, {axis:'y', offset:{top:-5}});
                       }, 400
                     );
                   }
        });

      }

      return false;
    });
  }

  if(part_of_url['blogpostId'][1])
  {
    blogpost = $('#blogpost'+part_of_url['blogpostId'][1]);
    if(blogpost.length == 1)
    {
      setTimeout(
        function(){
          $('div#blog').scrollTo(blogpost, 1600, {axis:'y', offset:{top:-5}});
        }, 800
      );
    }
  }

  /**
   * Contact form validator
   */
  $(".submit").click(function() {
	
		var contact_email   = $("#contact_email").val();
		var contact_name    = $("#contact_name").val();
		var contact_company = $("#contact_company").val();
		var contact_phone   = $("#contact_phone").val();
		var contact_subject = $("#contact_subject").val();

	  if(contact_email == '')
	  {
      $("#contact_email").addClass('error');
      $("#contact_email").focus();
      return false;
    }
	  if(contact_name == '')
	  {
      $("#contact_name").addClass('error');
      $("#contact_name").focus();
      return false;
    }
	  if(contact_phone == '')
	  {
      $("#contact_phone").addClass('error');
      $("#contact_phone").focus();
      return false;
    }

		var dataString = 'contact_email='+contact_email+'&contact_name='+contact_name+'&contact_company='+contact_company+'&contact_phone='+contact_phone+'&contact_subject='+contact_subject;

		$.ajax({
      type: "POST",
      url: "ajax.php?section=contact",
      data: dataString,
      success: function() {
        $('.error').hide();
        $('#contact_form').html("<div id='form_message'></div>");
        $('#form_message').html("<h2>Dank!</h2>")
        .hide()
        .fadeIn(1500, function() {
          $('#form_message').append("<p>We nemen snel contact met u op.</p>")
        });
      }
     });
    return false;
	});

});/* eof:jQuery(document).ready(function($) */

/**
 * jQuery onLoad functions
 */
jQuery(window).load(function($){
  jQuery('body').append(preloadRollOver);
  jQuery('#bg_img').fadeIn(800);
});