function toggleMap() {
    if($("#mapWrapper").css("display") == "none") {
        $("#mapWrapper").show();
        if(! googleMapWrapper.isLoaded) {
            googleMapWrapper.loadMap();
        }
    }
    else {
        $("#mapWrapper").hide();
    }
}


function toogleCarComments(hideComments) {
    var scrollHeight = document.getElementById("carComments").scrollHeight;
    if($.browser.msie && $.browser.version < 7) {
        if(hideComments) {
            $("#carComments").css("height",
                    scrollHeight > 169 ? "170px" : "auto" );
        }
        else {
            $("#carComments").css("height",
                    scrollHeight < 169 ? "170px" : scrollHeight + "px" );
        }
    }
    else {
        if(hideComments) {
            $("#carComments").css("max-height", "170px");
        }
        else {
            $("#carComments").css("max-height", "none");
        }
    }
    if(hideComments) {
        $(".carCommentLinks .readMore").show();
        $(".carCommentLinks .close").hide();
    }
    else {
        $(".carCommentLinks .readMore").hide();
        $(".carCommentLinks .close").show();
    }
}

$(document).ready(function(){
    if(document.getElementById("carComments") != null && document.getElementById("carComments").scrollHeight <= 170) {
        $(".carCommentLinks").hide();
    }
});


