/* ImageSwitch v1.0  "Next-Generation Image Rollovers!"
 * by Christopher Hilding [chris at pulseforce dot com]
 * Pulseforce.com - Online Marketing & Design Services!
 *
 * Compatibility: (tested)
 *
 * IE6, NS6, Firefox, Mozilla, Opera, Safari.
 * And probably most other browsers.
 *
 * Usage:
 *
 * 1. Put this in the HEAD section of your HTML:
 *
 * <script src="switch.js" type="text/javascript"></script>
 *
 * 2. For each image where you want the rollover effect, give it
 *    an ID (such as 'theimage' below). Each ID must be UNIQUE!
 *
 * <img id="theimage" src="image_off.gif">
 *
 * 3. Find the section below called "define rollover images here".
 *    Add one entry per image, such as the one below:
 *
 * addImageSwitch('theimage', 'image_on.gif', 'image_off.gif');
 *
 *    'theimage' = your image id
 *    'image_on.gif' = the "on" image
 *    'image_off.gif' = the "off" image
 *     Use your own values for each entry!
 *
 * That's it! The image will now react to the mouse cursor, and
 * all you had to do was give it an id and tell the script which
 * image id and on/off images to use. How easy can it get? ;)
*/

/*****************************   Loader   *******************************/

if (typeof window.addEventListener != 'undefined') {
  window.addEventListener('load', initImageSwitch, false);
} else if (typeof window.attachEvent != 'undefined') {
  window.attachEvent('onload', initImageSwitch);
} else {
  if (window.onload != null) {
    var oldOnload = window.onload;
    window.onload = function (e) {
      oldOnload(e);
      initImageSwitch();
    };
  } else {
    window.onload = initImageSwitch;
  }
}
/***************************   ImageSwitch   ****************************/

function initImageSwitch() {
  if (document.getElementById&&(window.addEventListener||window.attachEvent)) {
    // define rollover images here.
  	// Setup the main links

  	// Swedish Links
    addImageSwitch("link_prod_se", "img/links/se/link_produkter_over.png", "img/links/se/link_produkter_out.png");
    addImageSwitch("link_start_se", "img/links/se/link_start_over.png", "img/links/se/link_start_out.png");
    addImageSwitch("link_uthyr_se", "img/links/se/link_uthyrning_over.png", "img/links/se/link_uthyrning_out.png");
    addImageSwitch("link_kontakt_se", "img/links/se/link_kontakta_over.png", "img/links/se/link_kontakta_out.png");
    addImageSwitch("link_pers_se", "img/links/se/link_personal_over.png", "img/links/se/link_personal_out.png");

    // Setup the bottom links
    addImageSwitch("btm_prod_se", "img/links/se/btm_produkter_over.png", "img/links/se/btm_produkter_out.png");
    addImageSwitch("btm_start_se", "img/links/se/btm_start_over.png", "img/links/se/btm_start_out.png");
    addImageSwitch("btm_uthyr_se", "img/links/se/btm_uthyrning_over.png", "img/links/se/btm_uthyrning_out.png");
    addImageSwitch("btm_kontakt_se", "img/links/se/btm_kontakta_over.png", "img/links/se/btm_kontakta_out.png");
    addImageSwitch("btm_pers_se", "img/links/se/btm_personal_over.png", "img/links/se/btm_personal_out.png");

	// Set the flags
    addImageSwitch("flag_se", "img/flag_se_over.png", "img/flag_se_out.png");
    addImageSwitch("flag_en", "img/flag_en_over.png", "img/flag_en_out.png");

    // Setup the scroll buttons
    addImageSwitch("scrl_up", "img/scrl_uparrow_over.png", "img/scrl_uparrow_out.png");
    addImageSwitch("scrl_dwn", "img/scrl_dwnarrow_over.png", "img/scrl_dwnarrow_out.png");
    
    // Setup the common scroll button
	addImageSwitch("scrlup_btn", "img/scrlup_btn_over.png", "img/scrlup_btn_out.png");
	addImageSwitch("scrldwn_btn", "img/scrldwn_btn_over.png", "img/scrldwn_btn_out.png");
    
    // Setup the products
    addImageSwitch("0001", "img/cat/se/cat_blastermask_over.png", "img/cat/se/cat_blastermask_out.png");
    addImageSwitch("0002", "img/cat/se/cat_fargpumpar_over.png", "img/cat/se/cat_fargpumpar_out.png");
    addImageSwitch("0003", "img/cat/se/cat_skyddsutr_over.png", "img/cat/se/cat_skyddsutr_out.png");
    addImageSwitch("0004", "img/cat/se/cat_blastermed_over.png", "img/cat/se/cat_blastermed_out.png");
    addImageSwitch("0005", "img/cat/se/cat_trelawny_over.png", "img/cat/se/cat_trelawny_out.png");
    addImageSwitch("0006", "img/cat/se/cat_waterblaster_over.png", "img/cat/se/cat_waterblaster_out.png");
    addImageSwitch("0007", "img/cat/se/cat_slangar_over.png", "img/cat/se/cat_slangar_out.png");
	addImageSwitch("0008", "img/cat/se/cat_skyddsklader_over.png", "img/cat/se/cat_skyddsklader_out.png");
	addImageSwitch("0009", "img/cat/se/cat_maleriverk_over.png", "img/cat/se/cat_maleriverk_out.png");
  }
}

function addImageSwitch(id,on_img,off_img) {

  // create image preloader object.
  if (typeof imgSwitchObj == 'undefined')
    window.imgSwitchObj = {'on':[], 'off':[]};

  // check if the image exists.
  var img = document.getElementById(id);
  if (!img || img.tagName != 'IMG')
    return;

  // preload images.
  imgSwitchObj.on[id] = new Image();
  imgSwitchObj.on[id].src = on_img;
  imgSwitchObj.off[id] = new Image();
  imgSwitchObj.off[id].src = off_img;
  
  // attach mouse events.
  if (img.addEventListener) {
    img.addEventListener('mouseover', function(e){doImageSwitch(e,1);}, false);
    img.addEventListener('mouseout', function(e){doImageSwitch(e,0);}, false);
  } else if (img.attachEvent) {
    img.attachEvent('onmouseover', function(e){doImageSwitch(e,1);});
    img.attachEvent('onmouseout', function(e){doImageSwitch(e,0);});
  }
}

function doImageSwitch(e,sw) {

  // get the element that triggered the event.
  var img = e.target ? e.target : e.srcElement;

  // switch the image of that element.
  img.src = (sw) ? imgSwitchObj.on[img.id].src : imgSwitchObj.off[img.id].src;

}

/*******************************   EOF   ********************************/