// JavaScript Document
$(window).load(function(){
	$('div#youtube1 .video1').click(function(){
		$('div#bigvideo iframe').attr('src', 'http://www.youtube.com/embed/PkJQ-tT97fs');
		$('div#smallvideo iframe').attr('src', 'http://www.youtube.com/embed/PkJQ-tT97fs');
		openwindow();
		});
		
		$('div#youtube2 .video2').click(function(){
		$('div#bigvideo iframe').attr('src', 'http://www.youtube.com/embed/yVKRbJTlc3c');
		$('div#smallvideo iframe').attr('src', 'http://www.youtube.com/embed/yVKRbJTlc3c');
		openwindow();
		});	
		
		$('.btn_wapper1 li').click(function(){
	    lightbox_index = $('.btn_wapper1 li').index(this) + 1;
		$('.detailbg,.cover').stop(true,true).fadeOut(1000
		,function(){
			$('.detailbg').attr('src', 'images/product_bg/' + lightbox_index + '.jpg');
		});
		$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
		//calllightbox();
		});
		
		$('.btn_wapper2 li').click(function(){
		lightbox_index = $('.btn_wapper2 li').index(this) + 5;
		$('.detailbg,.cover').stop(true,true).fadeOut(1000,function(){
			$('.detailbg').attr('src', 'images/product_bg/' + lightbox_index + '.jpg');
		});
		$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
		//calllightbox();
		});
		
		$('#product_back').click(function(){
			$(this).css('display','none');
			$('#product_next').css('display','block');
			$('.btn_wapper2').stop(true,true).fadeOut(300);
			$('.btn_wapper1').stop(true,true).delay(300).fadeIn(300);
			});
			
		$('#product_next').click(function(){
			$(this).css('display','none');
			$('#product_back').css('display','block');
			$('.btn_wapper1').stop(true,true).fadeOut(300);
			$('.btn_wapper2').stop(true,true).delay(300).fadeIn(300);
			});
		
		$('#lightbox_close,.lightboxmask').click(function(){
			$('.detailbg').attr('src', 'images/product_bg/1.jpg');
			$('#images_wapper').stop(true,true).fadeOut(500);
			$('#closebtn1').stop(true,true).fadeIn(500);
		});
				
if(isiPhone()){
    $('meta[name=viewport]').attr('content', ' user-scalable = yes');
}
	
	
	});



function isiPhone(){
    return (
        (navigator.platform.indexOf("iPhone") != -1) ||
        (navigator.platform.indexOf("iPod") != -1)
    );
}

$(document).keydown(function(e) {
        if (e.keyCode == 37) {
			lightboxright();
        }
		if (e.keyCode == 39) {
            lightboxleft();
        }
    });
	
var lightbox_index = 1;

function lightboxleft(){
		//$('#lightbox_next').click(function(){
			//$('#lightbox_main img').stop(true,true).fadeOut(300);
			if(lightbox_index == 8)
			lightbox_index = 1;
			else
			lightbox_index++
			switch (lightbox_index)
			{
			case 1:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/1.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
  			break;
			case 2:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/2.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
  			break;
			case 3:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/3.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
  			break;
			case 4:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/4.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
  			break;
			case 5:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/5.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
			break;
			case 6:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/6.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
			break;
			case 7:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/7.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
			break;
			case 8:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/8.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
			break;
			}
		//});
		}
		
		function calllightbox(){
			$('.lightboxmask').css('z-index','60');
			switch (lightbox_index)
			{
			case 1:
			$('.detailbg').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/1.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
  			break;
			case 2:
			$('.detailbg').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/1.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
  			break;
			case 3:
			$('.detailbg').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/1.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
			break;
			case 4:
			$('.detailbg').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/1.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
  			break;
			case 5:
			$('.detailbg').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/1.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
			break;
			case 6:
			$('.detailbg').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/1.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
			break;
			case 7:
			$('.detailbg').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/1.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
			break;
			case 8:
			$('.detailbg').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/1.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
			break;
			}
		}

		
		function lightboxright(){
		//$('#lightbox_back').click(function(){
			$('#lightbox_main img').stop(true,true).fadeOut(300);
			if(lightbox_index == 1)
			lightbox_index = 8;
			else
			lightbox_index--
			switch (lightbox_index)
			{
			case 1:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/1.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
  			break;
			case 2:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/2.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
  			break;
			case 3:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/3.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
  			break;
			case 4:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/4.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
  			break;
			case 5:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/5.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
			break;
			case 6:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/6.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
			break;
			case 7:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/7.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
			break;
			case 8:
			$('.detailbg,.cover').stop(true,true).fadeOut(1000);
			$('.detailbg').delay(1000).attr('src', 'images/product_bg/8.jpg');
			$('.detailbg').delay(1100).stop(true,true).fadeIn(1000);
			break;
			}
		//});
		}

