Event.observe(window, 'load', initialize);

function initialize() {
  Event.observe('item_1', 'mouseover', openMenu);
  Event.observe('item_2', 'mouseover', openMenu);
  Event.observe('item_3', 'mouseover', overButton);
  Event.observe('item_4', 'mouseover', overButton);
  Event.observe('item_5', 'mouseover', overButton);
  
  Event.observe('item_1', 'mouseout', hideMenu);
  Event.observe('item_2', 'mouseout', hideMenu);
  Event.observe('item_3', 'mouseout', outButton);
  Event.observe('item_4', 'mouseout', outButton);
  Event.observe('item_5', 'mouseout', outButton);
  
  //Event.observe('item_1_menu', 'mouseover', overMenu);
  Event.observe('item_2_menu', 'mouseover', overMenu);
  // Event.observe('item_3_menu', 'mouseover', overMenu);
  // Event.observe('item_4_menu', 'mouseover', overMenu);
  
  //Event.observe('item_1_menu', 'mouseout', outMenu);
  Event.observe('item_2_menu', 'mouseout', outMenu);
  // Event.observe('item_3_menu', 'mouseout', outMenu);
  // Event.observe('item_4_menu', 'mouseout', outMenu);
  
  var products = new Array('lrx', 'xr', 'xs', 'sor', 'lrs', 'tfs', 'lfs', 'fs', 'xcs', 'r30' , 'rb30' , 'rt30' , 'm30');//2010 0711 測試出來了 新車種加上array即可
   
  products.each(function(p) {
	Event.observe(p, 'mouseover', overProduct);
    Event.observe(p, 'mouseout', outProduct);
    Event.observe(p, 'click', clickProduct);
  });

  /*
  Event.observe('xr',  'mouseover', overProduct);
  Event.observe('xs',  'mouseover', overProduct);
  Event.observe('sr',  'mouseover', overProduct);
  Event.observe('tfs', 'mouseover', overProduct);
  Event.observe('lfs', 'mouseover', overProduct);
  Event.observe('fs',  'mouseover', overProduct);
  Event.observe('xcs', 'mouseover', overProduct);
  Event.observe('tt',  'mouseover', overProduct);

  Event.observe('xr',  'mouseout', outProduct);
  Event.observe('xs',  'mouseout', outProduct);
  Event.observe('sr',  'mouseout', outProduct);
  Event.observe('tfs', 'mouseout', outProduct);
  Event.observe('lfs', 'mouseout', outProduct);
  Event.observe('fs',  'mouseout', outProduct);
  Event.observe('xcs', 'mouseout', outProduct);
  Event.observe('tt',  'mouseout', outProduct);
  
  Event.observe('xr',  'click', clickProduct);
  Event.observe('xs',  'click', clickProduct);
  Event.observe('sr',  'click', clickProduct);
  Event.observe('tfs', 'click', clickProduct);
  Event.observe('lfs', 'click', clickProduct);
  Event.observe('fs',  'click', clickProduct);
  Event.observe('xcs', 'click', clickProduct);
  Event.observe('tt',  'click', clickProduct);
*/
  var menuImages = new Array (
	'images/menu.png',
	'images/menu_bg_selected_bottom.png',
	'images/menu_bg_selected.png'
  );

  
  var productThumbImages = new Array (
    'images/lrx_thumb.png', 'images/lrx_thumb_hover.png', 
	'images/xr_thumb.png',  'images/xr_thumb_hover.png', 
	'images/xs_thumb.png',  'images/xs_thumb_hover.png', 
	'images/sor_thumb.png',  'images/sor_thumb_hover.png', 
	'images/lfs_thumb.png', 'images/lfs_thumb_hover.png',
    'images/lrs_thumb.png', 'images/lrs_thumb_hover.png',
	'images/tfs_thumb.png', 'images/tfs_thumb_hover.png',
	'images/fs_thumb.png',  'images/fs_thumb_hover.png', 
	'images/xcs_thumb.png',	'images/xcs_thumb_hover.png',
	'images/xs_thumb.png',  'images/xs_thumb_hover.png'
	
	
  );
  
  /*
  // preload images
  if (document.images) {
	productThumbImages.each(function(file) {
	  tmpImg = new Image();
	  tmpImg.src = file;
	});
	menuImages.each(function(file) {
	  tmpImg = new Image();
	  tmpImg.src = file;
	});
  }
  */
  if ($('cover')) {
	$('cover').setStyle({left: '0px', top: '0px', height: pageHeight() + 'px'})
  }
}


function viewportHeight()
{
	if (typeof window.innerWidth != 'undefined') {
      return window.innerHeight
	}
	else if (typeof document.documentElement != 'undefined'
			 && typeof document.documentElement.clientWidth != 'undefined' 
			 && document.documentElement.clientWidth != 0) {
		return  document.documentElement.clientHeight
	} else {
       return document.getElementsByTagName('body')[0].clientHeight
	}
}


