$(function() {

$("#reel").css("display", "none");
var stupidIE = false;

if(jQuery.support.opacity == false) {
	stupidIE = true;
	}


//GET THE NUMBER OF CALLOUT ITEMS TOTAL
var dotAmt = $("#reel > div").size()

//GET BAR WIDTH
var barWidth = $("#bar").width();

//FIGURE OUT WHERE TO SPACE THESE GUYS OUT
var dotSpacing = (barWidth/dotAmt);
var thisDotSpace;

//PLACE DOTS AT EACH POINT
for(i=0; i<dotAmt; i++) {
//SPACE
thisDotSpace = Math.floor((dotSpacing * i)+(dotSpacing+9));
$("#bar").append("<div class='dot' id='dot"+i+"' style='left:"+thisDotSpace+"px'></div>")


$("#dot"+i).click(function() {
			clearInterval(timer);
			var thisID = ($(this).attr('id'));
			var theNum = thisID.substring(3);
			
			 closestReel = reelPoints[theNum];
             closestSlider = sliderPoints[theNum];
             pageStatus = theNum+1;
				
			if(stupidIE) {
		
            $("#reel").css("left", closestReel);
		
			$("#slider").animate({left: closestSlider}, 1000);	
			}
			else {
			$("#reel").animate({opacity: 0}, 500, function() {
               $("#reel").css("left", closestReel);
			  $("#reel").animate({opacity: 1}, 500);
			$("#slider").animate({left: closestSlider}, 1000);												   });
			
			}
			timer = setInterval( showDiv, 7500);
						   });

}



    var reelPoints =[0, -850, -1700, -2550, -3400];
    var sliderPoints = [0, 85, 155, 240, 325];
    var pageStatus = 0;

	

	
	var timer;

	timer = setInterval( showDiv, 9500);
	var counter = 0;
	function showDiv() {

	counter++;
	

	if(counter >= 4){
					counter = 0;
					pageStatus = 0;
					closestReel = reelPoints[0];
					closestSlider = sliderPoints[0];
				}
	
	else{
	
	 var t = $("#slider");
                var positionn = t.position();
                var plefter = positionn.left - 60;

                var e = $("#reel");
                var eposition = e.position();
                var epos = eposition.left;

                var closestReel = 0;
                var closestSlider = 0;

                var oldTemp = 0;

                var temp;
                var check;


                  for(var i=0; i<sliderPoints.length; i++) {
                    temp = Math.abs(plefter - sliderPoints[i]);
                    check = Math.abs(plefter - sliderPoints[i-1]);
                      if(temp < check) {
                            closestReel = reelPoints[i+1];
                          closestSlider = sliderPoints[i+1];
                          pageStatus = i;


                      }

                    }
                    if(closestReel == 0) {
                          pageStatus = 0;
						  counter = 0;
						  closestReel = reelPoints[1];
                          closestSlider = sliderPoints[1];
                      }


	}

			
			if(stupidIE) {
            $("#reel").css("left", closestReel);
			$("#slider").animate({left: closestSlider}, 1000);	
			}
			else {
			$("#reel").fadeOut(function() {
               $("#reel").css("left", closestReel);
			  $("#reel").fadeIn();
			$("#slider").animate({left: closestSlider}, 1000);												   });
			
			}
		
		

	}


		if(stupidIE) {
		$("#reel").css("display", "none").delay(800).fadeIn('fast' ,function(){																	   });
		}
		else {
		$("#reel").fadeOut(0).delay(1200).fadeIn();	
		}

    
    $( "#slider" ).draggable({
            containment: "parent",
            axis: "x",
            drag: function() {
				clearInterval(timer);
                var t = $("#slider");
                var positionn = t.position();
                var sliderPos = positionn.left;
                var e = $("#reel");
                var eposition = e.position();
                var reelPos = eposition.left;
                //var plefter = positionn.left * (-10) +60;
                //MOVE
                var plefter = (-1*((sliderPos-60) * 10));
				 
				if(stupidIE) { 
                $("#reel").animate({left: plefter}, 0);
				}
				else {
				$("#reel").animate({left: plefter}, 0).fadeIn(0);
					
				}
             },

             stop: function() {
                //DETERMINE WHICH POINT IS CLOSEST
                var t = $("#slider");
                var positionn = t.position();
                var plefter = positionn.left - 60;

                var e = $("#reel");
                var eposition = e.position();
                var epos = eposition.left;

                var closestReel = 0;
                var closestSlider = 0;

                var oldTemp = 0;

                var temp;
                var check;




                  for(var i=0; i<sliderPoints.length; i++) {
                    temp = Math.abs(plefter - sliderPoints[i]);
                    check = Math.abs(plefter - sliderPoints[i-1]);
                      if(temp < check) {
                           closestReel = reelPoints[i];
                          closestSlider = sliderPoints[i];
                          pageStatus = i;
						  counter = i;

                      }

                    }
                    if(closestReel == 0) {
                          pageStatus = 0;
                      }
			if(stupidIE) {		  
               $("#reel").animate({left: closestReel}, 500);
			}
			else {
				$("#reel").animate({left: closestReel}, 500).fadeIn();
			}
              $("#slider").animate({left: closestSlider}, 500);
			  timer = setInterval( showDiv, 7500);
             }
             });

    $("#arrow-left").click(function() {
            var p = $("#reel");
            var position = p.position();
            var pleft = position.left;
            if (pageStatus >= 0) {
            pageStatus--;
			counter--;
			if(!stupidIE) {	 
            $("#reel").animate({left: reelPoints[pageStatus], opacity: 1}, 1000);
			}
			else {
			$("#reel").animate({left: reelPoints[pageStatus]}, 1000);
			}
			
            $("#slider").animate({left: sliderPoints[pageStatus]}, 1000);

            }
        });


    $("#arrow-right").click(function() {
            var p = $("#reel");
            var position = p.position();
            var pleft = position.left;
            if (pageStatus <= 4) {
            pageStatus++;
			 counter++;
			if(!stupidIE) {	  
            $("#reel").animate({left: reelPoints[pageStatus]}, 1000);
			}
			else {
			$("#reel").animate({left: reelPoints[pageStatus], opacity: 1}, 1000);	
			}
            $("#slider").animate({left: sliderPoints[pageStatus]}, 1000);

            }
        });



	
    });