//function
var v = function(obj){
	if(window.console && window.console.log){
		window.console.log(obj);	
	} else {
		var msg = document.getElementById('msg');
		if(msg) msg.innerHTML = obj;
	}
}

//init
$(document).ready(function(){
	initReady()	;
	
	googleMapInitialize();
})

var initReady = function(){

	
	
	
	$('#content-news div.detail li').each(function(i, e){
		$(e)
		.click(function(){
			$.ajax({
				url: "_news.php?news_id="+$(this).attr('rel'),
				cache: true,
				success: function(html){
					$('#content-news-main')
					.html(html)
					.animate({
						'marginLeft' : -500
						,'left' : '50%'
					}
					,'2000'
					,'easeInCubic'
					,function(){
						//for sub image click
						$("#content-news-main li.box a[rel='news']").fancybox();
						
						
						//close news detail list popup box
						$('#content-news-main a.close')
						.click(function(){
							var left_num = intval($('#content-news-main').css('left'))
							
							if(left_num > 0){
								$('#content-news-main')
								.animate({
									'marginLeft' : -1100
									,'left' : '0'
								}
								,'2000'
								,'easeInCubic')	
							}
							
							return !1;
						})	
						
						
						//scroll image list
						$('.news-scroll-pane').jScrollPane({
							showArrows: true,
							verticalArrowPositions: 'split',
							horizontalArrowPositions: 'split'
						});	
					})
				}
			});
		})
	})
	
	
	
	
	//for sub gallery click
	$("#content-gallery li a").fancybox({
		'width'				: 830,
		'height'			: 850,
        'autoScale'     	: false,
        'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'type'				: 'iframe'
	});
	
	
	
	
	// product index mouse over product, will show bule circle
	$('#content-product li.box').each(function(i, e){
		$(e)
		.mouseenter(function(){
			$(this)
			.find('img.border')
			.stop(1,1)
			.animate({
				top : -6
				,left : -6
				,width : 130
				,opacity : 100
			},700,'easeOutBounce');
		})
		.mouseleave(function(){
			$(this)
			.find('img.border')
			.stop(1,1)
			.animate({
				top : -3
				,left : -3
				,width : 126
				,opacity : 0
			},700,'easeOutBounce');	
		})
		.click(function(){
			$('#content-product-main').show();
			
			$.ajax({
				url: "_product.php?id="+$(this).attr('rel'),
				cache: true,
				success: function(html){
					$('#content-product-main')
					.html(html)
					.animate({
						'marginLeft' : -500
						,'left' : '50%'
					}
					,'2000'
					,'easeInOutCubic'
					,function(){
						//for sub product click
						$("#content-product-main li.box a.click").fancybox({
							'width'				: 830,
							'height'			: '95%',
							'autoScale'     	: false,
							'transitionIn'		: 'none',
							'transitionOut'		: 'none',
							'type'				: 'iframe'
						});		
					})
					
					
					//close product detail list popup box
					$('#content-product-main a.close')
					.click(function(){
						$('#content-product-main').hide();
						
						var left_num = intval($('#content-product-main').css('left'))
						
						if(left_num > 0){
							$('#content-product-main')
							.animate({
								'marginLeft' : -1100
								,'left' : '0'
							}
							,'2000'
							,'easeInOutCubic')	
						}
						
						
						
						return !1;
					})
				}
			});
		})
	})
	
	//for rotate 
	$('nav.menu a')
	.transform({"rotate": '-45deg'});
	
	
	
	/* menu effect */
	
	//for home button press position
	$('.menu a.a').click(function(){
		$(document).scrollTo(0, 800);
		return !1;
	})
	
	
	//for information button press position
	$('.menu a.b').click(function(){
		$(document).scrollTo($('#content-information-scroll'), 800);
		return !1;
	})
	
	
	//for product index button press position
	$('.menu a.c').click(function(){
		$(document).scrollTo($('#content-product-scroll'), 800);
		return !1;
	})
	
	//for news button press position
	$('.menu a.d').click(function(){
		$(document).scrollTo(1724, 800);
		return !1;
	})
	
	//for gallery button press position
	$('.menu a.e').click(function(){
		$(document).scrollTo(2423, 800);
		return !1;
	})
	
	//for dealers button press position
	$('.menu a.f').click(function(){
		$(document).scrollTo(2893, 800);
		return !1;
	})
	
	
	//for contact button press position
	$('.menu a.g').click(function(){
		$(document).scrollTo(3374, 800);
		return !1;
	})
	
	
	//for load product index img
	$('#content-product li.box').each(function(i,e){
		//get ele image
		var img_src = $(e).attr('img_src')
		,top = Math.floor(i / 8) * 140
		,left = (i % 8) * 122;
		
		$(e)
		.css({
			'backgroundImage' : 'url('+img_src+')'
			,'top' : top
			,'left' : left
		})
		
	})
	
	
	$('article#content-product-bg').css('visibility','hidden');
	$('article#content-product').css('visibility','hidden');
	$('article#content-news').css('visibility','hidden');
	$('article#content-gallery').css('visibility','hidden');
	$('article#content-dealers').css('visibility','hidden');
	$('article#content-contact').css('visibility','hidden');
}

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content,
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function InfoBox(opts) {
	
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  this.offsetVertical_ = -338;
  this.offsetHorizontal_ = -72;
  this.height_ = 346;
  this.width_ = 462;
 
  var me = this;
  this.boundsChangedListener_ =
  	
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
		
      return me.panMap.apply(me);
	  
    });
 
  // Once the properties of this OverlayView are initialized, set its map so
  // that we can display it.  This will trigger calls to panes_changed and
  // draw.
  this.setMap(this.map_);
}
 
