/* Author: Ben Palmer */

$(document).ready(function(){

	/* Reel namespace on the product page */
	
	var debug = {};
	
	var isiOS = false;
	var agent = navigator.userAgent.toLowerCase();
	
	if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){
		   isiOS = true;
	}
	
	if(agent.indexOf('android') >= 0){
		   isAndroid = true;
	}
	
	if(agent.indexOf('blackberry') >= 0){
		   isBlackBerry = true;
	}

	var options = { 
		frame: reel.frame,
		frames: reel.frames, 
		speed: 0.4,
		delay: 300, /* 5 minute restart delay */
		timeout: 300,
		entry: 0.4,
		opening: 2.5,
		cw : reel.cw,
		images: reel.images,
		throwable : false
	};
	
	$('#image,#zoom').disableSelection(); /* disable text selection */
	
	var a = $('#image').reel(options).bind('frameChange',function(){
		reel.setFrame($(this));
		delete options.entry;
		delete options.opening;
	}).bind('down',function(){
		$(this).trigger('stop');
		$('#play_btn').removeClass('active');
	});
	
	if(reel.zoom_mode==1){
		
		$('.jquery-reel-interface').live('dblclick',function(){
			
			if(reel.open){
				reel.closeWindow();
			}else{
			
				$('a#zoom_btn').addClass('active');

				var ci = reel.setImages();

				$('#image').trigger('teardown'); /* stop the object cause double click plays it normally */
				$('#image').attr('src', ci.small);

				$('#loader').fadeIn('fast');


				$('#zoomimage').attr('src', ci.zoom);
				//$('#thumb img').attr('src', ci.small);



				$('#zoomimage').imagesLoaded(function(){


					reel.resetDrags(); /* iOS does wonky stuff so reset coordinates */

					$('#big img').draggable({
						containment : '#big',
						drag: function(e){
							//reel.moveThumb($(this));
							debug.dragValues();
						}
					});

					// if(!isiOS){
					// 
					// 						$('#thumb #area').draggable({
					// 							containment : '#thumb',
					// 							drag: function(e){
					// 								reel.moveZoom($(this));
					// 								debug.dragValues();
					// 							}
					// 						});
					// 
					// 					}

					$('#zoom').fadeIn(500,function(){
						$('#image').attr('src', ci.small);
						$('#loader').fadeOut('fast');
						reel.open = true;
					});
				});
			
			}
			
	
		});
		
		$('a#zoom_btn').click(function(){
			
			if(reel.open){
				reel.closeWindow();
			}else{
			
				$('a#zoom_btn').addClass('active');

				var ci = reel.setImages();

				$('#image').trigger('teardown'); /* stop the object cause double click plays it normally */
				$('#image').attr('src', ci.small);

				$('#loader').fadeIn('fast');


				$('#zoomimage').attr('src', ci.zoom);
				//$('#thumb img').attr('src', ci.small);



				$('#zoomimage').imagesLoaded(function(){


					reel.resetDrags(); /* iOS does wonky stuff so reset coordinates */

					$('#big img').draggable({
						containment : '#big',
						drag: function(e){
							//reel.moveThumb($(this));
							debug.dragValues();
						}
					});

					// if(!isiOS){
					// 
					// 						$('#thumb #area').draggable({
					// 							containment : '#thumb',
					// 							drag: function(e){
					// 								reel.moveZoom($(this));
					// 								debug.dragValues();
					// 							}
					// 						});
					// 
					// 					}

					$('#zoom').fadeIn(500,function(){
						$('#image').attr('src', ci.small);
						$('#loader').fadeOut('fast');
						reel.open = true;
					});
				});	
			
			}
		
		});
	
	};
	
	$('#download_btn').click(function(e){
		var b = $(this).parent().parent().attr('id').substr(3);
		//window.location = "/product/download/"+a+"/"+reel.current.toString();
		//window.open("download.php?ref="+a+"&f="+reel.current.toString(),"_blank");
		var c = reel.setImages();
		var brand = $('.wrapper a.logo').attr('id').substr(5);
		window.open("/image.php?src="+c.zoom.substr(1)+"&brand="+brand,"_blank");
		//window.open(c.zoom,"_blank");
	});
	

	/* only allow play/stop if not in a zoom */

	$('#play_btn').click(function(){
		if(reel.open==false){
			if(reel.playing == true){
				$('#image').trigger('stop');
				$(this).removeClass('active');
				reel.playing = false;
			}else{
				$('#image').trigger('play');
				$(this).addClass('active');
				reel.playing = true;
			}
		}
	});
	
	/* double tap close on iOS */
	
	if(isiOS){
		
		$('#zoom').live('dblclick',function(){
			reel.closeWindow();
		});

	};
	
	/* normal close */
	
	$('a.close').click(function(){
		reel.closeWindow();
	});
	
	reel.closeWindow = function(){
		$('a#zoom_btn').removeClass('active');
		$('#image').reel(options).bind('frameChange',function(){
			reel.setFrame($(this));
		}).bind('down',function(){
			$(this).trigger('stop');
			$('#play_btn').removeClass('active');
		});
		$('#zoom').fadeOut(500,function(){
			reel.resetDrags();
			reel.open = false;
		});
	};
	
	reel.setFrame = function($this){
		var cf = $this.data('frame');
		reel.current = options.frame = cf;
	};
	
	// reel.moveThumb = function($this){
	// 		var vx = $this.css('left');
	// 		var vy = $this.css('top');
	// 		var px = parseInt(vx.substr(0,vx.length-2)) / 490;
	// 		var py = parseInt(vy.substr(0,vy.length-2)) / 490;
	// 		var l = $('#area').width() - ($('#area').width()*px);
	// 		var t = $('#area').height() - ($('#area').height()*py);
	// 		$('#area').css({
	// 			left : l,
	// 			top : t
	// 		});
	// 	};
	
	reel.moveZoom = function($this){
		var vx = $this.css('left');
		var vy = $this.css('top');
		var px = parseInt(vx.substr(0,vx.length-2)) / 60;
		var py = parseInt(vy.substr(0,vy.length-2)) / 60;
		var l = 490 - (490*px);
		var t = 490 - (490*py);
		$('#big img').css({
			left : l,
			top : t
		});
	};
	
	reel.resetDrags = function(_args){
		$('#area').css({ left : 30, top : 30 });
		$('#big img').css({	left : 245,	top : 245 });
	};
	
	reel.setImages = function(_args){
		var data = {};
		
		var a = $('#big').attr('rel').split('_');
		var brand = a[0];
		var prodref = a[1];
		var cVal = (reel.current < 10) ? "0"+reel.current.toString() : reel.current.toString();
		
		data.small = '/photos/'+prodref+'/'+brand+'_'+prodref+'_360_'+cVal+'.jpg';
		data.zoom = '/photos/'+prodref+'/zoom/'+brand+'_'+prodref+'_360_'+cVal+'-zoom.jpg';
		//console.log(data);
		return data;
	};
	
	debug.dragValues = function(_args){
		//return false;
		$('#cZ').val('Z: ' + $('#big img').css('width') + ',' + $('#big img').css('height') + " [" + $('#big img').css('left') + "," + $('#big img').css('top') + "]");
		$('#cT').val('T: ' + $('#area').css('width') + ',' + $('#area').css('height') + " [" + $('#area').css('left') + "," + $('#area').css('top') + "]");
		
	};
	
});