var carsHistory = {
    cookieName : "carsHistory",
    limit : 30,
    cookieExpiration : 90,
    visibleItemsCount : 4,
    startItemIndex : 0,
    list: null, //list of CarItem objects for using in JS code
    ids: null, //list of car Ids for storing in cookies (to avoid cookies overflow)
    updateDate: 0,
    updatePeriod: 5000,
    contextPath: "",

    initialize : function(contextPath, carsLimit) {
        if(carsLimit != undefined && carsLimit != null) {
            this.limit = carsLimit;
        }
        this.contextPath = contextPath;
        this.restoreFromCookies();
        setInterval("carsHistory.refreshCars()", this.updatePeriod);
    },

    refreshCars : function(forceRefresh) {
        var oldUpdateDate = this.updateDate;
        this.restoreUpdateDateFromCookies();
        if(oldUpdateDate < this.updateDate || (forceRefresh)) {
            this.restoreFromCookies();
        }
    },

    addCar : function(id, forceRefresh) {
        this.ids.insertIntoBeginning(id);
        this.updateDate = new Date();
        this.updateDate = this.updateDate.getTime();
        this.storeInCookies();
        this.refreshCars(forceRefresh);
    },

    renderCars : function() {
        var cars = this.list.list;
        if(cars.length != 0) {
            var content = "<table class=\"carsList\" cellspacing=\"0\" cellpadding=\"0\" ><tr><td class=\"scrollLeft\"><a class=\"link\" href=\"javascript:carsHistory.scrollLeft()\"></a></td>";
            var count = this.startItemIndex + this.visibleItemsCount;
            var renderedCars = 0;
            for(var i = this.startItemIndex; (i < count && i < cars.length); i++ ) {
                content += this.renderCarCell(cars[i]);
                renderedCars++;
            }
            if(this.visibleItemsCount < cars.length && renderedCars < this.visibleItemsCount) {
                var endIndex = this.visibleItemsCount - renderedCars;
                for(var i = 0; i < endIndex; i++ ) {
                    content += this.renderCarCell(cars[i]);
                    renderedCars++;                    
                }
            }
            if(renderedCars < this.visibleItemsCount) {
                for(var i = renderedCars; i < this.visibleItemsCount; i++) {
                    content += "<td class=\"carCell\"></td>";
                }
            }
            content += "<td class=\"scrollRight\"><a class=\"link\" href=\"javascript:carsHistory.scrollRight()\"></a></td></tr></table>"
            $("#carsHistory .content").html(content);
            $("#carsHistory").show();
        }
        else {
            $("#carsHistory").hide();
        }
    },

    renderCarCell : function(car) {
        return "<td class=\"carCell\"><table class=\"carInfo\" cellpadding=\"0\" cellspacing=\"0\">\
                        <tr class=\"carTitle\">\
                            <td class=\"leftCorner\"></td>\
                            <td class=\"middle\"><div>" +
               car.manufacturerName + "<br />" +
               car.modelName +
               "</div></td>\
          <td class=\"rightCorner\"></td>\
      </tr> \
      <tr>\
          <td colspan=\"3\">\
              <a href=" + this.contextPath + "/carDescription.htm?id=" + car.id + " target=\"_blank\">\
                                            <img src=\"" + this.contextPath + "/photo.do?type=4&method=showpreview&id="+ car.photoId+ "\"\
                                                 border=\"0\" width=\"140\" height=\"105\"/>\
                                </a>\
                            </td>\
                        </tr>\
                        <tr class=\"properties\">\
                            <td colspan=\"3\">\
                                <dl>\
                                    <dt>\
                                        <div class=\"priceLabel\"></div>\
                                    </dt>\
                                    <dd>\
                                        <span class=\"price\">" + car.priceString + "</span>" + (car.priceString != "ask" ? "万円" : "") +
               "</dd>\
           <dt>\
               <div class=\"yearLabel\"></div>\
           </dt>\
           <dd>\
               <span>" +
               car.yearString +
               "</span>\
           </dd>\
           <dt>\
               <div class=\"mileageLabel\"></div>\
           </dt>\
           <dd>\
               <span>" +
               car.mileageString +
               "</span>\
                               </dd>\
                           </dl>\
                       </td>\
                   </tr>\
                   <tr class=\"bottomRow\">\
                       <td class=\"leftCorner\"></td>\
                       <td class=\"middle\"></td>\
                       <td class=\"rightCorner\"></td>\
                   </tr>\
               </table>\
               </td>";

    },

    scrollRight : function() {
        if(this.list.list.length > this.visibleItemsCount) {
            this.startItemIndex ++;
            this.startItemIndex = (this.startItemIndex == this.list.list.length) ? 0 : this.startItemIndex;
            this.renderCars();
        }
    },

    scrollLeft: function() {
        if(this.list.list.length > this.visibleItemsCount) {
            this.startItemIndex --;
            this.startItemIndex  = (this.startItemIndex < 0) ? this.list.list.length - 1 : this.startItemIndex;
            this.renderCars();
        }
    },

    restoreFromCookies : function() {
        this.ids = new Selection();
        this.ids.initialize(this.limit,"", "");
        this.ids.restoreFromCookies(this.cookieName);
        this.restoreUpdateDateFromCookies();
        this.restoreCarsListByIds();
    },

    restoreCarsListByIds : function() {
        $.ajax({
            type: "get",
            url: this.contextPath + "/ajax/carsHistory.htm",
            success: function(data) {
                carsHistory.ajaxCallback(data);
            }
        });
    },

    ajaxCallback : function(data) {
        this.list = new CarsList();
        if(data != null && data != "") {
            this.list.restoreFromJSON(data, this.limit);
        }
        else {
            this.list.initialize(this.limit);
        }
        this.renderCars();
    },

    storeInCookies : function() {
        this.ids.storeInCookies(this.cookieName, this.cookieExpiration);
        this.storeUpdateDateInCookies();
    },

    restoreUpdateDateFromCookies : function() {
        this.updateDate = $.cookie(this.cookieName + "_updated");
        if(this.updateDate == null || this.updateDate == "") {
            this.updateDate = 0;
        }
    },

    storeUpdateDateInCookies : function() {
        $.cookie(this.cookieName + "_updated", this.updateDate, {expires: this.cookieExpiration, path: "/"});
    }
}

function ie6MaximizeWindow(){
    if($.browser.msie && $.browser.version < 7) {
        window.moveTo(0,0);
        window.resizeTo(screen.width,screen.height);
    }
}