function pageHeight()
{
	var yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		yScroll = document.body.offsetHeight;
	}
		
	var windowWidth, windowHeight;
		
	if (self.innerHeight) {	// all except Explorer
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowHeight = document.body.clientHeight;
	}	
		
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}
	
	return pageHeight;
}


var BUTTON_HOVER_COLOR = '#555';

function openMenu(event) 
{
	var src = $(Event.element(event));
	var menu = $(src.id + '_menu')
	src.setStyle({
		'color': BUTTON_HOVER_COLOR
	});
    $$('.popup-menu').each(function(m){
      if (src.id + '_menu' != m.id) {
		m.hide();
      }
    });
    
    if (menu) {
        var srcLeft	= src.cumulativeOffset().left;
    	var menuRight = srcLeft + menu.getDimensions().width;
    	var headerRight = $('header').cumulativeOffset().left + $('header').getDimensions().width;
    	var offsetLeft = 0;
    	if (menuRight > headerRight) {
    		offsetLeft = src.getDimensions().width - menu.getDimensions().width + 10;
    	} else {
    		offsetLeft = -10;
    	}
    	menu.clonePosition(src, {setLeft: true, setTop: false, setWidth: false, setHeight: false, offsetLeft: offsetLeft});
        menu.setOpacity(1);
        menu.show();
    }
}

function hideMenu(event) 
{
	var src = $(Event.element(event));
	var menu = $(src.id + '_menu');
    
    if (menu) {
    	var pX = Event.pointerX(event);
    	var pY = Event.pointerY(event);
    	var menuLeft = menu.cumulativeOffset().left;
    	var menuTop = menu.cumulativeOffset().top - 2;
    	var menuRight = menuLeft + menu.getDimensions().width;
    	var menuBottom = menuTop  + menu.getDimensions().height;
    	
    	if( pX >= menuLeft &&
    	    pX <= menuRight &&
    		pY >= menuTop &&
    		pY <= menuBottom) {
    		return;
    	}
        menu.hide();
    }
    src.setStyle({
    	'color': '#bbb'
    });
}

function overButton(event) {
	var src = $(Event.element(event));
	src.setStyle({
		'color': BUTTON_HOVER_COLOR
	});
    
    $$('.popup-menu').each(function(m){
      m.hide();
      var item = $(m.id.gsub('_menu', ''));
      if (item) {
        item.setStyle ({'color': '#bbb'});
      }
    });
}

function outButton(event) {
	var src = $(Event.element(event));
	src.setStyle({
		'color': '#bbb'
	});
}

function overMenu(event) {
	var menu = $(Event.findElement(event, 'div'));
	var item = $(menu.id.gsub('_menu', ''));
}

function outMenu(event) {
	var menu = $(Event.findElement(event, '.popup-menu'));
	if (!menu)
		return;
	var item = $(menu.id.gsub('_menu', ''));
	if (!item)
		return;
	
	var pX = Event.pointerX(event);
	var pY = Event.pointerY(event);
	var menuLeft = menu.cumulativeOffset().left;
	var menuTop = menu.cumulativeOffset().top;
	var menuRight = menuLeft + menu.getDimensions().width;
	var menuBottom = menuTop + menu.getDimensions().height;
	
	if( pX >= menuLeft &&
	    pX <= menuRight &&
		pY >= menuTop-1 &&
		pY <= menuBottom) {
		return;
	}
	
	
	item.setStyle({
		'color': '#bbb'
	});
	menu.hide();
}

function overProduct(event) {
	var item = $(Event.element(event));
	var newBg = item.id + '_thumb_hover.png';
	item.setStyle({
		backgroundImage: 'url(images/' + newBg + ')'
	});
	var prodName = $('product-name');
	prodName.clonePosition(item, {setHeight: false, offsetTop: 30});
	prodName.innerHTML = item.id.toUpperCase();
	prodName.setStyle({color: '#e11700'});
	prodName.show();
	
	var parent = item.up();
	var category = parent.previous();
	if (category) {
		category.setStyle({
            color: '#e11700'
        });
	}
}

function outProduct(event) {
	var item = $(Event.element(event));	
	var newBg = item.id + '_thumb.png';
	item.setStyle({
		backgroundImage: 'url(images/' + newBg + ')'
	});
	
	var parent = item.up();
	var category = parent.previous();
	if (category) {
		category.setStyle({color: '#555'});
	}
}

function clickProduct(event) {
	var menu = $('item_2_menu');	
	if (menu)
		menu.hide();
}

function overProductItem(event) {
	var item = $(Event.element(event));	
}

function outProductItem(event) {
	var item = $(Event.element(event));	
}

function view2Camm() {
	var scrollOffset = document.viewport.getScrollOffsets();
	var newTop = scrollOffset.top + ((viewportHeight() - $('two-camm').getHeight()) / 2);
	$('two-camm').setStyle({top: newTop + 'px'});
	$('cover').show();
	$('two-camm').show();
}

function hide2Camm() {
	$('cover').hide();
	$('two-camm').hide();
}