/* InfoBox extends GOverlay class from the Google Maps API
 */
InfoBox.prototype = new google.maps.OverlayView();
 
/* Creates the DIV representing this InfoBox
 */
InfoBox.prototype.remove = function() {
  if (this.div_) {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
};
 
/* Redraw the Bar based on the current projection and zoom level
 */
InfoBox.prototype.draw = function() {
  // Creates the element if it doesn't exist already.
  this.createElement();
  if (!this.div_) return;
 
  // Calculate the DIV coordinates of two opposite corners of our bounds to
  // get the size and position of our Bar
  var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (!pixPosition) return;
 
  // Now position our DIV based on the DIV coordinates of our bounds
  this.div_.style.width = this.width_ + "px";
  this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
  this.div_.style.height = this.height_ + "px";
  this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
  this.div_.style.display = 'block';
};
 
/* Creates the DIV representing this InfoBox in the floatPane.  If the panes
 * object, retrieved by calling getPanes, is null, remove the element from the
 * DOM.  If the div exists, but its parent is not the floatPane, move the div
 * to the new pane.
 * Called from within draw.  Alternatively, this can be called specifically on
 * a panes_changed event.
 */
InfoBox.prototype.createElement = function() {
  var panes = this.getPanes();
  var div = this.div_;
  if (!div) {
    // This does not handle changing panes.  You can set the map to be null and
    // then reset the map to move the div.
    div = this.div_ = document.createElement("div");
    div.style.border = "0px none";
    div.style.position = "absolute";
    div.style.background = "url('http://www.work-wheels.com.hk/v1/images/contact/google-marker.png')";
    div.style.width = this.width_ + "px";
    div.style.height = this.height_ + "px";
	
    var contentDiv = document.createElement("div");
    contentDiv.style.padding = "30px"
    contentDiv.innerHTML = '<div class="map_address01"><img src="http://www.work-wheels.com.hk/v1/images/contact/contact-work-logo.png"/><br /><b>總代理 ﹣ 祥記膠輪貿易有限公司 <img src="http://www.work-wheels.com.hk/v1/images/contact/contact-ckt-logo.png" align="absmiddle"/></b><br /> <br />香港新界荃灣柴灣角街38-40號銓通工業大廈10樓C室<br /> <br /><p>電話︰+852 2499 2928<br />傳真︰+852 2499 2292<br />電郵︰ <a href="mailto:info@work-wheels.com.hk">info@work-wheels.com.hk</a></p></div>';
 
    var topDiv = document.createElement("div");
    topDiv.style.textAlign = "right";
   
    /*
	var closeImg = document.createElement("img");
    closeImg.style.width = "32px";
    closeImg.style.height = "32px";
    closeImg.style.cursor = "pointer";
    closeImg.src = "http://gmaps-samples.googlecode.com/svn/trunk/images/closebigger.gif";
    topDiv.appendChild(closeImg);
	*/
    	
    function removeInfoBox(ib) {
      return function() {
        ib.setMap(null);
      };
    }
 
   // google.maps.event.addDomListener(closeImg, 'click', removeInfoBox(this));
 
    div.appendChild(topDiv);
    div.appendChild(contentDiv);
    div.style.display = 'none';
    panes.floatPane.appendChild(div);
    this.panMap();
  } else if (div.parentNode != panes.floatPane) {
    // The panes have changed.  Move the div.
    div.parentNode.removeChild(div);
    panes.floatPane.appendChild(div);
  } else {

    // The panes have not changed, so no need to create or move the div.
  }
}
 
/* Pan the map to fit the InfoBox.
 */
InfoBox.prototype.panMap = function() {
  
 
  // if we go beyond map, pan map
  var map = this.map_;
  var bounds = map.getBounds();
  if (!bounds) return;
 
  // The position of the infowindow
  var position = this.latlng_;
 
  // The dimension of the infowindow
  var iwWidth = this.width_;
  var iwHeight = this.height_;
 
  // The offset position of the infowindow
  var iwOffsetX = this.offsetHorizontal_;
  var iwOffsetY = this.offsetVertical_;
 
  // Padding on the infowindow
  var padX = 40;
  var padY = 40;
 
  // The degrees per pixel
  var mapDiv = map.getDiv();
  var mapWidth = mapDiv.offsetWidth;
  var mapHeight = mapDiv.offsetHeight;
  var boundsSpan = bounds.toSpan();
  var longSpan = boundsSpan.lng();
  var latSpan = boundsSpan.lat();
  var degPixelX = longSpan / mapWidth;
  var degPixelY = latSpan / mapHeight;
 
  // The bounds of the map
  var mapWestLng = bounds.getSouthWest().lng();
  var mapEastLng = bounds.getNorthEast().lng();
  var mapNorthLat = bounds.getNorthEast().lat();
  var mapSouthLat = bounds.getSouthWest().lat();
 
  // The bounds of the infowindow
  var iwWestLng = position.lng() + (iwOffsetX - padX) * degPixelX;
  var iwEastLng = position.lng() + (iwOffsetX + iwWidth + padX) * degPixelX;
  var iwNorthLat = position.lat() - (iwOffsetY - padY) * degPixelY;
  var iwSouthLat = position.lat() - (iwOffsetY + iwHeight + padY) * degPixelY;
 
  // calculate center shift
  var shiftLng =
      (iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) +
      (iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
  var shiftLat =
      (iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) +
      (iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);
 
  // The center of the map
  var center = map.getCenter();
 
  // The new map center
  var centerX = center.lng() - shiftLng;
  var centerY = center.lat() - shiftLat;


  // center the map to the new shifted center
  map.setCenter(new google.maps.LatLng(centerY, centerX));
 
  // Remove the listener after panning is complete.
  if(this.boundsChangedListener_) google.maps.event.removeListener(this.boundsChangedListener_);
  this.boundsChangedListener_ = null;
  
	
};


//for google map script
var googleMapInitialize = function () {	
	var myOptions = {
      zoom: 16,
      center: new google.maps.LatLng(22.374, 114.512083),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
	  disableDefaultUI: false,
	  navigationControl: true,
      navigationControlOptions: {
		
		style: google.maps.NavigationControlStyle.SMALL,
		position: google.maps.ControlPosition.LEFT_CENTER
		
	  },
	  scrollwheel: false,
      sensor: 'false' 
    }
    var map = new google.maps.Map(document.getElementById("content-contact"), myOptions);

 
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(22.373331,114.107298),
		visible : false,
        map: map
    });
    google.maps.event.addListener(marker, "click", function(e) {
      var infoBox = new InfoBox({latlng: marker.getPosition(), map: map});
    });
    google.maps.event.trigger(marker, "click");
	
}



