# 360° Interior Viewer

### Overview <a href="#overview" id="overview"></a>

The `Interior Viewer` component displays an interactive 360° panoramic view of a vehicle's interior. It provides navigation controls for panning, zooming, and fullscreen viewing, allowing users to explore the interior of a vehicle in detail.

### Installation <a href="#installation" id="installation"></a>

The component is part of the Carpose application and requires no separate installation.

### Usage <a href="#usage" id="usage"></a>

To use the Interior Viewer component in a standard HTML page:

```html
<div 
  data-carpose-component="interior-viewer"
  data-api-key="your-api-key"
  data-identifier="your-identifier"
  data-vehicle-id="your-car-id"
></div>
```

### Configuration Attributes <a href="#configuration-attributes" id="configuration-attributes"></a>

The component reads configuration from data attributes on the provided element:

| Attribute                | Type   | Default | Description                                                                               |
| ------------------------ | ------ | ------- | ----------------------------------------------------------------------------------------- |
| `data-carpose-component` | string | -       | Identifies the component type, must be set to "interior-viewer"                           |
| `data-api-key`           | string | -       | API key for authentication with the Carpose backend services. Required for data fetching. |
| `data-identifier`        | string | -       | Identifier for the interior panorama image. Required if car-id is not provided.           |
| `data-vehicle-id`        | string | -       | ID of the car to display interior panorama for. Required if identifier is not provided.   |

### Features <a href="#features" id="features"></a>

* Interactive 360° panoramic view of vehicle interiors
* Navigation controls for:
  * Panning up, down, left, and right
  * Zooming in and out
  * Fullscreen viewing (on non-mobile devices)
* Loading indicator while panorama is being fetched
* Fallback screen when no interior panorama is available
* Overlay with usage hints

### Example <a href="#example" id="example"></a>

```html
<!-- Using identifier -->
<div 
  data-carpose-component="interior-viewer"
  data-api-key="your-api-key"
  data-identifier="vehicle-interior-123"
></div>

<!-- Using car ID -->
<div 
  data-carpose-component="interior-viewer"
  data-api-key="your-api-key"
  data-vehicle-id="550e8400-e29b-41d4-a716-446655440000"
></div>
```

### Behavior <a href="#behavior" id="behavior"></a>

1. **Data Loading**:
   * On initialization, the component fetches the interior panorama data from the API using either the provided identifier or car ID.
   * A loading screen is displayed while the image is being loaded.
   * If no panorama is available, a message is displayed indicating that no 360° interior view is available.
2. **Navigation Controls**:
   * Arrow buttons allow panning up, down, left, and right
   * Plus/minus buttons control zoom level
   * Fullscreen button toggles fullscreen mode (not available on mobile devices)
   * Users can also navigate by dragging the panorama with their mouse or touch gestures
3. **Responsive Behavior**:
   * The component adapts to the container size
   * Controls are accessible on both desktop and mobile devices
   * Fullscreen option is automatically disabled on mobile devices