(function($){

	
	$('body').ready(function(){
		var startIndex = 1;
		var total = 5;
		var currentIndex = 0;
		var t;	
		var x;
		var screenW = 0;
		var screenH = 0;
		
		var $currentImage = null;
		var bgW =$('#lightbox_main').width();
		var bgH =$('#lightbox_main').height();
				
		function swapImage(){
			clearTimeout(t);
			currentIndex ++;
			if(currentIndex > total) currentIndex = 1;
			
			
			var $nextImage = $('img#ss-img-'+currentIndex);
			
			var show = function(){
				
				if($currentImage!=null){
					$currentImage.fadeOut(1000,function(){
						$(this).removeClass('ss-showing');
					});
				}
				
				
				$nextImage.addClass('nextImage').addClass('ss-showing');
				$nextImage.show().fadeOut(0);
				
				sizeImage(currentIndex - 1,$nextImage);
				
				$nextImage.fadeIn(1000,function(){
					$currentImage = $nextImage;
					$nextImage.removeClass('nextImage');
					$nextImage = null;				
					t=setTimeout(swapImage, 1900);
				});
			}
			
			if($nextImage == null || $nextImage.length != 1){
				var img = new Image();
				img.onload = function(){
					
					$nextImage = $('<img alt="" id="ss-img-'+currentIndex+'"/>');
					$nextImage.attr('_w',img.width);
					$nextImage.attr('_h',img.height);
					$nextImage.attr('src',img.src);
					$nextImage.appendTo('#slideshow');
					
					show();
				}
				img.onerror = function(){
					t=setTimeout(swapImage, 1900);
				}
				img.src = 'images/slider/'+currentIndex+'.jpg';
				
			}else{
				show();
			}
		}
		
		$(window).load(function(){
 		
		
		//resetlightbox();
		
		
		$('.next').click(function(){
			$('#slideshow img.ss-showing').stop(true,true);
			clearTimeout(t);
			swapImage();
		});	
		
		$('.back').click(function(){
			$('#slideshow img.ss-showing').stop(true,true);
			clearTimeout(t);
			backImage();
		});	
		
		$('.detail').click(function(){
		clearTimeout(t);
		$('#btn').stop(true,true).fadeOut(500);
		$('#detail_bg').stop(true,true).fadeIn(200);
		$('img.cover').stop(true,true).delay(300).fadeIn(500);
		$('#info,#closebtn1,#lightbox_wapper').stop(true,true).delay(500).fadeIn(500);
		$('#lightbox_wapper li').stop(true,true).delay(800).fadeIn(500);
		});
		
		$('.youtube').click(function(){
		clearTimeout(t);
		$('#btn').stop(true,true).fadeOut(500);
		$('#slideshow img.mask').stop(true,true).fadeIn(500);
		$('#youtube_wapper,#closebtn1').stop(true,true).delay(500).fadeIn(500);
		});
		
		$('#closebtn1,#slideshow img.mask').click(function(){
		t=setTimeout(swapImage, 5000);
		$('#youtube_wapper,#closebtn1').stop(true,true).fadeOut(500);
		$('#info,#closebtn1,#lightbox_wapper,#lightbox_wapper li').stop(true,true).fadeOut(500);
		$('#slideshow img.mask ').stop(true,true).delay(500).fadeOut(500);
		$('#slideshow img.detailbg,').stop(true,true).delay(500).fadeOut(500
		,function(){
			$('.cover').stop(true,true).fadeOut(500);
			$('.detailbg').attr('src', 'images/product_bg/1.jpg');
			});
		$('#detail_bg').stop(true,true).delay(800).fadeOut(500);
		$('#btn').stop(true,true).delay(800).fadeIn(500);
		});
	
		$('#closebtn2,#bg_mask').click(function(){
		$('#smallvideo_wapper').stop(true,true).fadeOut(500);
		$('#bg_mask').stop(true,true).fadeOut(500,0);
		});
		
		$('#closebtn3,#bg_mask').click(function(){
		$('#bigvideo_wapper').stop(true,true).fadeOut(500);
		$('#bg_mask').stop(true,true).fadeOut(500);
		});
		});
		
		
		function backImage(){
			clearTimeout(t);
			currentIndex --;
			if(currentIndex < 1) currentIndex = 5;
			
			
			var $nextImage = $('img#ss-img-'+currentIndex);
			
			var show = function(){
				
				if($currentImage!=null){
					$currentImage.stop(true,true).fadeOut(500,function(){
						$(this).removeClass('ss-showing');
					});
				}
				
				
				$nextImage.addClass('nextImage').addClass('ss-showing');
				$nextImage.stop(true,true).show().fadeOut(0);
				
				sizeImage(currentIndex + 1,$nextImage);
				
				$nextImage.stop(true,true).fadeIn(500,function(){
					
					$currentImage = $nextImage;
					$nextImage.removeClass('nextImage');
					$nextImage = null;				
					t=setTimeout(swapImage, 5000);
				});
			}
			
			if($nextImage == null || $nextImage.length != 1){
				var img = new Image();
				img.onload = function(){
					
					$nextImage = $('<img alt="" id="ss-img-'+currentIndex+'"/>');
					$nextImage.attr('_w',img.width);
					$nextImage.attr('_h',img.height);
					$nextImage.attr('src',img.src);
					$nextImage.appendTo('#slideshow');
					
					
					show();
				}
				img.onerror = function(){
					t=setTimeout(swapImage, 2000);
				}
				img.src = 'images/'+currentIndex+'.jpg';
				
			}else{
				show();
			}
		}
		function sizeImage (idx,selector){
	       
			var $img = $(selector);
			
			var imgW = $img.attr('_w');
			var imgH = $img.attr('_h');
			var scale = 1;
			
			if(imgW > screenW){
				scale = screenW / imgW;
			}
				
			if( imgW * scale < screenW )
				scale = screenW / imgW;
			
			if( imgH * scale < screenH )
				scale = screenH / imgH;

			//console.log(imgW,imgH,scale,imgW*scale,imgH*scale);
			
			// align to center
			//alert(screenW);
			//var tx = screenW * 0.5 - imgW * scale * 0.5;
			var ty = screenH * 0.5 - imgH * scale * 0.5;
			//if(ty < 0 ) ty = 0;
			$img
				//.css('left', tx)
				.css('top', ty)
			
			var browser_w = $(window).width();
			var totalx =$('#bg').width()+$('#slideshow').width();
			var comingsoonx = $('#bg').width() * 0.5 - $('#comingsoon').width()* 0.5;
			var comingsoony = $(window).height() * 0.5 - $('#comingsoon').height()* 0.5;
			var infox = totalx / 4 ;
			var infoy = $(window).height() * 0.5 - $('#info').height()* 0.5 -15;
			var lightboxbtnx = totalx / 4 -58;
			var youtubex = totalx - $('#youtube_wapper').width() -100 ;
			var youtubey = $(window).height() * 0.5 - $('#youtube_wapper').height()* 0.5;
			var btnx = $(window).width() - $('#btn').width()-30;
			var btny = $(window).height() * 0.5 - $('#btn').height()* 0.5;
			var closebtn1x = totalx - $('#closebtn1').width()-30;
			var smallvideox = totalx * 0.5- $('#smallvideo_wapper').width()* 0.5 ;
			var smallvideoy = $(window).height() * 0.5 - $('#smallvideo_wapper').height()* 0.5;
			var bigvideox = totalx * 0.5- $('#bigvideo_wapper').width()* 0.5 ;
			var bigvideoy = $(window).height() * 0.5 - $('#bigvideo_wapper').height()* 0.5;
			var lightboxx = $('#slideshow').width() * 0.5- $('#images_wapper').width()* 0.5 + 245;
			var lightboxy = $(window).height() * 0.5 - $('#images_wapper').height()* 0.5;
			//alert(totalx)
				if(imgW * scale>=955){
				$img.width(imgW * scale);
				$('.mask,.lightboxmask').width(imgW * scale);
				//$('body').css({'overflow-x':'hidden'});
				}
				 if(imgW * scale<955){
				$img.width(955);
				$('.mask,.lightboxmask').width(955);
				$('#mask img').width(imgW * scale);
				//$('body').css({'overflow-x':'visible'});
				}
				
				$img.height(imgH * scale);
				$('.mask,.lightboxmask').height(imgH * scale);
 				if(screenW<400){
				screenW=400;
				}
			$('#wapper').width(totalx+1);
			$('#bg_mask img').height(screenH);
			$('#slideshow').width($img.width()).height(screenH );
			$('#bg').height(screenH );
			$('#comingsoon').css('left', comingsoonx).css('top', comingsoony);
			$('#info').css('left', infox).css('top', infoy);
			$('#lightbox_wapper').css('left', lightboxbtnx);
			$('#youtube_wapper').css('left', youtubex).css('top', youtubey);
			$('#closebtn1').css('left', closebtn1x);
			$('#smallvideo_wapper').css('left', smallvideox).css('top', smallvideoy);
			$('#bigvideo_wapper').css('left', bigvideox).css('top', bigvideoy);
			$('#images_wapper').css('left', lightboxx).css('top', lightboxy);
			$('#bg_mask').width($('#wapper').width());
			//console.log( $(window).width());
			if(browser_w < 1200) {
            browser_w = 1200;
            $('body').css('overflow-x' , 'scroll');
			$('#btn').css('left',1135 ).css('top', btny);
        } else {
            $('body').css('overflow-x' , 'hidden');
			$('#btn').css('left', btnx).css('top', btny);
        }
		}
		
		
		function detailsize (idx,selector){
	       
			var $img = $(selector);
			
			var imgW = $img.attr('_w');
			var imgH = $img.attr('_h');
			var scale = 1;
			
			if(imgW > screenW){
				scale = (screenW / imgW);
			}
				
			if( imgW * scale < screenW )
				scale = screenW / imgW;
			
			if( imgH * scale < screenH )
				scale = screenH / imgH;

			//console.log(imgW,imgH,scale,imgW*scale,imgH*scale);
			if(scale > 1)
			scale = 1;
			//console.log(scale);
			// align to center
			//alert(screenW);
			var tx = screenW * 0.4 - imgW * scale * 0.4;
			var ty = screenH * 0.5 - imgH * scale * 0.5 ;
			//if(ty < 0 ) ty = 0;
			$img.css('top', ty);
			$('img.detailbg').css('right', tx)
				
			
			//alert(totalx)
				if(imgW * scale>=956){
				$img.width(imgW * scale);
				$('body').css({'overflow-x':'hidden'});
				}
				 if(imgW * scale<956){
				$img.width(956);
				//$('.mask').width(955);
				$('body').css({'overflow-x':'visible'});
				}
				//console.log(scale);
				$img.height(imgH * scale);
 				//if(screenW<400){
				//screenW=400;
				//}
			
		}
		
		//
		// fired when screen resizze
		function resizeHandler(){
			screenW = $(window).width()-245;
			//if(screenW < $('#topbar img').width()) screenW = $('#topbar img').width();
			
			screenH = $(window).height();
			 if(screenW<955){
				screenW=955;
				}
			//$('#slideshow,#bg').width(screenW).height(screenH);
			//console.log(screenH);
			// we only resize all showing image
			$('#slideshow img.ss-showing,#bg img').each(sizeImage);
			$('img.detailbg,img.cover').each(detailsize);
		}
		
		// handling size
		$(window).bind('resize',resizeHandler);
		$(window).bind('resize',detailsize);
		resizeHandler();
		detailsize();
		swapImage();
		
	});
})(jQuery);

		

function openwindow(){
		//console.log($(window).width());
			if($(window).width() > 900) {
			/* 1200 x 495 */
			$('#bg_mask').stop(true,true).fadeIn(500
			,function(){
				$('#bigvideo_wapper').stop( true,true).delay(500).fadeIn(500);
				
				}
			);
			} else {
			/* 960 x 395 */
			$('#bg_mask').stop(true,true).fadeIn(500
			,function(){
				$('#smallvideo_wapper').stop(true,true).delay(500).fadeIn(500);
				}
			);
			
			}

	}