$(document).ready(function() {
    $("#slider").easySlider({
        controlsShow: true,
        controlsFade: false,
        continuous: false
    });
});

function animateit(obj) {
    if (obj == 'carSlide') {
        if ($('#carSlide').width() < "650") {
            $('#carSlide').animate({ 'width': '650px', 'opacity': 100 }, 1500);
            $('#tab1').css('zIndex', ++currentTab);
            $('#carSlideContent').show(1500);
            
        }
        else {
            $('#carSlide').animate({ 'width': '0px', 'opacity': 0 }, 1500);
            //$('#carSlideContent').toggleClass('closed').hide(1500);
            //$('#carSlideContent').hide(1500);
        }
    }
    if (obj == 'suvSlide') {
        if ($('#suvSlide').width() < "650") {
            $('#suvSlide').animate({ 'width': '650px', 'opacity': 100 }, 1500);
            $('#tab2').css('zIndex', ++currentTab);
            $('#suvSlideContent').fadeIn(1500);
            
        }
        else {
            $('#suvSlide').animate({ 'width': '0px', 'opacity': 0 }, 1500);
            //$('#suvSlide').animate({ 'width': '0px' }, 1500);
            //$('#suvSlideContent').fadeOut(1500);
            
        }
    }
    if (obj == 'truckSlide') {
        if ($('#truckSlide').width() < "650") {
            $('#truckSlide').animate({ 'width': '650px', 'opacity': 100 }, 1500);
            $('#tab3').css('zIndex', ++currentTab);
            $('#truckSlideContent').show(1500);
        }
        else {
            $('#truckSlide').animate({ 'width': '0px', 'opacity': 0 }, 1500);
            //$('#truckSlide').animate({ 'width': '0px' }, 1500);
            //$('#truckSlideContent').hide(1500);
        }
    }
    if (obj == 'hybridSlide') {
        if ($('#hybridSlide').width() < "650") {
            $('#hybridSlide').animate({ 'width': '650px', 'opacity': 100 }, 1500);
            $('#tab4').css('zIndex', ++currentTab);
            $('#hybridSlideContent').show(1500);
        }
        else {
            $('#hybridSlide').animate({ 'width': '0px', 'opacity': 0 }, 1500);
            //$('#hybridSlide').animate({ 'width': '0px' }, 1500);
            //$('#hybridSlideContent').hide(1500);
        }
    }


}

var mycarousel_itemList = [
			{ url: 'images/civic.png', title: 'Civic', href: '' },
			{ url: 'images/crv.png', title: 'CRV', href: '' },
			{ url: 'images/2010fit.png', title: 'Fit', href: '' },
			{ url: 'images/2010insight.png', title: 'Insight', href: '' },
			{ url: 'images/odyssey.png', title: 'Odyssey', href: '' },
			{ url: 'images/pilot09.png', title: 'Pilot', href: '' },
			{ url: 'images/camry.png', title: 'Camry', href: '' },
			{ url: 'images/corolla.png', title: 'Corolla', href: '' },
			{ url: 'images/sienna.png', title: 'Sienna', href: '' },
			{ url: 'images/Rav4.png', title: 'rav4', href: '' },
			{ url: 'images/highlander.png', title: 'highlander', href: '' },
			{ url: 'images/avalon.png', title: 'avalon', href: '' },
			{ url: 'images/crz.png', title: 'crz', href: '' }
		];

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) {
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt) {
    carousel.remove(i);
};

/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item) {
    var href_m = item.href;
    //alert(href_m);
    var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
    return '<a href="' + href_m + '" title="' + item.title + '" target="_self"><img src="' + item.url + '" width="140" height="80" border="0" alt="' + item.title + '" /></a>';
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        scroll: 1,
        wrap: 'circular',
        itemVisibleInCallback: { onBeforeAnimation: mycarousel_itemVisibleInCallback },
        itemVisibleOutCallback: { onAfterAnimation: mycarousel_itemVisibleOutCallback }
    });
    $('#car1').animate({ 'width': '440px', 'left': '185px', 'height': '220px', 'top': '15px' }, 750);
    $('#car1 > img').hide("slow");
    $('#suv1').animate({ 'width': '440px', 'left': '185px', 'height': '220px', 'top': '15px' }, 750);
    $('#suv1 > img').hide("slow");
    $('#truck1').animate({ 'width': '440px', 'left': '185px', 'height': '220px', 'top': '15px' }, 750);
    $('#truck1 > img').hide("slow");
    $('#hybrid1').animate({ 'width': '440px', 'left': '185px', 'height': '220px', 'top': '15px' }, 750);
    $('#hybrid1 > img').hide("slow");
    $('#carSlideContent').hide();
    $('#suvSlideContent').hide();
    $('#truckSlideContent').hide();
    $('#hybridSlideContent').hide();
});
currentCar = 'car1';
currentTopCar = '10px';
currentLeftCar = '20px';
currentSUV = 'suv1';
currentTopSUV = '10px';
currentLeftSUV = '20px';
currentTruck = 'truck1'
currentTopTruck = '10px';
currentLeftTruck = '20px';
currentHybrid = 'hybrid1';
currentTopHybrid = '10px';
currentLeftHybrid = '20px';
currentVehicle = '';
currentTop = '';
currentLeft = '';
currentTab = 9999;
function enlargeMe(thisVehicle, type) {
    switch (type) {
        case 'car':
            currentVehicle = currentCar;
            currentCar = thisVehicle;
            currentTop = currentTopCar;
            currentLeft = currentLeftCar;
            break;
        case 'suv':
            currentVehicle = currentSUV;
            currentSUV = thisVehicle;
            currentTop = currentTopSUV;
            currentLeft = currentLeftSUV;
            break;
        case 'truck':
            currentVehicle = currentTruck;
            currentTruck = thisVehicle;
            currentTop = currentTopTruck;
            currentLeft = currentLeftTruck;
            break;
        case 'hybrid':
            currentVehicle = currentHybrid;
            currentHybrid = thisVehicle;
            currentTop = currentTopHybrid;
            currentLeft = currentLeftHybrid;
            break;
    }
    if ($('#' + thisVehicle).width() < "400") {
        $('#' + thisVehicle).animate({ 'width': '440px', 'left': '185px', 'height': '220px', 'top': '15px' }, 750);
        $('#' + thisVehicle + '> img').hide("slow");
        //$('#' + thisVehicle).effect("bounce", { 'times':'1', 'distance':'5px', 'direction':'right' }, 200);
        $('#' + currentVehicle).animate({ 'width': '50px', 'left': currentLeft, 'height': '50px', 'top': currentTop }, 750);
        $('#' + currentVehicle + '> img').show("slow");
        //currentVehicle = thisVehicle;
        //currentTop = $('#' + thisVehicle).css("top");
        //currentLeft = $('#' + thisVehicle).css("left");
        switch (type) {
            case 'car':
                currentTopCar = $('#' + thisVehicle).css("top");
                currentLeftCar = $('#' + thisVehicle).css("left");
                break;
            case 'suv':
                currentTopSUV = $('#' + thisVehicle).css("top");
                currentLeftSUV = $('#' + thisVehicle).css("left");
                break;
            case 'truck':
                currentTopTruck = $('#' + thisVehicle).css("top");
                currentLeftTruck = $('#' + thisVehicle).css("left");
                break;
            case 'hybrid':
                currentTopHybrid = $('#' + thisVehicle).css("top");
                currentLeftHybrid = $('#' + thisVehicle).css("left");
                break;
        }
    }
}