var relatedCars = {
    cookieName : "relatedCars",
    limit : 30,
    visibleItemsCount : 4,
    startItemIndex : 0,
    list: null, //list of CarItem objects for using in JS code
    contextPath: "",

    initialize : function(contextPath, carsLimit) {
        if(carsLimit != undefined && carsLimit != null) {
            this.limit = carsLimit;
        }
        this.list = new CarsList();
        this.list.initialize(this.limit);
        this.contextPath = contextPath;
    },

    addCar : function(carItem) {
        if(this.list.list.length <= this.limit) {
            this.list.list[this.list.list.length] = carItem;
        }
    },

    renderCars : function() {
        var cars = this.list.list;
        if(cars.length != 0) {
            var content = "<table class=\"carsList\" cellspacing=\"0\" cellpadding=\"0\" ><tr><td class=\"scrollLeft\"><a class=\"link\" href=\"javascript:relatedCars.scrollLeft()\"></a></td>";
            var count = this.startItemIndex + this.visibleItemsCount;
            var renderedCars = 0;
            for(var i = this.startItemIndex; (i < count && i < cars.length); i++ ) {
                content += this.renderCarCell(cars[i]);
                renderedCars++;
            }
            if(this.visibleItemsCount < cars.length && renderedCars < this.visibleItemsCount) {
                var endIndex = this.visibleItemsCount - renderedCars;
                for(var i = 0; i < endIndex; i++ ) {
                    content += this.renderCarCell(cars[i]);
                    renderedCars++;
                }
            }
            if(renderedCars < this.visibleItemsCount) {
                for(var i = renderedCars; i < this.visibleItemsCount; i++) {
                    content += "<td class=\"carCell\"></td>";
                }
            }
            content += "<td class=\"scrollRight\"><a class=\"link\" href=\"javascript:relatedCars.scrollRight()\"></a></td></tr></table>"
            $("#relatedCars .content").html(content);
            $("#relatedCars").show();
        }
        else {
            $("#carsHistory").hide();
        }
    },

    renderCarCell : function(car) {
        return "<td class=\"carCell\"><table class=\"carInfo\" cellpadding=\"0\" cellspacing=\"0\">\
                        <tr class=\"carTitle\">\
                            <td class=\"leftCorner\"></td>\
                            <td class=\"middle\"><div>" +
               car.manufacturerName + "<br />" +
               car.modelName +
               "</div></td>\
          <td class=\"rightCorner\"></td>\
      </tr> \
      <tr>\
          <td colspan=\"3\">\
              <a href=" + this.contextPath + "/carDescription.htm?id=" + car.id + " target=\"_blank\">\
                                            <img src=\"" + this.contextPath + "/photo.do?type=4&method=showpreview&id="+ car.photoId+ "\"\
                                                 border=\"0\" width=\"140\" height=\"105\"/>\
                                </a>\
                            </td>\
                        </tr>\
                        <tr class=\"properties\">\
                            <td colspan=\"3\">\
                                <dl>\
                                    <dt>\
                                        <div class=\"priceLabel\"></div>\
                                    </dt>\
                                    <dd>\
                                        <span class=\"price\">" + car.priceString + "</span>" + (car.priceString != "ask" ? "万円" : "") +
               "</dd>\
           <dt>\
               <div class=\"yearLabel\"></div>\
           </dt>\
           <dd>\
               <span>" +
               car.yearString +
               "</span>\
           </dd>\
           <dt>\
               <div class=\"mileageLabel\"></div>\
           </dt>\
           <dd>\
               <span>" +
               car.mileageString +
               "</span>\
                               </dd>\
                           </dl>\
                       </td>\
                   </tr>\
                   <tr class=\"bottomRow\">\
                       <td class=\"leftCorner\"></td>\
                       <td class=\"middle\"></td>\
                       <td class=\"rightCorner\"></td>\
                   </tr>\
               </table>\
               </td>";

    },

    scrollRight : function() {
        if(this.list.list.length > this.visibleItemsCount) {
            this.startItemIndex ++;
            this.startItemIndex = (this.startItemIndex == this.list.list.length) ? 0 : this.startItemIndex;
            this.renderCars();
        }
    },

    scrollLeft: function() {
        if(this.list.list.length > this.visibleItemsCount) {
            this.startItemIndex --;
            this.startItemIndex  = (this.startItemIndex < 0) ? this.list.list.length - 1 : this.startItemIndex;
            this.renderCars();
        }
    }
}