var cPos = 0;

//for mousemove
$(window).scroll(function(e){
	//get scroll point
	var scroll_top = $(document).scrollTop();

	//for testing position point
	$('#msg').text('Scroll : '+scroll_top);
	
	
	//for testing article visibility
	var msg2 = 'home : '+$('article#content-home').css('visibility')+'<br/>';
	msg2 += 'information : '+$('article#content-information').css('visibility')+'<br/>';
	msg2 += 'product-bg : '+$('article#content-product-bg').css('visibility')+'<br/>';
	msg2 += 'product : '+$('article#content-product').css('visibility')+'<br/>';
	msg2 += 'news : '+$('article#content-news').css('visibility')+'<br/>';
	msg2 += 'gallery : '+$('article#content-gallery').css('visibility')+'<br/>';
	msg2 += 'dealers : '+$('article#content-dealers').css('visibility')+'<br/>';
	msg2 += 'contact : '+$('article#content-contact').css('visibility')+'<br/>';

	$('#msg2').html(msg2);
	
	
	
	//contorl article visibility	
	
	//for article of content-product effect
	if(scroll_top > 200 && scroll_top < 1660){
		$('article#content-product-bg').css('visibility','visible');
		$('article#content-product').css('visibility','visible');

		var content_product_pos = 650 - scroll_top;
		
		$('article#content-product-bg')
		.css({
			'backgroundPosition' : 'center '+content_product_pos * 0.7+'px'
		})
		
		if(scroll_top > 720){
			$('article#content-product')
			.css({
				'zIndex' : 5
			})	
		} else {
			$('article#content-product')
			.css({
				'zIndex' : 0
			})
		}
		
	} else {
		$('article#content-product-bg').css('visibility','hidden');
		$('article#content-product').css('visibility','hidden');	
	}
	
	if(scroll_top > 567){
		$('article#content-home').css('visibility','hidden');
	}  else {
		$('article#content-home').css('visibility','visible');	
	}
	
	
	//for content information bg movement
	if(scroll_top > 1055){
		$('article#content-information').css('visibility','hidden');
	}  else {
		$('article#content-information').css('visibility','visible');
		
		var content_info_pos = 500 - (scroll_top * 2);
		
		$('article#content-information')
		.css({
			'backgroundPosition' : 'center '+content_info_pos+'px'	
		})
		
		$('article#content-information div.content .content-a')
		.css({
			'top' : 900 - scroll_top
		})
		
		$('article#content-information div.content .content-b')
		.css({
			'top' : 490 - scroll_top
		})
		
		$('article#content-information div.content .content-c')
		.css({
			'top' : 190 - scroll_top
		})	
	}
	
	
	
	if(scroll_top > 1000 && scroll_top < 2500){
		$('article#content-news').css('visibility','visible');
	} else {
		$('article#content-news').css('visibility','hidden');
	}
	
	
	//for gallery brand lsit
	if(scroll_top > 1766 && scroll_top <2988){
		$('article#content-gallery').css('visibility','visible');
		
		
		var content_gallery_section_pos = 1938 - (scroll_top * 0.8);
		$('article#content-gallery section')
		.css({
			'top' : content_gallery_section_pos
		})
		
		if(scroll_top >= 2423 && scroll_top < 2491){
			//for gallery bg movement
			var content_gallery_pos = -2360 + (scroll_top * 0.95);
			$('article#content-gallery')
			.css({
				'backgroundPosition' : 'center '+content_gallery_pos+'px'
			})		
		}
	} else {
		$('article#content-gallery').css('visibility','hidden');
	}
	
	
	//for dealers
	if(scroll_top > 2538 && scroll_top < 3397){
		$('article#content-dealers').css({
			'visibility':'visible'
			,'zIndex' : '5'
		});
		
		var content_dealers_pos = 3800 + scroll_top * -1.3;
		$('article#content-dealers')
		.css({
			'backgroundPosition' : 'center '+content_dealers_pos+'px'
		})
		
		//for fixed the position scroll point @Hong Kong dealers
		
		//dealers hong kong logo
		$('article#content-dealers .hk_logo')
		.css({
			'top' : 4135 - scroll_top * 1.3
		})
		
		//dealers hong kong title image
		$('article#content-dealers .hk_title')
		.css({
			'top' : 4135 - scroll_top * 1.3
		})
		
		//dealers hong kong list
		$('article#content-dealers .hk_dealers_list')
		.css({
			'top' : 4310 - scroll_top * 1.3
		})
		
		//for fixed the position scroll point @Macau dealers
		
		//dealers Macau logo
		$('article#content-dealers .mu_logo')
		.css({
			'top' : 5080 - scroll_top * 1.3
		})
		
		//dealers Macau title image
		$('article#content-dealers .mu_title')
		.css({
			'top' : 5080 - scroll_top * 1.3
		})
		
		//dealers Macau list
		$('article#content-dealers .mu_dealers_list')
		.css({
			'top' : 5255 - scroll_top * 1.3
		})
	} else {
		//$('article#content-dealers').css('visibility','hidden');
		
		$('article#content-dealers').css({
			'visibility':'hidden'
			,'zIndex' : '-1'
		});
	}
	
	
	
	if(scroll_top > 3030){
		$('article#content-contact').css('visibility','visible');
		
		//change map z-index to 5
		if(scroll_top > 3370){
			$('article#content-contact')
			.css({
				'zIndex' : 5
			})	
		} else {
			$('article#content-contact')
			.css({
				'zIndex' : 0
			})	
		}
	} else {
		$('article#content-contact').css('visibility','hidden');
	}
	
	
	//for news element movement
	var content_news_pos = 180 - (scroll_top * 0.5);
	$('article#content-news')
	.css({
		'marginTop' : content_news_pos
	})

})