//////////////////////////////////////////////////////////
//         JeScroll v0.2 + MouseWheel + LazyLoad        //
//////////////////////////////////////////////////////////

$(document).ready(function(){
	
	///////////////////////////////////////
	//  Подключение библиотеки LazyLoad  //
	///////////////////////////////////////
	
	$.fn.lazyload = function(options) {
        var settings = {
            threshold    : 0,
            failurelimit : 0,
            event        : "imgload",
            effect       : "show",
            container    : window
        };
                
        if(options) {
            $.extend(settings, options);
        }

        /* Fire one scroll event per scroll. Not one scroll event per image. */
        var elements = this;
        if ("scroll" == settings.event) {
            $(settings.container).bind("scroll", function(event) {
                
                var counter = 0;
                elements.each(function() {
                    if ($.abovethetop(this, settings) ||
                        $.leftofbegin(this, settings)) {
                            /* Nothing. */
                    } else if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                            $(this).trigger("appear");
                    } else {
                        if (counter++ > settings.failurelimit) {
                            return false;
                        }
                    }
                });
                /* Remove image from array so it is not looped next time. */
                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);
            });
        }
        
        this.each(function() {
            var self = this;
            
            /* Save original only if it is not defined in HTML. */
            if (undefined == $(self).attr("original")) {
                $(self).attr("original", $(self).attr("source"));     
            }

            if ("scroll" != settings.event || 
                    undefined == $(self).attr("src") || 
                    settings.placeholder == $(self).attr("src") || 
                    ($.abovethetop(self, settings) ||
                     $.leftofbegin(self, settings) || 
                     $.belowthefold(self, settings) || 
                     $.rightoffold(self, settings) )) {
                        
                if (settings.placeholder) {
                    $(self).attr("src", settings.placeholder);      
                } else {
                    $(self).removeAttr("src");
                }
                self.loaded = false;
            } else {
                self.loaded = true;
            }
            
            /* When appear is triggered load original image. */
            $(self).one("appear", function() {
                if (!this.loaded) {
                    $("<img />")
                        .bind("load", function() {
                            $(self)
                                .hide()
                                .attr("src", $(self).attr("original"))
                                [settings.effect](settings.effectspeed);
                            self.loaded = true;
                        })
                        .attr("src", $(self).attr("original"));
                };
            });

            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if ("scroll" != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });
        
        /* Force initial check if images should appear. */
        $(settings.container).trigger(settings.event);
        
        return this;

    };

    /* Convenience methods in jQuery namespace.           */
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */

    $.belowthefold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).height() + $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= $(element).offset().top - settings.threshold;
    };
    
    $.rightoffold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).width() + $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left + $(settings.container).width();
        }
        return fold <= $(element).offset().left - settings.threshold;
    };
        
    $.abovethetop = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top;
        }
        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
    };
    
    $.leftofbegin = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left;
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };
    /* Custom selectors for your convenience.   */
    /* Use as $("img:below-the-fold").something() */

    $.extend($.expr[':'], {
        "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
        "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
        "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
        "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
    });
	
	///////////////////////////////////////
	// Подключение библиотеки MouseWheel //
	///////////////////////////////////////
	
	$.event.special.mousewheel = {
			setup: function() {
				var handler = $.event.special.mousewheel.handler;
				
				// Fix pageX, pageY, clientX and clientY for mozilla
				if ( $.browser.mozilla )
					$(this).bind('mousemove.mousewheel', function(event) {
						$.data(this, 'mwcursorposdata', {
							pageX: event.pageX,
							pageY: event.pageY,
							clientX: event.clientX,
							clientY: event.clientY
						});
					});
			
				if ( this.addEventListener )
					this.addEventListener( ($.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
				else
					this.onmousewheel = handler;
			},
			
			teardown: function() {
				var handler = $.event.special.mousewheel.handler;
				
				$(this).unbind('mousemove.mousewheel');
				
				if ( this.removeEventListener )
					this.removeEventListener( ($.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
				else
					this.onmousewheel = function(){};
				
				$.removeData(this, 'mwcursorposdata');
			},
			
			handler: function(event) {
				var args = Array.prototype.slice.call( arguments, 1 );
				
				event = $.event.fix(event || window.event);
				// Get correct pageX, pageY, clientX and clientY for mozilla
				$.extend( event, $.data(this, 'mwcursorposdata') || {} );
				var delta = 0, returnValue = true;
				
				if ( event.wheelDelta ) delta = event.wheelDelta/120;
				if ( event.detail     ) delta = -event.detail/3;
//				if ( $.browser.opera  ) delta = -event.wheelDelta;
				
				event.data  = event.data || {};
				event.type  = "mousewheel";
				
				// Add delta to the front of the arguments
				args.unshift(delta);
				// Add event to the front of the arguments
				args.unshift(event);

				return $.event.handle.apply(this, args);
			}
		};

		$.fn.extend({
			mousewheel: function(fn) {
				return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
			},
			
			unmousewheel: function(fn) {
				return this.unbind("mousewheel", fn);
			}
		});
		
	
	//////////////////////////////////////
	//          JeScroll v0.2           //
	//////////////////////////////////////
	
	$('.contCont').each(function(index){
		
		/////////////////////////////////
		//      Элементы системы       //
		/////////////////////////////////
		
		var th = $(this); // Элемент родитель
		var ctrl = $(this).find('.ctrl').first(); // Ползунок
		var scrol = $(this).find('.scrol').first(); // Полоса прокрутки
		var pane = $(this).find('.pane').first(); // Контейнер
		var view = $(this).find('.view').first(); // Вьюпорт
//		var pcnt = $('.panel').size();
		var c = 0;
		
		var st = -10; // Шаг колеса прокрутки мыши
		
		if ($(this).hasClass('horizontal')) {
			var viewHeight = view.width(); 
			var paneHeight = pane.width();
			var scrolHeight = scrol.width();
			var ctrlHeight = Math.round( (viewHeight * scrolHeight) / paneHeight );
			ctrlHeight = (ctrlHeight > scrolHeight) ? scrolHeight : ctrlHeight;
			ctrl.css('width', ctrlHeight+'px');
			var px = paneHeight / scrolHeight;
			var canDg = false;
			var shift;
		} else {
			var viewHeight = view.height(); 
			var paneHeight = pane.height();
			var scrolHeight = scrol.height();
			var ctrlHeight = Math.round( (viewHeight * scrolHeight) / paneHeight );
			ctrlHeight = (ctrlHeight > scrolHeight) ? scrolHeight : ctrlHeight;
			ctrl.css('height', ctrlHeight+'px');
			th.find('.ctrl-vertical-top').first().css('height', ctrlHeight/2+'px');
			var px = paneHeight / scrolHeight;
			var canDg = false;
			var shift;
		}
		
		
		ctrl.mousedown(function(event){
			if (!event) {
		        event = $(window).event;
		    }
		    canDg = true;
		    if (th.hasClass('horizontal')) {
		    	shift = event.clientX-parseInt(ctrl.position().left);
		    } else {
		    	shift = event.clientY-parseInt(ctrl.position().top);
		    }
		    return false;
		});

		$(document).mousemove(function(event){
		    if (!event) {
		        event = $(window).event;
		    }
		    if (canDg) {
		    	if (th.hasClass('horizontal')) {
		    		var newPos = event.clientX-shift;
				    if ( (newPos <= scrolHeight-ctrlHeight) && (newPos >= 0) ) {
						ctrl.css('left', newPos+'px');
				    } else if (newPos > scrolHeight - ctrlHeight) {
				    	ctrl.css('left', (scrolHeight-ctrlHeight)+'px');
				    } else {
				    	ctrl.css('left', '0px');
				    }
				    pane.css('left', Math.round( parseInt(ctrl.position().left)*px*(-1) ) + 'px');
				    checkImages(pane, 0, Math.round(parseInt(ctrl.position().left)*px*(-1)));
		    	} else {
				    var newPos = event.clientY-shift;
				    if ( (newPos <= scrolHeight-ctrlHeight) && (newPos >= 0) ) {
						ctrl.css('top', newPos+'px');
				    } else if (newPos > scrolHeight - ctrlHeight) {
				    	ctrl.css('top', (scrolHeight-ctrlHeight)+'px');
				    } else {
				    	ctrl.css('top', '0px');
				    }
				    pane.css('top', Math.round( parseInt(ctrl.position().top)*px*(-1) ) + 'px');
				    checkImages(pane, Math.round( parseInt(ctrl.position().top)*px*(-1) ));
		    	}
			    return false;
		    }
		    	    
		    return false;
		});

		$(document).mouseup(function(){
			canDg = false;
		});

		th.mousewheel(function(event){
			var wpx = 0;
			if (!event) {
		        event = $(window).event;
		    }
		    if (event.wheelDelta) {
				wpx = event.wheelDelta/120;
		    } 
		    else if (event.detail) {         
				wpx = -event.detail/3;
		    }
		    //alert(wpx);
		    if (wpx) {
		    	if (th.hasClass('horizontal')) {
		    		var curPos = parseInt(ctrl.position().left);               
			        var newPos = wpx*st + curPos;
				    if ( (newPos <= scrolHeight-ctrlHeight) && (newPos >= 0) ) {
						ctrl.css('left', newPos+'px');
				    } else if (newPos > scrolHeight - ctrlHeight) {
				    	ctrl.css('left', (scrolHeight-ctrlHeight)+'px');
				    } else {
				    	ctrl.css('left', '0px');
				    }
				    pane.css('left', Math.round( parseInt(ctrl.position().left)*px*(-1) ) + 'px');
				    checkImages(pane, 0, Math.round(parseInt(ctrl.position().left)*px*(-1)));
				    return false;
		    	} else {
			        var curPos = parseInt(ctrl.position().top);               
			        var newPos = wpx*st + curPos;
				    if ( (newPos <= scrolHeight-ctrlHeight) && (newPos >= 0) ) {
						ctrl.css('top', newPos+'px');
				    } else if (newPos > scrolHeight - ctrlHeight) {
				    	ctrl.css('top', (scrolHeight-ctrlHeight)+'px');
				    } else {
				    	ctrl.css('top', '0px');
				    }
				    pane.css('top', Math.round( parseInt(ctrl.position().top)*px*(-1) ) + 'px');
				    checkImages(pane, Math.round( parseInt(ctrl.position().top)*px*(-1) ));
				    return false;
		    	}
		    }
		    if (event.preventDefault) {
		        event.preventDefault();
		    }
		    event.returnValue = false;
		    if (!event) {
		        event = window.event;
		    }
		    if(event.stopPropagation) event.stopPropagation();
		    else event.cancelBubble = true;
		    if(event.preventDefault) event.preventDefault();
		    else event.returnValue = false;
		});
		
		scrol.mousedown(function(event){
			if (th.hasClass('horizontal')) {
	    		var newPos = event.clientX-200;
	    		//alert(newPos);
			    if ( (newPos <= scrolHeight-ctrlHeight) && (newPos >= 0) ) {
					ctrl.css('left', newPos+'px');
			    } else if (newPos > scrolHeight - ctrlHeight) {
			    	ctrl.css('left', (scrolHeight-ctrlHeight)+'px');
			    } else {
			    	ctrl.css('left', '0px');
			    }
			    pane.animate({left: Math.round( parseInt(ctrl.position().left)*px*(-1) ) + 'px'}, 500);
			    checkImages(pane, 0, Math.round(parseInt(ctrl.position().left)*px*(-1)));
			    return false;
	    	} else {
			    var newPos = event.clientY-300;
			    //alert(newPos);
			    if ( (newPos <= scrolHeight-ctrlHeight) && (newPos >= 0) ) {
					ctrl.css('top', newPos+'px');
			    } else if (newPos > scrolHeight - ctrlHeight) {
			    	ctrl.css('top', (scrolHeight-ctrlHeight)+'px');
			    } else {
			    	ctrl.css('top', '0px');
			    }
			    pane.animate({top: Math.round( parseInt(ctrl.position().top)*px*(-1) ) + 'px'}, 500);
			    checkImages(pane, Math.round( parseInt(ctrl.position().top)*px*(-1) ));
			    return false;
	    	}
			return false;
		});
		
		if ($(this).hasClass('horizontal')) {
			$('body').keydown(function (event) {
				var direction = null;
			    if (event.keyCode == 37) {
			    	c--;
			    	if (c >= 0 && c < pcnt-2) {
			    		var newPos = Math.round(parseInt(c*(scrolHeight/pcnt)));
					    if ( (newPos <= scrolHeight-ctrlHeight) && (newPos >= 0) ) {
							ctrl.css('left', newPos+'px');
					    } else if (newPos > scrolHeight - ctrlHeight) {
					    	ctrl.css('left', (scrolHeight-ctrlHeight)+'px');
					    } else {
					    	ctrl.css('left', '0px');
					    }
					    pane.animate({left: Math.round( parseInt(ctrl.position().left)*px*(-1) ) + 'px'}, 100, 'linear');
					    checkImages(pane, 0, Math.round(parseInt(ctrl.position().left)*px*(-1)));
			    	} else {
			    		c = 0;
			    	}
			    } else if (event.keyCode == 39) {
			    	c++;
			    	if (c >= 0 && c < pcnt-2) {
			    		var newPos = Math.round(parseInt(c*(scrolHeight/pcnt)));
					    if ( (newPos <= scrolHeight-ctrlHeight) && (newPos >= 0) ) {
							ctrl.css('left', newPos+'px');
					    } else if (newPos > scrolHeight - ctrlHeight) {
					    	ctrl.css('left', (scrolHeight-ctrlHeight)+'px');
					    } else {
					    	ctrl.css('left', '0px');
					    }
					    pane.animate({left: Math.round( parseInt(ctrl.position().left)*px*(-1) ) + 'px'}, 100, 'linear');
					    checkImages(pane, 0, Math.round(parseInt(ctrl.position().left)*px*(-1)));
			    	} else {
			    		c = pcnt-2;
			    	}
			    }
			    if (direction != null) {
					direction.click();
				}
			});
		}
	});
	
	function getOffset(child, parent) {
	    var offset = {
	        top: 0,
	        left: 0
	    },
	    top = 0, left = 0;
	    while (child && child != parent) {
	        top = top + parseInt(child.offsetTop);
	        left = left + parseInt(child.offsetLeft);
	        child = child.offsetParent;
	    }   
	    if (child != parent) {
	        return {
	            top: undefined,
	            left: undefined
	        }
	    }
	    return {
	        top : top,
	        left : left
	    }
	}
	
	function checkImages(slider, newOffsetTop, newOffsetLeft) {
    	if (newOffsetTop == 0) {
    		var mainViewport = slider.parents(".view-horizontal:first"),
	    		mainViewport_offsetWidth = mainViewport.attr("offsetWidth"),
	    		mainSlider_domElement = slider[0];
    		
    		slider.find(".view-vertical").map(function(){
    	    	var mainOffset = getOffset(this, mainSlider_domElement),
    	    		chViewport_offsetWidth = $(this).attr("offsetWidth"),
        			diffLeft = newOffsetLeft + mainOffset.left;
    	    		//console.log(diffLeft);
    	    		
    	        if (diffLeft + this.offsetWidth > 0 && diffLeft < mainViewport_offsetWidth) {
    	        	$(this).find("img").map(function(){
    	        		var chSlider_domElement = $(this).parents(".pane-vertical:first")[0],
    	        			chViewport = $(this).parents(".view-vertical:first"),
    	        			chViewport_offsetHeight = chViewport.attr("offsetHeight"),
    	        			chOffset = getOffset(this, chSlider_domElement),
    	        			diffTop = chOffset.top;
    	        		
	    	        	if (diffTop + this.offsetHeight > 0 && diffTop < chViewport_offsetHeight) {
	    	        		$(this).trigger("imgload");
	    	        	}
    	        	});
    	        }
    		});
    	} else {
    		var slider_domElement = slider[0],
    			viewport = slider.parents(".view-vertical:first"),
    			viewport_offsetHeight = viewport.attr("offsetHeight");
    		
	    	slider.find("img").map(function () {
	    	
		        var offset = getOffset(this, slider_domElement),
		            diffTop = newOffsetTop + offset.top;
		        	
		        		        	
		        if (diffTop + this.offsetHeight > 0 && diffTop < viewport_offsetHeight) {
		            $(this).trigger("imgload");
		        }
		    });
    	}
	}
	
	$('.pane-horizontal').find('img').lazyload({
		placeholder: '/img/load.gif',
	    effect: 'fadeIn',
	    event: 'imgload'
	}).end().map(function(){
		checkImages($(this), 0, 0);
	});

	$('.changererer').change(function() {
		var thisInd = $('.changererer option:selected').index();
		$('.pane').find('td').css('background', 'white');
		$('.pane').find('td[td-index='+thisInd+']').css('background', '#e9f6fe');
		var viewWidth = $('.view').width();
		var paneWidthRazn =  $('.pane').width() - $('.view').width();
		var srclWidth = $('.ctrl').width();
		if(thisInd > $('.pane tr:first td').size() - 3 ){
			thisInd = $('.pane tr:first td').size() - 3;
		}
		var paneLeftPos = $('pane').width() - (thisInd * 170);
		$('.pane').animate({left: $('pane').width() - (thisInd * 170)}, 500);
		var newPosCtrl = (viewWidth-srclWidth)*((paneLeftPos)/paneWidthRazn);
		$('.ctrl').animate({left: newPosCtrl*(-1)}, 500);
		
	});
	
});