//=====================Preload Images===========================================//

$.preLoadImages = function(imageList,callback) {
    var pic = [], i, total, loaded = 0;
    if (typeof imageList != 'undefined') {
        if ($.isArray(imageList)) {
            total = imageList.length; // used later
                for (i=0; i < total; i++) {
                    pic[i] = new Image();
                    pic[i].onload = function() {
                        loaded++; // should never hit a race condition due to JS's non-threaded nature
                        if (loaded == total) {
                            if ($.isFunction(callback)) {
                                callback();
                            }
                        }
                    };
                    pic[i].src = imageList[i];
                }
        }
        else {
            pic[0] = new Image();
            pic[0].onload = function() {
                if ($.isFunction(callback)) {
                    callback();
                }
            }
            pic[0].src = imageList;
        }
    }
    pic = undefined;
};


//=====================DOC READY===========================================//


$(document).ready( function() { 
    //$("#blackness").fadeIn("slow");
    if ( jQuery.browser.mobile === true ) {
        var pic1 = '../images/bk1.jpg';
        var pic2 = '../images/bk2.jpg';
	var pic3 = '../images/bk3.jpg';
 
	var duration = 0;
        $('header').css('padding-top','10px');
        $('h1').css('margin-bottom','5px');
        $("#blackness").css('background-color','#ffffff');
        var opacity = 0.8;              
    } else {
        var pic1 = '../images/bk1.jpg';
        var pic2 = '../images/bk2.jpg';
        var pic3 = '../images/bk3.jpg';
        var duration = 400;
        var opacity = 1;
    }
    var isActive = false;
    $.preLoadImages([ pic1 ], function() {
        $("#background").css('background-image','url('+pic1+')').fadeTo(duration, opacity, function() {
            $("#background").fadeIn(duration);
        });
        $.preLoadImages( [ pic2 ], function() {
           $("topp a").click( function() {
	       
	        if ( isActive === true ) {
                    return;    
                } else {
                    isActive = true;
                }
                var rel      = $("topp a").attr("rel");
                $("topp a").attr("rel",rel);
                switch(rel) {
                    case "powerline":
                        var newText = 'Residential';
                        var pic     = pic2;
                        var rel     = "house";
                        var col     = '#ffffff';
                        var acol    = "#ffffff";
                        break;
                    case "house":
                        var newText = 'Creek';
                        var pic     = pic3;
                        var rel     = "creek";
                        var col     = "#eeeeee";
                        var acol    = "#eeeeee";
                        break;
		    case "creek":
                        var newText = 'Powerline';
                        var pic     = pic1;
                        var rel     = "powerline";
                        var col     = "#eeeeee";
                        var acol    = "#eeeeee";
                        break;
                    default:
                        // do nothing
                        break;
                }
                if ( $("#background").css("display") == "block" ) {
                    var div1 = $("#background");
                    var div2 = $("#background2");
                } else {
                    var div1 = $("#background2");
                    var div2 = $("#background");
                }
		 if ( jQuery.browser.mobile === true ) {
		   //$("body").css({'color':col});
                    $("a:link").each( function() {
                        $(this).css({'color':acol});    
                    });                    
                } else {
		   //$("body").animate({'color':col},duration);
                    $("a:link").each( function() {
                        $(this).animate({'color':acol},duration);    
                    });                    
		    }
                div1.fadeOut(duration);
                div2.css('background-image','url('+pic+')').fadeTo(duration, opacity, function() {
                    $("topp p span").text(newText);
                    $("topp a").attr("rel",rel);
                    isActive = false;    
                });
            });    
        });          
    });
    var currentPosition = 0;
  var slideWidth = 820;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }
});